Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="main">
  <div class="left">
    <ul>
      <li class="menu-heading">Dashboards</li>
      <li><a data-toggle="tab" href="#overview"><i class="fa fa-home fa-lg"></i> Overview</a></li>
      <li><a data-toggle="tab" href="#performance"><i class="fa fa-tachometer fa-lg"></i> Performance</a></li>
      <li><a data-toggle="tab" href="#analytics"><i class="fa fa-line-chart fa-lg"></i> Analytics</a></li>
      <li><a data-toggle="tab" href="#landing"><i class="fa fa-rocket fa-lg"></i> Landing</a></li>
      <li><a data-toggle="tab" href="#projects"><i class="fa fa-table fa-lg"></i> Projects</a></li>
      <li class="menu-heading">Pages</li>
      <li class="active"><a data-toggle="tab" href="#user-profile"><i class="fa fa-street-view fa-lg"></i> User Profile</a></li>
      <li><a data-toggle="tab" href="#candidates"><i class="fa fa-users fa-lg"></i> Candidates</a></li>
      <li><a data-toggle="tab" href="#invoices"><i class="fa fa-files-o fa-lg"></i> Invoices</a></li>
      <li><a data-toggle="tab" href="#single-invoice"><i class="fa fa-file-text-o fa-lg"></i> Single Invoice</a></li>
      <li><a data-toggle="tab" href="#browse"><i class="fa fa-search fa-lg"></i> Browse</a></li>
    </ul>
  </div>
  <div class="right"> 
    <div class="tab-content">
      <!-- Overview -->
      <div id="overview" class="tab-pane fade">
        <div class="header">
          <h4>Account</h4>
          <ul class="pull-right">
            <li>
              <div class="btn-group dropleft dropdown-user">
                <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-alert">
                <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-check-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-calendar fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-info-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-avatar">
                <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu"> 
                  <li><a href="#">Edit Profile</a></li>
                  <li><a href="#">View Activity</a></li>
                  <li><a href="#">Manage Roles</a></li>
                </ul>
              </div>
            </li>
          </ul>
</div>
        <div class="content">
          <div class="row graph-cards">
            <div class="col-sm-4">
              <div>
                <h4>Next Payout <br><small>Activity from 4 Jan 2017 to 10 Jan 2017</small></h4>
                <h2>$2,190 <br><small>You’ve made $230 Today</small></h2>
                <img src="https://bit.ly/2YWQpwi" class="img-responsive" alt="">
              </div>
            </div>
            <div class="col-sm-4">
              <div>
                <h4>Total Earnings <br><small>In 15 Months</small></h4>
                <h2>$23,580 <br><small>Last Month you’ve made $2,980</small></h2>
                <img src="https://bit.ly/33iEQmJ" class="img-responsive" alt="">
              </div>
            </div>
            <div class="col-sm-4">
              <div>
                <h4>All Tasks Overview <br><small>Next 4 Weeks</small></h4>
                <!-- <h2>$2,190 <br><small>You’ve made $230 Today</small></h2> -->
                <img src="https://bit.ly/31zdsPL" alt="">
              </div>
            </div>
</div>
          <div class="row project-cards">
            <div class="col-sm-3">
              <div class="card">
                <img src="https://bit.ly/2OXtcKC" alt=""/>
                <h5>Magazine Images <br> <small>Kinfolk | Last Update: 21 Dec 2016</small></h5>
                <div class="row">
                  <div class="col-sm-6">
                    <h6>4,870 USD <br><small>Budget / Salary</small></h6>
                  </div>
                  <div class="col-sm-6">
                    <h6>Early Dec 2017 <br><small class="text-red">10 Days Remaining</small></h6>
                  </div> 
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <img src="https://bit.ly/2Ku2zc1" alt=""/>
                <h5>Design Competition 2018 <br> <small>Gourmet| Last Update: 29 Dec 2017</small></h5>
                <div class="row">
                  <div class="col-sm-6">
                    <h6>9,680 USD <br><small>Budget / Salary</small></h6>
                  </div>
                  <div class="col-sm-6">
                    <h6>Late January <br><small class="text-red">Deadline</small></h6>
                  </div> 
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <img src="https://bit.ly/2ySk1Ai" alt=""/>
                <h5>New Dashboard <br> <small>Tapdaq | Last Update: 28 Nov 2017</small></h5>
                <div class="row">
                  <div class="col-sm-6">
                    <h6>4,870 USD <br><small>Budget / Salary</small></h6>
                  </div>
                  <div class="col-sm-6">
                    <h6>Early Dec 2017 <br><small class="text-red">10 Days Remaining</small></h6>
                  </div> 
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <img src="https://bit.ly/2MkaTNZ" alt=""/>
                <h5>Mobile App <br> <small>Cofee & Co. | Last Update: 1 Dec 2016</small></h5>
                <div class="row">
                  <div class="col-sm-6">
                    <h6>8,760 USD <br><small>Budget / Salary</small></h6>
                  </div>
                  <div class="col-sm-6">
                    <h6>Early Dec 2017 <br><small class="text-red">6 Days Remaining</small></h6>
                  </div>
                </div>
              </div>
            </div>
</div>
          <div class="row invoice-task">
            <div class="col-sm-6">
              <div class="invoice">
                <div class="table-responsive">
                  <table class="table">
                    <h5>Invoicing <small class="pull-right"><a href="#">View all invoices</a></small></h5>
                    <tbody>
                      <tr>
                        <td>00450</td>
                        <td>Design Works</td>
                        <td>Carlson Limited</td>
                        <td><button class="btn btn-red btn-sm pull-right">DELAYED</button></td>
                        <td>$2,580</td>
                      </tr>
                      <tr>
                        <td>00569</td>
                        <td>New Illustrations</td>
                        <td>Twitter</td>
                        <td><button class="btn btn-warning btn-sm pull-right">PENDING INVOICE</button></td>
                        <td>$3,130</td>
                      </tr>
                      <tr>
                        <td>01875</td>
                        <td>UX Study</td>
                        <td>Re-Research</td>
                        <td><button class="btn btn-success btn-sm pull-right">PAID TODAY</button></td>
                        <td>$2,580</td>
                      </tr>
                      <tr>
                        <td>00369</td>
                        <td>Landing Page</td>
                        <td>Travelsimo</td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">PAID TODAY</button></td>
                        <td>$3,130</td>
                      </tr>
                      <tr>
                        <td>00689</td>
                        <td>iOS App Design</td>
                        <td>Silingo</td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">PAID TODAY</button></td>
                        <td>$3,130</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="tasks">
                <div class="table-responsive">
                  <table class="table">
                    <h5>Tasks <small class="pull-right"><a href="#">View all tasks</a></small></h5>
                    <tbody>
                      <tr>
                        <td>
                          <div class="checkbox" id="check">
                            <label>
                              <input type="checkbox"> Create new prototype for the landing page
                            </label>
                          </div>
                        </td>
                        <td><button class="btn btn-red btn-sm pull-right">DUE TODAY</button></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> Add new Google Analytics code to all main files
                            </label>
                          </div>
                        </td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">DUE IN 2 DAYS </button></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> Finish Dashboard UI Kit update
                            </label>
                          </div>
                        </td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">DUE IN 3 DAYS </button></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> Update parallax scroll on team page
                            </label>
                          </div>
                        </td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">DUE IN 5 DAYS </button></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> Finish Dashboard UI Kit update
                            </label>
                          </div>
                        </td>
                        <td><button class="btn btn-grayblue btn-sm pull-right">DUE IN 1 WEEK </button></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
</div>
        </div>
      </div>
      <!-- Performance -->
      <div id="performance" class="tab-pane fade">
        <div class="header">
            <h4>Performance</h4>
            <ul class="pull-right">
              <li>
                <div class="btn-group dropleft dropdown-user">
                  <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-alert">
                  <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-check-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-calendar fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-info-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-avatar">
                  <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu"> 
                    <li><a href="#">Edit Profile</a></li>
                    <li><a href="#">View Activity</a></li>
                    <li><a href="#">Manage Roles</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        <div class="content">
          <div class="row flex">
            <div class="col-sm-2">
              <div class="info-card">
                <h3 class="text-center"><b>354</b> <br><small> CUSTOMERS</small></h3>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="info-card">
                <h3 class="text-center"><b>54%</b> <br><small> TARGET ACHIEVED</small></h3>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="info-card">
                <h3 class="text-center"><b>13%</b> <br><small> NEW SALES</small></h3>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="info-card">
                <h3 class="text-center"><b>21</b> <br><small> NEW CUSTOMERS</small></h3>
              </div>
            </div>
          </div>
          <div class="row world">
            <div class="col-sm-6">
              <div class="world-card">
                <h4>World Wide</h4>
                <img src="https://bit.ly/2YP6nh6" alt="">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="product-card">
                <h4>Product Sale</h4>
                <div class="custom-progress">
                  <h6><i class="fa fa-circle-o fa-lg text-success"></i>Business for Newbies <small class="pull-right">252</small></h6>
                  <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> 
                      <span class="sr-only">70% Complete (success)</span>
                    </div>
                  </div>
                </div>
                <div class="custom-progress">
                  <h6><i class="fa fa-circle-o fa-lg text-warning"></i>Graph UI Kit <small class="pull-right">300</small></h6>
                  <div class="progress">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 
                      <span class="sr-only">80% Complete (warning)</span>
                    </div>
                  </div>
                </div>
                <div class="custom-progress">
                  <h6><i class="fa fa-circle-o fa-lg text-info"></i> iOS UI Kit <small class="pull-right">149</small></h6>
                  <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
                      <span class="sr-only">40% Complete (info)</span>
                    </div>
                  </div>
                </div>
                <div class="custom-progress">
                  <h6><i class="fa fa-circle-o fa-lg text-danger"></i>English Webinar <small class="pull-right">98</small></h6>
                  <div class="progress">
                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%"> 
                      <span class="sr-only">30% Complete (danger)</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row stats">
            <div class="col-sm-4">
              <div class="stats-card sales">
                <h4>Daily Sales 
                  <small class="pull-right">552</small><br><br>
                  <small class="pull-right text-success">+16.2%</small><br>
                </h4>
                <img src="https://bit.ly/2TwueMn" alt="">
                <hr>
                <div class="row">
                  <div class="col-sm-6">
                    <h6>BEST DAY <small>21</small></h6>
                  </div>
                  <div class="col-sm-6 text-right">
                    <h6>AVERAGE <small>32</small></h6>
                  </div>
                </div>
                <hr>
                <div class="row">
                  <div class="col-sm-10">
                    <h6>THIS MONTH</h6>
                    <div class="progress">
                      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <h4>21</h4>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-10">
                    <h6>LAST MONTH</h6>
                    <div class="progress">
                      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <h4>34</h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="stats-card customers">
                <h4>Customers 
                  <small class="pull-right">354</small><br><br>
                  <small class="pull-right text-success">+16.2%</small><br>
                </h4>
                <img src="https://bit.ly/33uUStM" alt="">
                <hr>
                <div class="row">
                  <div class="col-sm-4">
                    <h6><i class="fa fa-circle-o text-warning"></i> New</h6>
                  </div>
                  <div class="col-sm-4">
                    <h6><i class="fa fa-circle-o text-primary"></i> Returning</h6>
                  </div>
                  <div class="col-sm-4">
                    <h6><i class="fa fa-circle-o text-success"></i> Referrals</h6>
                  </div>
                </div>
                <hr>
                <div class="row p-bars">
                  <div class="col-sm-4">
                    <h6>39 <br><small>NEW</small></h6>
                    <div class="progress">
                      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <h6>54 <br><small>RETURNING</small></h6>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (info)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <h6>54 <br><small>REFERRALS</small></h6>
                    <div class="progress">
                      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (success)</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="stats-card profit"> 
                <h4>Profit 
                  <small class="pull-right">$1.435</small><br><br>
                  <small class="pull-right text-success">+16.2%</small><br>
                </h4>
                <img src="https://bit.ly/2H6pzMf" alt="">
                <hr>
                <div class="table-responsive">
                  <table class="table">
                    <tbody>
                      <tr>
                        <td width="60%"><i class="fa fa-circle-o text-danger"></i> Paypal</td>
                        <td class="text-right">$365</td>
                        <td class="text-red text-right">18,7% <i class="fa fa-angle-down"></i></td>
                      </tr>
                      <tr>
                        <td width="60%"><i class="fa fa-circle-o text-info"></i> Gumroad</td>
                        <td class="text-right">$299</td>
                        <td class="text-success text-right">18,7%  <i class="fa fa-angle-up"></i></td>
                      </tr>
                      <tr>
                        <td width="60%"><i class="fa fa-circle-o text-success"></i> Others</td>
                        <td class="text-right">$69 </td>
                        <td class="text-success text-right">18,7% <i class="fa fa-angle-up"></i></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Analytics -->
      <div id="analytics" class="tab-pane fade">
        <div class="header">
            <h4>Analytics</h4>
            <ul class="pull-right">
              <li>
                <div class="btn-group dropleft dropdown-user">
                  <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-alert">
                  <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-check-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-calendar fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-info-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-avatar">
                  <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu"> 
                    <li><a href="#">Edit Profile</a></li>
                    <li><a href="#">View Activity</a></li>
                    <li><a href="#">Manage Roles</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        <div class="content">
          <div class="row">
            <div class="col-sm-8">
              <div class="revenue">
                <h4>Revenue <small class="pull-right">January 2017</small></h4>
                <img src="https://bit.ly/2YZsc8R" alt="">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="">
                <div class="active-clients">
                  <h4>Active Clients</h4>
                  <h6><small>You’re currently in</small> TOP 10% <small>of Workspace <br> platform your rating is </small>4.85. <small>Keep up great work!</small></h6>
                  <div class="table-responsive">
                    <table class="table">
                      <tbody>
                        <tr>
                          <td>Rating</td>
                          <td width="70%">
                            <div class="progress">
                              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%">
                                <span class="sr-only">72% Complete (success)</span>
                              </div>
                            </div>
                          </td>
                          <td class="text-right">72%</td>
                        </tr>
                        <tr>
                          <td>Budget</td>
                          <td width="70%">
                            <div class="progress">
                              <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="42.6" aria-valuemin="0" aria-valuemax="100" style="width: 42.6%">
                                <span class="sr-only">42.6% Complete (success)</span>
                              </div>
                            </div>
                          </td>
                          <td class="text-right">42.6%</td>
                        </tr>
                        <tr>
                          <td>Timing</td>
                          <td width="70%">
                            <div class="progress">
                              <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="89.2" aria-valuemin="0" aria-valuemax="100" style="width: 89.2%">
                                <span class="sr-only">89.2% Complete (success)</span>
                              </div>
                            </div>
                          </td>
                          <td class="text-right">89.2%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="">
                <div class="tasks">
                  <h4>Tasks</h4>
                  <div class="table-responsive">
                    <table class="table">
                      <tbody>
                        <tr>
                          <td>Completed</td>
                          <td class="text-right">340</td>
                        </tr>
                        <tr>
                          <td>Total</td>
                          <td class="text-right">520</td>
                        </tr>
                        <tr>
                          <td>Monthly Average</td>
                          <td class="text-right">2454</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <hr>
                  <div class="table-responsive">
                    <table class="table">
                      <tbody>
                        <tr>
                          <td>Rating</td>
                          <td width="70%">
                            <div class="progress">
                              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="65.3" aria-valuemin="0" aria-valuemax="100" style="width: 65.3%">
                                <span class="sr-only">65.3% Complete (success)</span>
                              </div>
                            </div>
                          </td>
                          <td class="text-right">65.3%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row total-stats">
            <div class="col-sm-3">
              <div class="stats-card">
                <span class="orange-chart">
                  <i class="fa fa-line-chart fa-lg"></i>
                </span>
                <h3>$9,587 <small><i class="fa fa-caret-up"></i></small><br>
                  <small>TOTAL PROFIT <b class="text-success">(+$286)</b></small>
                </h3>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="stats-card">
                <span class="purple-chart">
                  <i class="fa fa-pie-chart fa-lg"></i>
                </span>
                <h3>$2,190 <small><i class="fa fa-caret-up"></i></small><br>
                  <small>REVENUE <b class="text-success">(+$286)</b></small>
                </h3>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="stats-card">
                <span class="red-chart">
                  <i class="fa fa-pie-chart fa-lg"></i>
                </span>
                <h3>93 <small><i class="fa fa-caret-down"></i></small><br>
                  <small>ACTIVE CLIENTS <b class="text-red">(-2)</b></small>
                </h3>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="stats-card">
                <span class="green-chart">
                  <i class="fa fa-pie-chart fa-lg"></i>
                </span>
                <h3>$431 <small><i class="fa fa-caret-up"></i></small><br>
                  <small>PROFIT  <b class="text-success"> (+$3.11)</b></small>
                </h3>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="income-customers">
                <div class="table-responsive">
                  <h4>Recent Income <small class="pull-right"><a href="#">View All</a></small></h4>
                  <table class="table">
                    <tbody>
                      <tr>
                        <td><img src="https://bit.ly/2Km1kf6" alt="" class="img-circle"></td>
                        <td>Minnie Ferguson</td>
                        <td>One Page Dashboard</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2OWjYOV" alt="" class="img-circle"></td>
                        <td>Ann Hunter</td>
                        <td>New Website	</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/31Fs8wF" alt="" class="img-circle"></td>
                        <td>Wedding</td>
                        <td>New Website</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2Km1kf6" alt="" class="img-circle"></td>
                        <td>Minnie Ferguson</td>
                        <td>One Page Dashboard</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="income-customers">
                <div class="table-responsive">
                  <h4>Best Customers <small class="pull-right"><a href="#">View All</a></small></h4>
                  <table class="table">
                    <tbody>
                      <tr>
                        <td><img src="https://bit.ly/2Km1kf6" alt="" class="img-circle"></td>
                        <td>Minnie Ferguson</td>
                        <td>One Page Dashboard</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2OWjYOV" alt="" class="img-circle"></td>
                        <td>Ann Hunter</td>
                        <td>New Website	</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/31Fs8wF" alt="" class="img-circle"></td>
                        <td>Wedding</td>
                        <td>New Website</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2Km1kf6" alt="" class="img-circle"></td>
                        <td>Minnie Ferguson</td>
                        <td>One Page Dashboard</td>
                        <td>$150</td>
                        <td>3 Days ago</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Landing -->
      <div id="landing" class="tab-pane fade">
        <div class="header">
            <h4>Welcome</h4>
            <ul class="pull-right">
              <li>
                <div class="btn-group dropleft dropdown-user">
                  <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-alert">
                  <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-check-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-calendar fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-info-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-avatar">
                  <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu"> 
                    <li><a href="#">Edit Profile</a></li>
                    <li><a href="#">View Activity</a></li>
                    <li><a href="#">Manage Roles</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        <div class="content">
          <h3 class="text-center">
            Hi there! Welcome back to the Dashboard. <br>
            <small> Check out your past searches and the content you’ve browsed in. <a href="#">View last results</a></small>
          </h3>
          <div class="row">
            <div class="col-sm-4 text-center">
              <div class="card-4">
                <img src="https://bit.ly/2YO9Mws" alt="">
                <p>Check your performance. See the results of all your active campaings.</p>
              <button class="btn btn-info">Start new campaign</button>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="card-4">
                <img src="https://bit.ly/2TxGv33" alt="">
                <p>Start console and prepare new stuff for your customers or community!</p>
              <button class="btn btn-info">View your reports</button>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="card-4">
                <img src="https://bit.ly/2KyiS7T" alt="">
                <p>All Files ready? <br>Start promoting your apps today.</p>
              <button class="btn btn-info">Start using dashboard</button>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <h3>Dashboard Overview</h3>
              <div class="card-6">
                <div class="row">
                  <div class="col-sm-4">
                    <h4>801, 523 <br> <small>Newsletters Sent</small></h4>
                    <img src="https://bit.ly/2yYe5pz" alt="">
                  </div>
                  <div class="col-sm-4">
                    <h4>45, 957 <br> <small>Newsletters Sent</small></h4>
                    <img src="https://bit.ly/2yYe5pz" alt="">
                  </div>
                  <div class="col-sm-4">
                    <h4>1, 024 <br> <small>Newsletters Sent</small></h4>
                    <img src="https://bit.ly/2yYe5pz" alt="">
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-3">
                    <h5><small>Open Rate</small><br>32.21%</h5>
                    <div class="progress">
                      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="32.21" aria-valuemin="0" aria-valuemax="100" style="width: 32.21%">
                        <span class="sr-only">32.21% Complete (success)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <h5><small>Read Rate</small><br>75.21%</h5>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="75.21" aria-valuemin="0" aria-valuemax="100" style="width: 75.21%">
                        <span class="sr-only">32.21% Complete (success)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <h5><small>Attachments</small><br>63.45%</h5>
                    <div class="progress">
                      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="63.45" aria-valuemin="0" aria-valuemax="100" style="width: 63.45%">
                        <span class="sr-only">63.45% Complete (success)</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <h5><small>New Subs</small><br>72.4%</h5>
                    <div class="progress">
                      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="72.4" aria-valuemin="0" aria-valuemax="100" style="width: 72.4%">
                        <span class="sr-only">72.4% Complete (success)</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <h3>
                Recently Opened
                <p class="pull-right">
                  <select class="form-control">
                    <option>All types</option>
                    <option>This day</option>
                    <option>Last week</option>
                  </select>
                </p>
              </h3>
              <div class="card-6">
                <div class="table-responsive">
                  <table class="table">
                    <tbody>
                      <tr>
                        <td><img src="https://bit.ly/2N7po7n" class="img-rounded"></td>
                        <td><i class="fa fa-file-pdf-o text-red"></i> Santorini.pdf</td>
                        <td>25MB | Edited 1 minute ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2yYgK2x" class="img-rounded"></td>
                        <td><i class="fa fa-file-pdf-o text-red"></i> Sea Presentation.pdf</td>
                        <td>12MB | Edited 3 minute ago</td> 
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2OXtcKC" class="img-rounded"></td>
                        <td><i class="fa fa-file-text-o text-success"></i> Lakes in India.doc</td>
                        <td>25MB | Edited 1 minute ago</td>
                      </tr>
                      <tr>
                        <td><img src="https://bit.ly/2N7po7n" class="img-rounded"></td>
                        <td><i class="fa fa-file-pdf-o text-red"></i> Santorini.pdf</td>
                        <td>25MB | Edited 1 minute ago</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Projects -->
      <div id="projects" class="tab-pane fade">
        <div class="header">
            <h4>Welcome</h4>
            <ul class="pull-right">
              <li>
                <div class="btn-group dropleft dropdown-user">
                  <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-alert">
                  <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-check-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-calendar fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-info-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-avatar">
                  <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu"> 
                    <li><a href="#">Edit Profile</a></li>
                    <li><a href="#">View Activity</a></li>
                    <li><a href="#">Manage Roles</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        <div class="content">
          <div class="row">
            <div class="col-sm-3">
              <div class="card-3">
                <h3><small>NEW PROJECTS</small>
                <span class="pull-right"><i class="fa fa-arrow-circle-o-up fa-2x"></i></span>
                  <br>94
                </h3>
                <hr>
                <small>13% INCREASE</small>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card-3">
                <h3><small>TEAM MEMBERS</small>
                <span class="pull-right"><i class="fa fa-arrow-circle-o-up fa-2x"></i></span>
                  <br>5,990
                </h3>
                <hr>
                <small>4% INCREASE</small>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card-3">
                <h3><small>TOTAL BUDGET</small>
                <span class="pull-right"><i class="fa fa-arrow-circle-o-down fa-2x"></i></span>
                  <br>$80,890

                </h3>
                <hr>
                <small>21% DECREASE</small>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card-3">
                <h3><small>NEW CUSTOMERS</small>
                <span class="pull-right"><i class="fa fa-arrow-circle-o-down fa-2x"></i></span>
                  <br>3
                </h3>
                <hr>
                <small>4% DECREASE</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="responsive-table">
              <h3>Ongoing <small> 32 Projects</small><i class="fa fa-cloud-download pull-right"></i></h3>
              <table class="table">
                <thead>
                  <tr>
                    <th>Project</th>
                    <th>Deadline</th>
                    <th>Leader + Team</th>
                    <th>Budget</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="danger">
                    <td>New Dashboard <br> <small>Google</small></td>
                    <td>17th Oct, 17 <br> <small class="text-red">Overdue</small></td>
                    <td class="img-team">
                      <img class="img-circle img-responvie" src="https://bit.ly/2KkoqCO"/> 
                      <p>Norman Hammond <br>
                      <small>UK Design Team</small></p>
                    </td>
                    <td>$4,670 <br> <small>Paid</small></td>
                    <td><i class="fa fa-circle-o text-orange"></i>Early Stages</td> 
                    <td>
                      <div class="btn-group dropleft">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          Actions <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu"> 
                          <li><a href="#">Edit Profile</a></li>
                          <li><a href="#">View Activity</a></li>
                          <li><a href="#">Manage Roles</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>Landing Page <br> <small>Airbnb</small></td>
                    <td>2nd Jan, 18 <br> <small>in 3 months</small></td>
                    <td class="img-team">
                      <img class="img-circle img-responvie" src="https://bit.ly/2MH8Wue"/>
                      <p>Dylan Shelton <br>
                      <small>SF Dev Team</small></p>
                    </td>
                    <td>$5,740 <br> <small>Invoice Sent</small></td>
                    <td><i class="fa fa-circle-o text-blue"></i>QA</td>
                    <td>
                      <div class="btn-group dropleft">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          Actions <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu"> 
                          <li><a href="#">Edit Profile</a></li>
                          <li><a href="#">View Activity</a></li>
                          <li><a href="#">Manage Roles</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>Customer Care Interface <br> <small>Uber</small></td>
                    <td>1st Apr, 18
       <br> <small>in 5 months</small></td>
                    <td class="img-team">
                      <img class="img-circle img-responvie" src="https://bit.ly/2Km1kf6"/>
                      <p>Ina Higgins <br>
                      <small>UX Warriors</small></p>
                    </td>
                    <td>$4,000 <br> <small class="text-red">Delayed</small></td>
                    <td><i class="fa fa-circle-o text-green"></i>Finishing</td>
                    <td>
                      <div class="btn-group dropleft">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          Actions <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu"> 
                          <li><a href="#">Edit Profile</a></li>
                          <li><a href="#">View Activity</a></li>
                          <li><a href="#">Manage Roles</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                  <tr class="danger">
                    <td>New Dashboard <br> <small>Google</small></td>
                    <td>17th Oct, 17 <br> <small class="text-red">Overdue</small></td>
                    <td class="img-team">
                      <img class="img-circle img-responvie" src="https://bit.ly/2KkoqCO"/> 
                      <p>Norman Hammond <br>
                      <small>UK Design Team</small></p>
                    </td>
                    <td>$4,670 <br> <small>Paid</small></td>
                    <td><i class="fa fa-circle-o text-orange"></i>Early Stages</td> 
                    <td>
                      <div class="btn-group dropleft">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          Actions <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu"> 
                          <li><a href="#">Edit Profile</a></li>
                          <li><a href="#">View Activity</a></li>
                          <li><a href="#">Manage Roles</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>Landing Page <br> <small>Airbnb</small></td>
                    <td>2nd Jan, 18 <br> <small>in 3 months</small></td>
                    <td class="img-team">
                      <img class="img-circle img-responvie" src="https://bit.ly/2MH8Wue"/>
                      <p>Dylan Shelton <br>
                      <small>SF Dev Team</small></p>
                    </td>
                    <td>$5,740 <br> <small>Invoice Sent</small></td>
                    <td><i class="fa fa-circle-o text-blue"></i>QA</td>
                    <td>
                      <div class="btn-group dropleft">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          Actions <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu"> 
                          <li><a href="#">Edit Profile</a></li>
                          <li><a href="#">View Activity</a></li>
                          <li><a href="#">Manage Roles</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- User Profile -->
      <div id="user-profile" class="tab-pane fade in active">
        <div class="header">
            <h4>User Profile</h4>
            <ul class="pull-right">
              <li>
                <div class="btn-group dropleft dropdown-user">
                  <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-alert">
                  <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu"> 
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-check-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-calendar fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="alert-card">
                          <i class="fa fa-info-circle fa-2x"></i>
                          <p class="pull-right">
                            Someone mentioned you <br>
                            <small>You have recieved a mention on twitter, check it out!</small>
                          </p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group dropleft dropdown-avatar">
                  <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu"> 
                    <li><a href="#">Edit Profile</a></li>
                    <li><a href="#">View Activity</a></li>
                    <li><a href="#">Manage Roles</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        <div class="content">
          <div class="row">
            <div class="col-sm-7">
              <div class="card-7">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                  <li class="active"><a href="#activity" role="tab" data-toggle="tab">Activity</a></li>
                  <li><a href="#blockedusers" role="tab" data-toggle="tab">Blocked Users</a></li>
                  <li><a href="#nda" role="tab" data-toggle="tab">NDAs</a></li>
                  <li><a href="#customerinvoices" role="tab" data-toggle="tab">Customer Invoices</a></li>
                </ul> 
                <!-- Tab panes -->
                <div class="tab-content">
                  <div role="tabpanel" class="tab-pane active" id="activity">
                    <ul>
                      <small class="title">TODAY</small>
                      <li>
                        <h6>
                          Gerald Vaughn changed the status to QA on <b>MA-86 - Retargeting Ads</b><br>
                          <span>I’ve prepared all sizes for you. Can you take a look tonight so we can prepare my final invoice?</span>
                          <small>New Dashboard Design - 9:24PM</small>
                        </h6>
                      </li>
                      <li>
                        <h6>
                          Gerald Vaughn commented on <b>DA-459 - Mediation: Demand Source Logo Size</b><br>
                          <small>Portfolio Updates for Jason Carroll - 7:12PM</small>
                        </h6>
                      </li>
                      <li>
                        <h6>
                          Gerald Vaughn changed the status to QA on <b>MA-45 - Finish Prototype</b><br>
                          <small>New Dashboard Design - 11:30AM</small>
                        </h6>
                      </li>
                    </ul>
                    <ul>
                      <small class="title">YESTERDAY</small>
                      <li>
                        <h6>
                          Gerald Vaughn attached 5 files to <b>9054 - Find good stocks for our Instagram channel</b><br>
                          <span class="imgs">
                            <img src="https://bit.ly/2yYgK2x" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2N7po7n" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2OXtcKC" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2yYgK2x" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2N7po7n" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2OXtcKC" class="img-responsive img-rounded">
                          </span>
                          <small>Marketing Templates & Strategy - 7:59AM</small>
                        </h6>
                      </li>
                      <li>
                        <h6>
                          Gerald Vaughn commented on <b>Find good stocks for our Instagram channel</b><br>
                          <span>What do you think about these? Should I continue in this style?</span>
                          <small>Marketing Templates & Strategy - 7:58AM</small>
                        </h6>
                      </li>
                      <li>
                        <h6>
                          Gerald Vaughn changed the status to In Progress on <b>Find good stocks for our Instagram channel</b><br>
                          <small>Marketing Templates & Strategy - 6:30AM</small>
                        </h6>
                      </li>
                    </ul>
                    <ul>
                      <small class="title">28 JANUARY</small>
                      <li>
                        <h6>
                          Gerald Vaughn attached 6 files to <b>1007 - Background Inspiration</b><br>
                          <span class="imgs">
                            <img src="https://bit.ly/2yYgK2x" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2N7po7n" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2OXtcKC" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2yYgK2x" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2N7po7n" class="img-responsive img-rounded">
                            <img src="https://bit.ly/2OXtcKC" class="img-responsive img-rounded">
                          </span>
                          <small>Templates & Inspiration - 11:50AM</small>
                        </h6>
                      </li>
                    </ul>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="blockedusers">
                    <h4>Blocked users</h4>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quidem modi atque at aliquid expedita nemo incidunt exercitationem nihil sit. Laudantium suscipit id amet saepe ratione, accusamus. Voluptatum in, nam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptate nobis tenetur mollitia incidunt quod, est veniam, earum nemo! Alias rerum saepe aut sapiente minus sunt doloribus tempora corrupti in!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio nostrum molestias assumenda, repudiandae consequuntur quae pariatur aut incidunt placeat doloremque doloribus! Recusandae nostrum dolore repudiandae libero mollitia, rem eveniet.</p>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="nda">
                    <h4>NDA</h4>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quidem modi atque at aliquid expedita nemo incidunt exercitationem nihil sit. Laudantium suscipit id amet saepe ratione, accusamus. Voluptatum in, nam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptate nobis tenetur mollitia incidunt quod, est veniam, earum nemo! Alias rerum saepe aut sapiente minus sunt doloribus tempora corrupti in!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio nostrum molestias assumenda, repudiandae consequuntur quae pariatur aut incidunt placeat doloremque doloribus! Recusandae nostrum dolore repudiandae libero mollitia, rem eveniet.</p>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="customerinvoices">
                    <h4>Customer Invoices</h4>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quidem modi atque at aliquid expedita nemo incidunt exercitationem nihil sit. Laudantium suscipit id amet saepe ratione, accusamus. Voluptatum in, nam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptate nobis tenetur mollitia incidunt quod, est veniam, earum nemo! Alias rerum saepe aut sapiente minus sunt doloribus tempora corrupti in!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio nostrum molestias assumenda, repudiandae consequuntur quae pariatur aut incidunt placeat doloremque doloribus! Recusandae nostrum dolore repudiandae libero mollitia, rem eveniet.</p>
                  </div>
                </div>
              </div> 
            </div>
            <div class="col-sm-5">
              <div class="card-5">
                <div class="profile">
                  <img src="https://bit.ly/2MoguT5" class="img-circle">
                  <h4>Sree
                    <small>UI/UX Designer</small>
                    <small>Hyderabad, India</small>
                  </h4>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block">Edit</button>
                  </div>
                  <div class="col-sm-6">
                    <button class="btn btn-default btn-block">Edit</button>
                  </div>
                </div><br>
                <hr>
                <div class="row dtls">
                  <div class="col-sm-3 text-center">
                    <h5>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i><br>
                      <small>RATING</small>
                    </h5>
                  </div>
                  <div class="col-sm-3 text-center">
                    <h5>
                      38<br>
                      <small>REVIEW</small>
                    </h5>
                  </div>
                  <div class="col-sm-3 text-center">
                    <h5>
                      54<br>
                      <small>CLIENTS</small>
                    </h5>
                  </div>
                  <div class="col-sm-3 text-center">
                    <h5>
                      186<br>
                      <small>FINISHED GIGS</small>
                    </h5>
                  </div>
                </div>
                <hr>
                <div class="fb">
                  <span class="pull-left"><i class="fa fa-pencil fa-lg text-primary"></i></span>
                  <h5>Product Designer <br><small>Facebook - Hyderabad, India</small></h5>
                </div>
                <div class="drop">
                  <span class="pull-left"><i class="fa fa-dropbox fa-lg text-primary"></i></span>
                  <h5>Intern <br><small>Dropbox - Hyderabad, India</small></h5>
                </div>
                <hr>
                <div class="link text-center">
                  <a href="https://codepen.io/srees-evd" target="_blank"><i class="fa fa-globe"></i> https://codepen.io/srees-evd</a>
                </div>
              </div>
              <div class="card-5 billing">
                <h4>Billing</h4>
                <div class="row billing-row">
                  <div class="col-sm-6"><i class="fa fa-credit-card"></i> Ending **** 5896</div>
                  <div class="col-sm-3 text-right">05 / 19	</div>
                  <div class="col-sm-3 text-right text-gray">VISA</div>
                </div>
                <hr>
                <div class="table-responsive">
                  <table class="table">
                    <tbody>
                      <tr>
                        <td>PRO Package</td>
                        <td>Standard Payment</td>
                        <td>19 Jan 2018</td>
                      </tr>
                      <tr>
                        <td>Job Posted</td>
                        <td>30-Days Recuring</td>
                        <td>24 Nov 2017</td>
                      </tr>
                      <tr>
                        <td>PRO Package	</td>
                        <td>Gift</td>
                        <td>7 Mar 2017</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Candidates -->
      <div id="candidates" class="tab-pane fade">
        <div class="header">
          <h4>Candidates</h4>
          <ul class="pull-right">
            <li>
              <div class="btn-group dropleft dropdown-user">
                <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-alert">
                <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-check-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-calendar fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-info-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-avatar">
                <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu"> 
                  <li><a href="#">Edit Profile</a></li>
                  <li><a href="#">View Activity</a></li>
                  <li><a href="#">Manage Roles</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="content">
          <div class="row">
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/2Z2Rhol" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2OWjYOV" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/2TCl1lG" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2Z9sZUH" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/2Z6stLb" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2Z4W1cd" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/30evAhw" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2KP3DX7" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/2KQ3se3" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2ZjhWMZ" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 candid-card">
              <div class="card-4">
                <img src="https://bit.ly/33JBVUr" class="img-responsive main-img"/>
                <div class="row">
                  <div class="col-sm-10">
                    <img src="https://bit.ly/2YSiUjI" class="img-responsive img-circle img-thumbnail pull-left">
                    <h5>Mathilda Campbell <br><small><i class="fa fa-map-marker"></i> India</small></h5>
                  </div>
                  <div class="col-sm-2 text-right">
                    <a href="#"><i class="fa fa-trash-o fa-lg"></i></a>
                    <a href="#"><i class="fa fa-cog fa-lg"></i></a>
                  </div>
                </div>
                <hr>
                <div class="row text-center py-15">
                  <div class="col-sm-6">
                    <button class="btn btn-primary btn-block"><i class="fa fa-envelope"></i> New Message</button>
                  </div>
                  <div class="col-sm-6 text-green">
                    <small class="mt-5"><i class="fa fa-check"></i> Available for Hire</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Invoices -->
      <div id="invoices" class="tab-pane fade">
        <div class="header">
          <h4>Invoices</h4>
          <ul class="pull-right">
            <li><button class="btn btn-success"><small>New Invoice</small></button></li>
            <li>
              <div class="btn-group dropleft dropdown-user">
                <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-alert">
                <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-check-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-calendar fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-info-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-avatar">
                <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu"> 
                  <li><a href="#">Edit Profile</a></li>
                  <li><a href="#">View Activity</a></li>
                  <li><a href="#">Manage Roles</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="content">
          <div class="row invoice">
            <div class="col-sm-8">
              <div class="summary-card">
                <h5>Monthly Summary <br><small>February 2017 (12 Days Remaining)</small></h5>
                <div class="dropdown pull-right">
                  <i class="fa fa-ellipsis-h" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu">
                    <li><a href="#">Link 1</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Link 2</a></li>
                  </ul>
                </div>
                <div class="row">
                  <div class="col-sm-4">
                    <h3>
                      <small>INVOICED</small><br><br>
                      $2,190 <small class="bg-cir"><i class="fa fa-caret-up"></i></small><br>
                      <small>LAST MONTH: $2,890</small>
                    </h3>
                  </div>
                  <div class="col-sm-4">
                    <h3>
                      <small>PROFIT</small><br><br>
                      $2,190 <small class="bg-cir"><i class="fa fa-caret-down"></i></small><br>
                      <small>LAST MONTH: $2,890</small>
                    </h3>
                  </div>
                  <div class="col-sm-4">
                    <h3>
                      <small>EXPENSES</small><br><br>
                      $2,190 <small class="bg-cir"><i class="fa fa-caret-up"></i></small><br>
                      <small>LAST MONTH: $2,890</small>
                    </h3>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="summary-card">
                <h5>Percentual Profit <br><small>Quarterly (3 Months) </small></h5>
                <div class="dropdown pull-right">
                  <i class="fa fa-ellipsis-h" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu">
                    <li><a href="#">Link 1</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Link 2</a></li>
                  </ul>
                </div>
                <img src="https://bit.ly/2KHf3xn" class="img-responsive cust-img"> 
              </div>
            </div>
          </div>
          <div class="row table-invoice">
            <div class="col-sm-12">
              <div class="table-in-card">
                <h3>Invoices</h3>
                <hr>
                <table class="table">
                  <thead>
                    <tr>
                      <th>No.</th>
                      <th>Invoice Subject</th>
                      <th>Client</th>
                      <th>VAT No.</th>
                      <th>Created</th>
                      <th>Status</th>
                      <th>Price</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>00450</td>
                      <td>Design Works</td>
                      <td>Carlson Limited</td>
                      <td>87956621</td>
                      <td>15 Aug 2019</td>
                      <td>
                        <button class="btn btn-success btn-xs"><small>PAID</small></button>
                      </td>
                      <td>$887</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00450</td>
                      <td>UX Wireframes</td>
                      <td>Adobe</td>
                      <td>87956621</td>
                      <td>12 Aug 2019</td>
                      <td>
                        <button class="btn btn-warning btn-xs"><small>PENDING</small></button>
                      </td>
                      <td>$1200</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00452</td>
                      <td>New Dashboard</td>
                      <td>Bluewolf</td>
                      <td>87956621</td>
                      <td>15 Aug 2019</td>
                      <td>
                        <button class="btn btn-warning btn-xs"><small>PENDING</small></button>
                      </td>
                      <td>$534</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00453</td>
                      <td>Landing Page</td>
                      <td>Salesforce</td>
                      <td>87956621</td>
                      <td>12 Aug 2019</td>
                      <td>
                        <button class="btn btn-grayblue btn-xs"><small class="large">DUE IN 2 WEEKS</small></button>
                      </td>
                      <td>$1500</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00454</td>
                      <td>Marketing Templates	</td>
                      <td>Printic</td>
                      <td>87956621</td>
                      <td>15 Aug 2019</td>
                      <td>
                        <button class="btn btn-danger btn-xs"><small>PAID TODAY</small></button>
                      </td>
                      <td>$887</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00450</td>
                      <td>UX Wireframes</td>
                      <td>Adobe</td>
                      <td>87956621</td>
                      <td>12 Aug 2019</td>
                      <td>
                        <button class="btn btn-warning btn-xs"><small>PENDING</small></button>
                      </td>
                      <td>$1200</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00450</td>
                      <td>Design Works</td>
                      <td>Carlson Limited</td>
                      <td>87956621</td>
                      <td>15 Aug 2019</td>
                      <td>
                        <button class="btn btn-success btn-xs"><small>PAID</small></button>
                      </td>
                      <td>$887</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                    <tr>
                      <td>00450</td>
                      <td>UX Wireframes</td>
                      <td>Adobe</td>
                      <td>87956621</td>
                      <td>12 Aug 2019</td>
                      <td>
                        <button class="btn btn-warning btn-xs"><small>PENDING</small></button>
                      </td>
                      <td>$1200</td>
                      <td>
                        <button class="btn btn-primary"><small>MANAGE</small></button>
                      </td>
                      <td>
                        <div class="btn-group">
                          <button type="button" class="btn btn-default">Actions</button>
                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a href="#">Complete</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Share</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Archieve</a></li>
                          </ul>
                        </div>
                      </td>
                      <td><a href="#"><i class="fa fa-cloud-download fa-lg"></i></a></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Single Invoice -->
      <div id="single-invoice" class="tab-pane fade">
        <div class="header">
          <h4>Single Invoice</h4>
          <ul class="pull-right">
            <li><button class="btn btn-success"><small>New Invoice</small></button></li>
            <li>
              <div class="btn-group dropleft dropdown-user">
                <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-alert">
                <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-check-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-calendar fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-info-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-avatar">
                <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu"> 
                  <li><a href="#">Edit Profile</a></li>
                  <li><a href="#">View Activity</a></li>
                  <li><a href="#">Manage Roles</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="content">
          <div class="container">
            <div class="s-inv-card">
              <div class="row">
                <div class="s-inv-header">
                  <div class="col-sm-9">
                    <h3><i class="fa fa-ravelry fa-lg text-green"></i><br><br><b> MyDashboard Pvt Ltd</b></h3>
                  </div>
                  <div class="col-sm-3">
                    <h4><b> Invoice</b> <br> <small> 22 July 2019</small></h4>
                  </div>
                </div>
              </div> 
              <div class="row">
                <div class="s-inv-details">
                  <div class="col-sm-9">
                    <h4>
                      <small>From:</small><br>
                      <b>Dashboard Inc</b> <br><br>
                      <small>
                        39 MIJ Road,<br>
                        Jubilee Hills, Hyderabad <br>
                        India
                      </small>
                    </h4>
                  </div>
                  <div class="col-sm-3">
                    <h4>
                      <small>To:</small><br>
                      <b>Client Inc</b> <br><br>
                      <small>
                        248 Blooms Ave,<br>
                        PVLC, Shamshabad<br>
                        India
                      </small>
                    </h4>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="s-inv-body">
                  <div class="col-sm-3">
                    <h4><b> Invoice#</b> <br><small>ASLF 674323</small></h4>
                  </div>
                  <div class="col-sm-9">
                    <div class="table-responsive">
                      <table class="table">
                        <thead>
                          <tr>
                            <th>Description</th>
                            <th>Qty</th>
                            <th>Price</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>Website Design</td>
                            <td>2</td>
                            <td>$4,500</td>
                          </tr>
                          <tr>
                            <td>UI Development</td>
                            <td>3</td>
                            <td>$7,500</td>
                          </tr>
                          <tr>
                            <td>Landing Page</td>
                            <td>1</td>
                            <td>$2,320</td>
                          </tr>
                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Total</th>
                            <th></th>
                            <th>$15,490</th>
                          </tr>
                        </tfoot>
                      </table>
                      <small class="text-muted">All amounts shown on this invoice are in US dollars.</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="s-inv-footer">
                  <div class="col-sm-9"><i class="fa fa-ravelry fa-lg text-green"></i> MyDashboard UI</div>
                  <div class="col-sm-3">hello@mydashboard.in</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Browse -->
      <div id="browse" class="tab-pane fade">
        <div class="header">
          <h4>Browse</h4>
          <ul class="pull-right">
            <li>
              <div class="btn-group dropleft dropdown-user">
                <i class="fa fa-user-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2KkoqCO" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2MH8Wue" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-alert">
                <i class="fa fa-bell-o dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <ul class="dropdown-menu"> 
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-check-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-calendar fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="alert-card">
                        <i class="fa fa-info-circle fa-2x"></i>
                        <p class="pull-right">
                          Someone mentioned you <br>
                          <small>You have recieved a mention on twitter, check it out!</small>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="btn-group dropleft dropdown-avatar">
                <img src="https://bit.ly/2Km1kf6" class="img-circle img-responvie"/><i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu"> 
                  <li><a href="#">Edit Profile</a></li>
                  <li><a href="#">View Activity</a></li>
                  <li><a href="#">Manage Roles</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <h5 class="search">Search Results: <b>Nature Shots</b> <small>21 People match your criteria</small></h5> 
        <div class="content">
          <div class="container browse">
            <div class="row">
              <div class="col-sm-4">
<!--                 <div class="card">
                  <img src="https://bit.ly/2ZLHm1W" alt="" class="img-responsive img-circle img-thumbnail">
                  <h5>Caroline Higgins <br>
                    <small> Traveller<br>5 Projects | 41 Stocks</small>
                    <small>
                      <i class="fa fa-envelope"></i>
                      <i class="fa fa-ellipsis-h"></i>
                    </small>
                  </h5>
                </div> -->
              </div> 
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');

/* Color Variables */
$red: red;        $green: green;        $orange: orange;       $blue: blue;      $purple: purple;
$white: white;    $black: black;        $bg: /* #eff3f6 */ #e3e5e6;
$darkgray-blue: #354052;        $lightgray-blue: #7f8fa4;

/* Styles */
body {
  background: $bg;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

.text-red {color: $red !important;}
.text-green {color: $green !important;}
.text-orange {color: $orange !important;}
.text-blue {color: $blue !important;}

/* buttons */
.btn-red {
  background: $red;
  color: $white;
  font-size: xx-small;
  &:hover, &:focus {
    background: darken($red, 8%);
    color: white;
  }
}
.btn-grayblue {
  background: lighten($lightgray-blue, 15%);
  color: $white;
  font-size: xx-small;
  &:hover, &:focus {
    background: lighten($lightgray-blue, 8%);
    color: white;
  }
}

/* Custom scrollbar */
.main {
  // width
  ::-webkit-scrollbar {width: 5px;}
  // Track
  ::-webkit-scrollbar-track {
    // box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  // Handle
  ::-webkit-scrollbar-thumb {
    background: lighten($darkgray-blue, 20%); border-radius: 10px;
  }
  // Handle on hover
  ::-webkit-scrollbar-thumb:hover {
    background: lighten($darkgray-blue, 10%);
  }
}
/* Left Menu */
.left {
  width: 57px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  // background: lighten($black, 35%);
  background: $darkgray-blue;
  position: fixed;
  transition: all .5s;
  &:hover {
    width: 200px;
    ul li.menu-heading {opacity: 1;}
  }
  ul {
    padding-left: 0;
    li {
      list-style-type: none;
      &.active a {
        background: lighten($green, 10%);
        color: $white;
        &:hover {
          background: lighten($green, 5%);
        }
      }
      a {
        display: flex;
        align-items: center;
        // background: lighten($black, 35%);
        background: $darkgray-blue;
        color: $white;
        padding: 15px 10px;
        font-size: 13px;
        width: 200px;
        border-bottom: 1px solid darken($darkgray-blue, 5%);
        &:hover {
          // background: $black;
          background: darken($darkgray-blue, 5%);
          text-decoration: none;
          i.fa {
            color: lighten($green, 10%);
          }
        }
        &:focus {text-decoration: none;}
        i.fa {
          width: 50px;
          text-align: center;
          padding-right: 15px;
          transition: all 1s;
        }
      }
    }
    .menu-heading {
      opacity: 0;
      padding: 10px 5px 10px 10px;
      color: darken(yellow, 15%);
      font-size: smaller;
      border-bottom: 1px solid darken($darkgray-blue, 5%);
      transition: all .5s;
    }
  }
}
/* Right Content */
.right {
  transition: all .5s;
  margin-left: 72px;
  /* Overview */
  #overview{
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      padding: 0 30px 15px 15px;
      .row.graph-cards {
        margin-top: 20px;
        .col-sm-4 {
          // &:first-child div{margin-left: -15px;}
          // &:last-child div{margin-right: -15px;}
          div {
            background: $white;
            padding: 15px;
            h4, h2 {
              color: $darkgray-blue;
              small {
                color: $lightgray-blue;
                font-size: small;
              }
            }
            h2 {
              line-height: 85%;
            }
            img {
              width: 100%;
              height: 150px;
              object-fit: contain;
            }
          }
          &:last-child {
            img {height: 220px;}
          }
        }
      }
      .row.project-cards {
        margin-top: 20px;
        .col-sm-3 {
          .card {
            background: $white;
            padding: 0;
            img {width: 100%;}
            h5 {
              padding: 15px 30px;
              border-bottom: 1px solid lighten($black, 90%);
            }
            .row {
              padding: 0 15px;
              margin-left: 0;
              margin-right: 0;
              .col-sm-6 {
                // margin: 0;
                padding: 15px;
              }
            }
          }
        }
      }
      .row.invoice-task {
        margin-top: 20px;
        .col-sm-6 {
          .invoice, .tasks {
            background: $white;
            h5 {
              color: $black;
              padding: 15px;
              small {
                a {
                  color: $lightgray-blue;
                  font-size: xs-small;
                  margin-top: 5px;
                  display: block;
                }
              }
            }
            .table {
              tbody {
                tr {
                  td {
                    font-size: small;
                    border-top-color: lighten($black, 90%);
                    padding: 15px;
                  }
                }
              }
            }
          }
          .invoice {
            .table {
              tbody {
                tr {
                  td {
                    &:nth-child(1), &:nth-child(3) {
                      color: $lightgray-blue
                    }
                    &:nth-child(4) {
                      .btn {font-size: xx-small;}
                    }
                    &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(5) {
                      padding-top: 20px;
                    }
                    .checkbox {
                      margin: 5px 0 0;
                    }
                  }
                }
              }
            }
          }
          .tasks {
            .table {
              tbody {
                tr {
                  td {
                    .checkbox {
                      margin: 5px 0 0 0;
                      &:hover {
                        label {
                          text-decoration: line-through;
                          color: lighten($black, 60%);
                          input {
                            opacity: .5;
                          }
                        }
                      }
                      label {
                        input {
                          margin-top: 2px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /* Performance */
  #performance {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .flex {
        display: flex;
        justify-content: center;
        align-items: center;
        background: $white;
        margin-left: -30px;
        margin-right: -30px;
        .col-sm-2 {
          .info-card {
            padding: 20px;
            h3 {
              margin-top: 10px;
              small {font-size: small;}
            }
          }
        }
      }
      .world {
        padding-top: 15px;
        .col-sm-6 {
          &:first-child {padding-left: 0;}
          &:last-child {padding-right: 0;}
          .world-card, .product-card {
            background: $white;
            h4 {padding: 15px;}
            img {
              width: 100%;
              height: 280px;
              object-fit: contain;
            }
          }
          .product-card {
            h4 {margin-bottom: 0;}
            .custom-progress {
              padding: 9px 15px 15px;
              h6 {
                i.fa {
                  padding-right: 10px;
                }
                small {font-size: small;}
              }
              .progress {
                height: 15px;
                border-radius: 10px;
                margin-bottom: 0;
                background: lighten($lightgray-blue, 35%);
                .progress-bar {
                  border-radius: 10px;
                }
              }
            }
          }
        }
      }
      .stats {
        margin-top: 15px;
        .col-sm-4 {
          &:first-child {padding-left: 0;}
          &:last-child {padding-right: 0;}
          .stats-card {
            background: $white;
            // padding: 15px;
            h4 {
              padding: 15px;
              small {
                &:first-child {font-size: xx-large; color: $black;}
                &:nth-child(3) {}
              }
            }
            img {
              width: 100%;
              height: 150px;
              object-fit: contain;
            }
            .row {
              padding: 0 15px;
              .col-sm-6 {
                h6 {
                  display: inline-block;
                  font-size: 80%;
                  color: $lightgray-blue;
                  small {
                    font-size: small;
                    color: $black;
                    padding-left: 10px;
                  }
                }
              }
            }
            .row {
              .col-sm-10 {
                h6 {
                  font-size: x-small;
                }
                .progress {
                  height: 10px;
                  background: lighten($lightgray-blue, 35%);
                  border-radius: 10px;
                  .progress-bar {border-radius: 10px;}
                }
              }
              .col-sm-2 {
                h4 {
                  margin-top: 10px;
                  font-weight: bold;
                }
              }
            }
          }
          .customers {
            .row {
              padding: 0 30px;
              .col-sm-4 {
                h6 {font-size: smaller;}
              }
            }
            .p-bars {
              padding-bottom: 50px;
              .col-sm-4 {
                h6 {
                  font-size: large;
                  font-weight: bold;
                  small {font-size: small}
                }
                .progress {
                  height: 10px;
                  border-radius: 10px;
                  background: lighten($black, 90%);
                  .progress-bar {border-radius: 10px;}
                }
              }
            }
          }
          .profit {
            padding-bottom: 30px;
            .table {
              tbody {
                tr {
                  td {
                    font-size: smaller;
                    border-top-color: lighten($black, 90%);
                    padding: 15px;
                    i.fa {padding-right: 10px;}
                  }
                  &:first-child {
                    td {border-top: none;}
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /* Analytics */
  #analytics {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .revenue, .active-clients {
        background: $white;
        padding: 15px;
        margin-top: 20px;
        h4 {margin-bottom: 20px;}
        img {
          width: 100%;
          height: 418px;
          object-fit: contain;
        }
      }
      .active-clients, .tasks {
        background: $white;
        h6 {
          font-weight: bold;
          line-height: 150%;
          small {font-size: small;}
        }
        .table {
          margin-bottom: 0;
          tbody {
            tr {
              td {
                border-top: 0;
                font-size: small;
                .progress {
                  height: 5px;
                  border-radius: 10px;
                  background: lighten($black, 90%);
                  margin-top: 10px;
                  margin-bottom: 10px;
                  .progress-bar {border-radius: 10px;}
                }
              }
            }
          }
        }
      }
      .tasks {
        margin-top: 15px;
        padding: 15px;
      }
      .total-stats {
        margin-top: 20px;
        .col-sm-3 {
          &:nth-child(3) .stats-card h3 small i.fa {padding: 2px 4px 0;}
          .stats-card {
            background: $white;
            padding: 15px;
            span {
              display: inline-block;
              border-radius: 50%;
              vertical-align: bottom;
              i.fa {
                border: 1px solid $white;
                padding: 20px 17px;
                border-radius: 50%;
                color: $white;
              }
            }
            .orange-chart {
              background: lighten($orange, 1%);
              border: 5px solid lighten($orange, 1%);
            }
            .purple-chart {
              background: lighten($purple, 10%);
              border: 5px solid lighten($purple, 10%);
            }
            .red-chart {
              background: lighten($red, 10%);
              border: 5px solid lighten($red, 10%);
            }
            .green-chart {
              background: lighten($green, 10%);
              border: 5px solid lighten($green, 10%);
            }
            h3 {
              display: inline-block;
              font-weight: bold;
              padding-left: 20px;
              // vertical-align: middle;
              small {
                font-size: small;
                i.fa {
                  background: lighten($darkgray-blue, 50%);
                  color: $white;
                  vertical-align: super;
                  border-radius: 50%;
                  padding: 0 4px 2px;
                }
              }
            }
          }
        }
      }
      .income-customers {
        margin-top: 20px;
        background: $white;
        .table-responsive {
          h4 {
            padding: 15px;
            small {font-size: small;}
          }
          table {
            margin-bottom: 0;
            tbody {
              tr {
                td {
                  vertical-align: middle;
                  font-size: smaller;
                  padding: 15px;
                  img {
                    width: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /* Landing */
  #landing {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      h3.text-center {padding: 2em;}
      .card-4 {
        background: $white;
        padding: 50px;
        p {
          padding: 2em;
          margin-bottom: 0;
          font-weight: bold;
        }
      }
      .col-sm-6:nth-child(2) .card-6 { padding: 0;}
      .card-6 {
        background: $white;
        padding: 15px;
        .row {
          .col-sm-4 {
            h4 {font-weight: bold;
              small {font-size: small; margin: 10px 0;}
            }
            img {width: 100%; height: 150px; object-fit: cover;}
          }
        }
        .row {
          .col-sm-3 {
            h5 {font-weight: bold;
              small {font-size: small; margin: 10px 0;}
            }
            .progress {
              height: 5px;
            }
          }
        }
        .table-responsive {
          overflow-x: unset;
          .table {
            margin-bottom: 0;
            tr {
              &:first-child td {border-top: 0;}
              td {
                vertical-align: middle;
                padding: 15px;
                img {height: 45px;}
              }
            }
          }
        }
      }
    }
  }
  /* Projects */
  #projects {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 20px 30px 15px 15px;
      .row {
        padding-left: 15px;
        padding-right: 15px;
        .col-sm-3 {
          &:first-child {
            padding-left: 0;
            .card-3 {background: lighten($darkgray-blue, 12%);}
          }
          &:nth-child(2) .card-3 {background: lighten($green, 12%);}
          &:nth-child(3) .card-3 {background: darken($orange, 5%);}
          &:last-child {
            padding-right: 0;
            .card-3 {background: lighten($red, 10%);}
          }
          .card-3 {
            background: $white;
            padding: 15px;
            color: $white;
            border-radius: 5px;
            h3 {
              margin-top: 0;
              margin-bottom: 25px;
              font-weight: bold;
              small {
                font-size: small;
                line-height: 3em;
                color: rgba($white, .8);
              }
              span i.fa{color: rgba($white, .3);}
            }
          }
        }
      }
      .row {
        margin-top: 20px;
        .responsive-table {
        background: $white;
        border: 1px solid lighten($black, 90%);
        h3 {
          color: $darkgray-blue;
          padding: 30px 15px;
          border-bottom: 1px solid lighten($black, 90%);
          margin: 0;
          small {
            font-size: small;
            color: $lightgray-blue;
          }
          i.fa {
            color: $lightgray-blue;
            cursor: pointer;
            &:hover {color: lighten($green, 10%);}
          }
        }
        table {
          font-size: small;
          color: $darkgray-blue;
          margin-bottom: 0;
          thead {
            tr th {
              color: $lightgray-blue;
              font-weight: normal;
              border-bottom-color: lighten($black, 90%);
              padding: 15px;
            }
          }
          tbody {
            tr {
              td {
                border-top-color: lighten($black, 90%);
                padding: 15px;
                small {
                  color: $lightgray-blue;
                  font-size: xx-small;
                }
                i.fa {
                  padding-right: 10px;
                }
                .btn-group {
                  .btn {
                    color: $darkgray-blue;
                    font-size: small;
                  }
                  .dropdown-toggle {
                    i.fa {padding-right: 0;}
                  }
                  .dropdown-menu {
                    padding: 0;
                    right: 0;
                    left: inherit;
                    box-shadow: none;
                    border-color: lighten($black, 85%);
                    li {
                      a {
                        color: $darkgray-blue;
                        font-size: small;
                        border-bottom: 1px solid lighten($black, 90%);
                        padding: 10px 20px;
                      }
                    }
                  }
                }
              }
              .img-team {
                display: flex;
                align-items: center;
                img {height: 40px}
                p {padding-left: 10px; margin-bottom: 0;}
              }
            }
            tr.danger {
              border-left: 2px solid red;
              td {background: $white;}
            }
          }
        }
      }
      }
    }
  }
  /* User Profile */
  #user-profile {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .row {
        padding-top: 20px;
        .card-7, .card-5 {
          background: $white;
        }
        .card-7 {
          .nav-tabs {
            border-bottom: 0;
            border: 1px solid #ddd;
            li {
              border-bottom: 2px solid transparent;
              margin-bottom: -2px;
              a {
                color: lighten($darkgray-blue, 10%);
                padding-top: 20px;
                padding-bottom: 20px;
              }
              &:hover a {
                color: $black;
                border-bottom:0;
                background: transparent;
              }
            }
            li.active {
              font-weight: bold;
              border-bottom: 2px solid lighten($green, 10%);
              a {
                border: 0;
                color: $black;
              }
            }
          }
          .tab-content {
            .tab-pane {
              padding: 20px 15px;
              border: 1px solid #ddd;
              border-top: 0;
              ul {
                padding-left: 25px;
                padding-right: 50px;
                margin-bottom: 40px;
                small.title {
                  margin-left: -25px;
                  color: lighten($black, 60%);
                  font-weight: bold;
                }
                li {
                  list-style-type: none;
                  position: relative;
                  color: $black;
                  margin-bottom: 20px;
                  &:before {
                    content: '';
                    position: absolute;
                    top: 8px;
                    left: -25px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: $lightgray-blue;
                  }
                  &:nth-child(2):before {background: $orange;}
                  &:nth-child(3):before {background: $green;}
                  &:nth-child(4):before {background: $red;}
                  h6 {
                    line-height: 30px;
                    span {
                      display: block;
                      padding: 5px 15px;
                      border: 1px solid #ddd;
                      border-radius: 5px;
                      // margin: 10px 0;
                    }
                    span.imgs {
                       border:none;
                       img {
                         height: 60px;
                         display: inline-block;
                         margin-right: 5px;
                      }
                    }
                    small {
                      font-size: inherit;
                    }
                  }
                }
              }
            }
          }
        }
        .card-5 {
          padding: 15px;
          margin-bottom: 20px;
          .profile {
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img {height: 100px;}
            h4 {
              font-weight: bold;
              line-height: 40px;
              small {
                font-size: small;
                display: block;
                line-height: 20px;
                &:nth-child(1) {color: $black;}
                &:nth-child(2) {color: $lightgray-blue;}
              }
            }
          }
          .dtls {
            .col-sm-3 {
              h5 {
                font-weight: bold;
                color: $black;
                small {
                  color: lighten($black, 60%);
                  line-height: 30px;
                }
              }
            }
          }
          .fb, .drop, .link {
            margin: 30px 0;
            span {
              width: 35px;
              height: 35px;
              border-radius: 50%;
              text-align: center;
              padding-top: 9px;
              margin-right: 20px;
              i.fa {color: $white;}
            }
            h5 {color: $black; font-weight: bold;}
          }
          .fb span {background: $green; padding-top: 7px;}
          .drop span {background: $purple;}
          .link a {
            font-size: small; color: lighten($lightgray-blue, 10%);
          }
        }
        .billing {
          .billing-row {
            font-size: small;
            margin-bottom: 20px;
            .col-sm-6 i.fa {padding-right: 10px; color: $purple}
            .col-sm-3.text-gray {color: lighten($black, 60%);}
          }
        }
        .table {
          tbody tr td {
            padding: 10px 5px;
            border-top: 0;
            font-size: small;
            color: lighten($black, 55%);
            &:first-child {color: $black; width: 40%;}
            &:last-child {text-align: right;}
          }
        }
      }
    }
  }
  /* Candidates */
  #candidates {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .row {
        margin-top: 20px;
        .candid-card {
          .card-4 {
            background: $white;
            padding: 15px;
            .main-img {width: 100%;}
            .row {
              margin-top: 10px;
              .col-sm-10 {
                img {margin-top: -40px; margin-right: 15px;}
                h5 {
                  font-weight: bold;
                  small {font-size: small; line-height: 30px;}
                }
              }
              .col-sm-2 {
                margin-top: 10px;
                a {
                  color: lighten($black, 75%);}
              }
            }
          }
        }
      }
    }
  }
  /* Invoices */
  #invoices {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .row.invoice {
        margin-top: 20px;
        .summary-card {
          background: $white;
          padding: 15px;
          h5 {
            display: inline-block;
            font-weight: bold;
            small {color: $lightgray-blue}
          }
          .dropdown {
            i.fa {margin-top: 15px; color: $lightgray-blue; cursor: pointer;}
          }
          .row {
            .col-sm-4 {
              &:nth-child(2) {
                .bg-cir {background: $red; padding: 2px 3px 1px 4px;}
              }
              h3 {
                position: relative;
                small {font-size: x-small; font-weight: bold;}
                .bg-cir {
                  position: absolute;
                  bottom: 35px;
                  font-size: x-small;
                  background: $green;
                  color: $white;
                  padding: 0 3px 3px 4px;
                  border-radius: 10px;
                }
                span {}
              }
            }
          }
          .cust-img {height: 135px; width: 100%; object-fit: contain;}
        }
      }
      .table-invoice {
        .table-in-card {
          background: $white;
          h3 {
            color: $black;
            font-weight: bold;
            padding: 15px;
          }
          .table {
            thead tr th, tbody tr td {
              vertical-align: middle;
              font-size: smaller;
              //font-weight: bold;
            }
            thead tr th {color: lighten($black, 60%); border-bottom: 0;}
            tbody tr td {
              padding: 20px 10px;
              &:last-child a {color: lighten($black, 60%);}
            }
          }
        }
      }
    }
  }
  /* Single Invoice */
  #single-invoice {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    .content {
      margin: 0 30px 15px 15px;
      .s-inv-card {
        background: $white;
        margin-top: 20px;
        padding: 10rem 10rem 3rem;
        box-shadow: 0 0 10px lighten($lightgray-blue, 25%);
        .row {
          margin-bottom: 8rem;
          &:last-child {margin-bottom: 2rem;}
          small {line-height: 25px;}
          .s-inv-header {
            .col-sm-3 h4 {margin-top: 4rem;}
          }
          .s-inv-body {
            .col-sm-3 h4 small {line-height: 50px;}
            .col-sm-9 {
              table {
                border: 1px solid lighten($black, 90%);
                margin-bottom: 5px;
                tr {
                  td, th {
                    font-size: small;
                    padding: 15px;
                    border-bottom: 1px;
                    border-top: 1px solid lighten($black, 90%);
                  }
                }
                thead tr th {color: $lightgray-blue;}
              }
            }
          }
        }
      }
    }
  }
  /* Browse */
  #browse {
    .header {
      background: $white;
      display: block;
      border: 1px solid lighten($black, 90%);
      padding: 15px 30px;
      margin-left: -15px;
      h4 {
        display: inline-block;
        color: $darkgray-blue;
      }
      ul {
        right: 0;
        left: inherit;
        max-width: 350px;
        li {
          display: inline-block;
          padding-left: 20px;
          .btn-group {
            i.fa-user-o, i.fa-bell-o {
              color: lighten($black, 70%);
              font-size: 24px;
              cursor: pointer;
              &:nth-child(1):after {
                content: '3';
                background: $orange;
                color: $white;
                font-size: small;
                padding: 4px 7px;
                border-radius: 50%;
                position: absolute;
                top: -8px;
                left: 10px;
              }
            }
            i.fa-angle-down {
              cursor: pointer;
            }
            .dropdown-menu {
              padding: 0;
              li {
                padding-left: 0;
                display: block;
                border-bottom: 1px solid lighten($black, 90%);
                &:nth-child(1) .alert-card i.fa {
                  color: lighten($green, 10%);
                }
                &:nth-child(2) .alert-card i.fa {
                  color: lighten($purple, 10%);
                }
                &:nth-child(3) .alert-card i.fa {
                  color: $darkgray-blue;
                }
                &:last-child {
                  border-bottom: none;
                }
                a {
                  padding-top: 10px;
                  padding-bottom: 10px;
                  &:hover {
                    background: lighten($darkgray-blue, 65%);
                  }
                  .alert-card {
                    display: flex;
                    img, i.fa {
                      height: 40px;
                      margin-right: 15px;
                    }
                    p {
                      color: $darkgray-blue;
                      margin-bottom: 0;
                      small {
                        color: $lightgray-blue;
                        width: 100%;
                        white-space: pre-line;
                      }
                    }
                  }
                }
              }
            }
          }
          .dropdown-avatar {
            img {height: 35px;}
            i.fa {padding-left: 8px;}
          }
        }
      }
    }
    h5.search {
      background: white;
      padding: 30px;
      margin-left: -15px;
      margin-top: 0;
    }
    .content {
      margin: 0 30px 15px 15px;
      .browse {
        .card {
          background: $white;
          padding: 15px;
          img {width: 60px;}
          h5 {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.left:hover+.right {
  margin-left: 215px;
}
.strike {
  // text-decoration: line-through;
  color: lighten($black, 60%);
}
hr {
  border-top: 1px solid lighten($black, 90%);
  margin: 10px 0;
}
.py-15 {padding: 15px 0;}
              
            
!

JS

              
                /* $(document).ready(function(){
  $("#check").click(function(){
    $("label").toggleClass("strike");
  });
}); */
              
            
!
999px

Console