File: /www/wwwroot//www.luckcjtw.com/aa/fullsite/elements.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elements</title>
<!-- Mobile specific metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Force IE9 to render in normal mode -->
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
<meta name="author" content="SuggeElson" />
<meta name="description" content=""
/>
<meta name="keywords" content=""
/>
<meta name="application-name" content="sprFlat admin template" />
<!-- Import google fonts - Heading first/ text second -->
<link rel='stylesheet' type='text/css'
<!--[if lt IE 9]>
<![endif]-->
<!-- Css files -->
<!-- Icons -->
<link href="assets/css/icons.css" rel="stylesheet" />
<!-- jQueryUI -->
<link href="assets/css/sprflat-theme/jquery.ui.all.css" rel="stylesheet" />
<!-- Bootstrap stylesheets (included template modifications) -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Plugins stylesheets (all plugin custom css) -->
<link href="assets/css/plugins.css" rel="stylesheet" />
<!-- Main stylesheets (template main css file) -->
<link href="assets/css/main.css" rel="stylesheet" />
<!-- Custom stylesheets ( Put your own changes here ) -->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/img/ico/apple-touch-icon-57-precomposed.png">
<link rel="icon" href="assets/img/ico/favicon.ico" type="image/png">
<!-- Windows8 touch icon ( http://www.buildmypinnedsite.com/ )-->
<meta name="msapplication-TileColor" content="#3399cc" />
</head>
<body>
<!-- Start #header -->
<div id="header">
<div class="container-fluid">
<div class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<i class="im-windows8 text-logo-element animated bounceIn"></i><span class="text-logo">spr</span><span class="text-slogan">flat</span>
</a>
</div>
<nav class="top-nav" role="navigation">
<ul class="nav navbar-nav pull-left">
<li id="toggle-sidebar-li">
<a href="#" id="toggle-sidebar"><i class="en-arrow-left2"></i>
</a>
</li>
<li>
<a href="#" class="full-screen"><i class="fa-fullscreen"></i></a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="ec-cog"></i><span class="notification">10</span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="en-database"></i> Database <span class="notification">3</span></a>
</li>
<li><a href="#"><i class="st-cube"></i> Packages <span class="notification blue">17</span></a>
</li>
<li><a href="#"><i class="st-health"></i> Disconnects <span class="notification yellow">1</span></a>
</li>
<li><a href="#"><i class="im-images"></i> Images <span class="notification teal">320</span></a>
</li>
<li><a href="#"><i class="st-users"></i> Users <span class="notification orange">2k</span></a>
</li>
<li><a href="#"><i class="st-meter"></i> Traffic <span class="notification magenta">2tb</span></a>
</li>
<li><a href="#"><i class="im-coin"></i> Finances <span class="notification pink">+3k</span></a>
</li>
<li><a href="#"><i class="st-folder"></i> Directories <span class="notification green">17</span></a>
</li>
<li><a href="#"><i class="st-bag"></i> Orders <span class="notification purple">12</span></a>
</li>
<li><a href="#"><i class="ec-contract"></i> Contracts <span class="notification dark">7</span></a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="ec-mail"></i><span class="notification">4</span></a>
<ul class="dropdown-menu email" role="menu">
<li class="mail-head">
<div class="clearfix">
<div class="pull-left">
<a href="email-inbox.html"><i class="ec-archive"></i></a>
</div>
<span>Inbox</span>
<div class="pull-right">
<a href="email-inbox.html"><i class="st-pencil"></i></a>
</div>
</div>
</li>
<li class="search-email">
<form>
<input type="text" name="search" placeholder="Search for emails">
<button type="submit"><i class="ec-search"></i>
</button>
</form>
</li>
<li class="mail-list clearfix">
<a href="#">
<img src="assets/img/avatars/128.jpg" class="mail-avatar pull-left" alt="avatar">
<p class="name">
<span class="status"><i class="en-dot"></i></span> Jason Rivera
<span class="notification">2</span>
<span class="time">12:30 am</span>
</p>
<p class="msg">
I contact you regarding my account please can you set up my pass ...
</p>
</a>
</li>
<li class="mail-list clearfix">
<a href="#">
<img src="assets/img/avatars/129.jpg" class="mail-avatar pull-left" alt="avatar">
<p class="name">
<span class="status off"><i class="en-dot"></i></span> Steeve Mclark
<span class="notification">6</span>
<span class="time">10:26 am</span>
</p>
<p class="msg">
Good job dude awesome work here, please add theese features ...
</p>
</a>
</li>
<li class="mail-list clearfix">
<a href="#">
<img src="assets/img/avatars/130.jpg" class="mail-avatar pull-left" alt="avatar">
<p class="name">
<span class="status off"><i class="en-dot"></i></span> Fellix Jones
<span class="notification">1</span>
<span class="time">7:15 am</span>
</p>
<p class="msg">
I have some issues when try to reach my product page can you ...
</p>
</a>
</li>
<li class="mail-list clearfix">
<a href="#">
<img src="assets/img/avatars/131.jpg" class="mail-avatar pull-left" alt="avatar">
<p class="name">
<span class="status"><i class="en-dot"></i></span> Tina Dowsen
<span class="notification">5</span>
<span class="time">03:46 am</span>
</p>
<p class="msg">
Hello Sugge, i want to apply for your referal program , please ...
</p>
</a>
</li>
<li class="mail-more">
<a href="email-inbox.html">View all <i class="en-arrow-right7"></i></a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>
<a href="#" id="toggle-header-area"><i class="ec-download"></i></a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="br-alarm"></i> <span class="notification">5</span></a>
<ul class="dropdown-menu notification-menu right" role="menu">
<li class="clearfix">
<i class="ec-chat"></i>
<a href="#" class="notification-user"> Ric Jones </a>
<span class="notification-action"> replied to your </span>
<a href="#" class="notification-link"> comment</a>
</li>
<li class="clearfix">
<i class="st-pencil"></i>
<a href="#" class="notification-user"> SuggeElson </a>
<span class="notification-action"> just write a </span>
<a href="#" class="notification-link"> post</a>
</li>
<li class="clearfix">
<i class="ec-trashcan"></i>
<a href="#" class="notification-user"> SuperAdmin </a>
<span class="notification-action"> just remove </span>
<a href="#" class="notification-link"> 12 files</a>
</li>
<li class="clearfix">
<i class="st-paperclip"></i>
<a href="#" class="notification-user"> C. Wiilde </a>
<span class="notification-action"> attach </span>
<a href="#" class="notification-link"> 3 files</a>
</li>
<li class="clearfix">
<i class="st-support"></i>
<a href="#" class="notification-user"> John Simpson </a>
<span class="notification-action"> add support </span>
<a href="#" class="notification-link"> ticket</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
<img class="user-avatar" src="assets/img/avatars/48.jpg" alt="SuggeElson">SuggeElson</a>
<ul class="dropdown-menu right" role="menu">
<li><a href="profile.html"><i class="st-user"></i> Profile</a>
</li>
<li><a href="file.html"><i class="st-cloud"></i> Files</a>
</li>
<li><a href="#"><i class="st-settings"></i> Settings</a>
</li>
<li><a href="login.html"><i class="im-exit"></i> Logout</a>
</li>
</ul>
</li>
<li id="toggle-right-sidebar-li"><a href="#" id="toggle-right-sidebar"><i class="ec-users"></i> <span class="notification">3</span></a>
</li>
</ul>
</nav>
</div>
<!-- Start #header-area -->
<div id="header-area" class="fadeInDown">
<div class="header-area-inner">
<ul class="list-unstyled list-inline">
<li>
<div class="shortcut-button">
<a href="#">
<i class="im-pie"></i>
<span>Earning Stats</span>
</a>
</div>
</li>
<li>
<div class="shortcut-button">
<a href="#">
<i class="ec-images color-dark"></i>
<span>Gallery</span>
</a>
</div>
</li>
<li>
<div class="shortcut-button">
<a href="#">
<i class="en-light-bulb color-orange"></i>
<span>Fresh ideas</span>
</a>
</div>
</li>
<li>
<div class="shortcut-button">
<a href="#">
<i class="ec-link color-blue"></i>
<span>Links</span>
</a>
</div>
</li>
<li>
<div class="shortcut-button">
<a href="#">
<i class="ec-support color-red"></i>
<span>Support</span>
</a>
</div>
</li>
<li>
<div class="shortcut-button">
<a href="#">
<i class="st-lock color-teal"></i>
<span>Lock area</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- End #header-area -->
</div>
<!-- Start .header-inner -->
</div>
<!-- End #header -->
<!-- Start #sidebar -->
<div id="sidebar">
<!-- Start .sidebar-inner -->
<div class="sidebar-inner">
<!-- Start #sideNav -->
<ul id="sideNav" class="nav nav-pills nav-stacked">
<li class="top-search">
<form>
<input type="text" name="search" placeholder="Search ...">
<button type="submit"><i class="ec-search s20"></i>
</button>
</form>
</li>
<li><a href="index.html">Dashboard <i class="im-screen"></i></a>
</li>
<li><a href="charts.html">Charts <i class="st-chart"></i></a>
</li>
<li>
<a href="#"> Forms <i class="im-paragraph-justify"></i></a>
<ul class="nav sub">
<li><a href="forms.html"><i class="ec-pencil2"></i> Form Stuff</a>
</li>
<li><a href="form-validation.html"><i class="im-checkbox-checked"></i> Form Validation</a>
</li>
<li><a href="form-wizard.html"><i class="im-wand"></i> Form Wizard</a>
</li>
<li><a href="wysiwyg.html"><i class="fa-pencil"></i> WYSIWYG editor</a>
</li>
</ul>
</li>
<li><a href="#"> Tables <i class="im-table2"></i></a>
<ul class="nav sub">
<li><a href="tables.html"><i class="en-arrow-right7"></i> Static tables</a>
</li>
<li><a href="data-tables.html"><i class="en-arrow-right7"></i> Data tables</a>
</li>
</ul>
</li>
<li><a href="#"> UI Elements <i class="st-lab"></i></a>
<ul class="nav sub">
<li><a href="notifications.html"><i class="fa-bell"></i> Notifications</a>
</li>
<li><a href="panels.html"><i class="br-window"></i> Panels</a>
</li>
<li><a href="tiles.html"><i class="im-windows8"></i> Tiles</a>
</li>
<li><a href="elements.html"><i class="st-cube"></i> Elements</a>
</li>
<li><a href="icons.html"><i class="im-stack"></i> Icons</a>
</li>
<li><a href="buttons.html"><i class="im-play2"></i> Buttons</a>
</li>
<li><a href="calendar.html"><i class="im-calendar2"></i> Calendar</a>
</li>
<li><a href="grid.html"><i class="st-grid"></i> Grid</a>
</li>
<li><a href="typo.html"><i class="im-font"></i> Typography</a>
</li>
<li><a href="list.html"><i class="fa-list"></i> Lists</a>
</li>
</ul>
</li>
<li><a href="#"><i class="ec-mail"></i> Email app</a>
<ul class="nav sub">
<li><a href="email-inbox.html"><i class="ec-archive"></i> Inbox</a>
</li>
<li><a href="email-read.html"><i class="br-eye"></i> Read email</a>
</li>
<li><a href="email-write.html"><i class="ec-pencil2"></i> Write email</a>
</li>
</ul>
</li>
<li><a href="file.html"><i class="en-upload"></i> File Manager</a>
</li>
<li><a href="gallery.html"><i class="im-images"></i> Gallery</a>
</li>
<li><a href="widgets.html"><i class="st-diamond"></i> Widgets </a>
</li>
<li><a href="#"><i class="ec-location"></i> Maps</a>
<ul class="nav sub">
<li><a href="maps-google.html"><i class="im-map2"></i> Google maps</a>
</li>
<li><a href="maps-vector.html"><i class="en-location2"></i> Vector maps</a>
</li>
</ul>
</li>
<li><a href="#">Pages <i class="st-files"></i></a>
<ul class="nav sub">
<li><a href="invoice.html"><i class="st-file"></i> Invoice</a>
</li>
<li><a href="profile.html"><i class="ec-user"></i> Profile page</a>
</li>
<li><a href="search.html"><i class="ec-search"></i> Search page</a>
</li>
<li><a href="blank.html"><i class="im-file4"></i> Blank page</a>
</li>
<li><a href="login.html"><i class="ec-locked"></i> Login page</a>
</li>
<li><a href="lockscreen.html"><i class="ec-locked"></i> Lock screen</a>
</li>
<li>
<a href="#"><i class="st-files"></i> Error pages</a>
<ul class="nav sub">
<li><a href="400.html"><i class="st-file-broken"></i> Error 400</a>
</li>
<li><a href="401.html"><i class="st-file-broken"></i> Error 401</a>
</li>
<li><a href="403.html"><i class="st-file-broken"></i> Error 403</a>
</li>
<li><a href="404.html"><i class="st-file-broken"></i> Error 404</a>
</li>
<li><a href="405.html"><i class="st-file-broken"></i> Error 405</a>
</li>
<li><a href="500.html"><i class="st-file-broken"></i> Error 500</a>
</li>
<li><a href="503.html"><i class="st-file-broken"></i> Error 503</a>
</li>
<li><a href="offline.html"><i class="st-window"></i> Offline</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Bonus <i class="im-gift"></i></a>
<ul class="nav sub">
<li><a href="landing.html"><i class="im-airplane"></i> Landing page</a>
</li>
</ul>
</li>
</ul>
<!-- End #sideNav -->
<!-- Start .sidebar-panel -->
<div class="sidebar-panel">
<h4 class="sidebar-panel-title"><i class="im-fire"></i> Server usage</h4>
<div class="sidebar-panel-content">
<ul class="server-stats">
<li>
<span class="txt">Disk space</span>
<span class="percent">78</span>
<div id="usage-sparkline" class="sparkline">Loading...</div>
<div class="pie-chart" data-percent="78"></div>
</li>
</ul>
<ul class="server-stats">
<li>
<span class="txt">CPU</span>
<span class="percent">56</span>
<div id="cpu-sparkline" class="sparkline">Loading...</div>
<div class="pie-chart" data-percent="56"></div>
</li>
</ul>
<ul class="server-stats">
<li>
<span class="txt">Memory</span>
<span class="percent">14</span>
<div id="ram-sparkline" class="sparkline">Loading...</div>
<div class="pie-chart" data-percent="14"></div>
</li>
</ul>
</div>
</div>
<!-- End .sidebar-panel -->
</div>
<!-- End .sidebar-inner -->
</div>
<!-- End #sidebar -->
<!-- Start #right-sidebar -->
<div id="right-sidebar" class="hide-sidebar">
<!-- Start .sidebar-inner -->
<div class="sidebar-inner">
<div class="sidebar-panel mt0">
<div class="sidebar-panel-content fullwidth pt0">
<div class="chat-user-list">
<form class="form-horizontal chat-search" role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for user...">
<button type="submit"><i class="ec-search s16"></i>
</button>
</div>
<!-- End .form-group -->
</form>
<ul class="chat-ui bsAccordion">
<li>
<a href="#">Favorites <span class="notification teal">4</span><i class="en-arrow-down5"></i></a>
<ul class="in">
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/49.jpg" alt="@chadengle">Chad Engle
<span class="has-message"><i class="im-pencil"></i></span>
</a>
<span class="status online"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/54.jpg" alt="@alagoon">Anthony Lagoon</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/52.jpg" alt="@koridhandy">Kory Handy</a>
<span class="status"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/50.jpg" alt="@divya">Divia Manyan</a>
<span class="status"><i class="en-dot"></i></span>
</li>
</ul>
</li>
<li>
<a href="#">Online <span class="notification green">3</span><i class="en-arrow-down5"></i></a>
<ul class="in">
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/51.jpg" alt="@kolage">Eric Hofman</a>
<span class="status online"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/55.jpg" alt="@mikebeecham">Mike Beecham</a>
<span class="status online"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/53.jpg" alt="@derekebradley">Darek Bradly</a>
<span class="status online"><i class="en-dot"></i></span>
</li>
</ul>
</li>
<li>
<a href="#">Offline <span class="notification red">5</span><i class="en-arrow-down5"></i></a>
<ul>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/56.jpg" alt="@laurengray">Lauren Grey</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/49.jpg" alt="@chadengle">Chad Engle</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/58.jpg" alt="@frankiefreesbie">Frankie Freesibie</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/57.jpg" alt="@joannefournier">Joane Fornier</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
<li>
<a href="#" class="chat-name">
<img class="chat-avatar" src="assets/img/avatars/59.jpg" alt="@aiiaiiaii">Alia Alien</a>
<span class="status offline"><i class="en-dot"></i></span>
</li>
</ul>
</li>
</ul>
</div>
<div class="chat-box">
<h5>Chad Engle</h5>
<a id="close-user-chat" href="#" class="btn btn-xs btn-primary"><i class="en-arrow-left4"></i></a>
<ul class="chat-ui chat-messages">
<li class="chat-user">
<p class="avatar">
<img src="assets/img/avatars/49.jpg" alt="@chadengle">
</p>
<p class="chat-name">Chad Engle <span class="chat-time">15 seconds ago</span>
</p>
<span class="status online"><i class="en-dot"></i></span>
<p class="chat-txt">Hello Sugge check out the last order.</p>
</li>
<li class="chat-me">
<p class="avatar">
<img src="assets/img/avatars/48.jpg" alt="SuggeElson">
</p>
<p class="chat-name">SuggeElson <span class="chat-time">10 seconds ago</span>
</p>
<span class="status online"><i class="en-dot"></i></span>
<p class="chat-txt">Ok i will check it out.</p>
</li>
<li class="chat-user">
<p class="avatar">
<img src="assets/img/avatars/49.jpg" alt="@chadengle">
</p>
<p class="chat-name">Chad Engle <span class="chat-time">now</span>
</p>
<span class="status online"><i class="en-dot"></i></span>
<p class="chat-txt">Thank you, have a nice day</p>
</li>
</ul>
<div class="chat-write">
<form action="#" class="form-horizontal" role="form">
<div class="form-group">
<textarea name="sendmsg" id="sendMsg" class="form-control elastic" rows="1"></textarea>
<a role="button" class="btn" id="attach_photo_btn">
<i class="fa-picture s20"></i>
</a>
<input type="file" name="attach_photo" id="attach_photo">
</div>
<!-- End .form-group -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End .sidebar-inner -->
</div>
<!-- End #right-sidebar -->
<!-- Start #content -->
<div id="content">
<!-- Start .content-wrapper -->
<div class="content-wrapper">
<div class="row">
<!-- Start .row -->
<!-- Start .page-header -->
<div class="col-lg-12 heading">
<h1 class="page-header"><i class="st-cube"></i> Elements</h1>
<!-- Start .bredcrumb -->
<ul id="crumb" class="breadcrumb">
</ul>
<!-- End .breadcrumb -->
<!-- Start .option-buttons -->
<div class="option-buttons">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<a id="clear-localstorage" class="btn tip" title="Reset panels position">
<i class="ec-refresh color-red s24"></i>
</a>
</div>
<div class="btn-group dropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"><i class="br-grid s24"></i></a>
<div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<div class="option-dropdown">
<div class="shortcut-button">
<a href="#">
<i class="im-pie"></i>
<span>Earning Stats</span>
</a>
</div>
<div class="shortcut-button">
<a href="#">
<i class="ec-images color-dark"></i>
<span>Gallery</span>
</a>
</div>
<div class="shortcut-button">
<a href="#">
<i class="en-light-bulb color-orange"></i>
<span>Fresh ideas</span>
</a>
</div>
<div class="shortcut-button">
<a href="#">
<i class="ec-link color-blue"></i>
<span>Links</span>
</a>
</div>
<div class="shortcut-button">
<a href="#">
<i class="ec-support color-red"></i>
<span>Support</span>
</a>
</div>
<div class="shortcut-button">
<a href="#">
<i class="st-lock color-teal"></i>
<span>Lock area</span>
</a>
</div>
</div>
</div>
</div>
<div class="btn-group dropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2"><i class="ec-pencil s24"></i></a>
<div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
<div class="option-dropdown">
<div class="row">
<p class="col-lg-12">Quick post</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-lg-12">
<input type="text" class="form-control" placeholder="Enter title">
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<div class="col-lg-12">
<textarea class="form-control wysiwyg" placeholder="Enter text"></textarea>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<div class="col-lg-12">
<input type="text" class="form-control tags1" placeholder="Enter tags">
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<div class="col-lg-12">
<button class="btn btn-default btn-xs">Save Draft</button>
<button class="btn btn-success btn-xs pull-right">Publish</button>
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
</div>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu3"><i class="ec-help s24"></i></a>
<div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu3">
<div class="option-dropdown">
<p>First time visitor ? <a href="#" id="app-tour" class="btn btn-success ml15">Take app tour</a>
</p>
<hr>
<p>Or check the <a href="#" class="btn btn-danger ml15">FAQ</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End .option-buttons -->
</div>
<!-- End .page-header -->
</div>
<!-- End .row -->
<div class="outlet">
<!-- Start .outlet -->
<!-- Page start here usual with .row class -->
<div class="row">
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h4>Tabs with Tab drop</h4>
</div>
<div class="tabs">
<ul id="myTab" class="nav nav-tabs tabdrop">
<li>
<a href="#one" data-toggle="tab">Tab One</a>
</li>
<li class="">
<a href="#two" data-toggle="tab">Tab Two</a>
</li>
<li class="">
<a href="#three" data-toggle="tab">Tab Three</a>
</li>
<li class="">
<a href="#four" data-toggle="tab">Tab Four</a>
</li>
<li class="">
<a href="#five" data-toggle="tab">Tab Five</a>
</li>
<li>
<a href="#six" data-toggle="tab">Tab Six</a>
</li>
<li class="">
<a href="#seven" data-toggle="tab">Tab Seven</a>
</li>
<li class="">
<a href="#eight" data-toggle="tab">Tab Eight</a>
</li>
<li class="">
<a href="#nine" data-toggle="tab">Tab Nine</a>
</li>
<li class="">
<a href="#ten" data-toggle="tab">Tab Ten</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="two">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="three">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="four">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="five">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="six">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="seven">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="eight">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="nine">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="ten">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
</div>
</div>
</div>
<!-- col-lg-6 col-md-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h4>Justified tabs</h4>
</div>
<div class="tabs">
<ul id="myTab2" class="nav nav-tabs nav-justified">
<li>
<a href="#home2" data-toggle="tab">Home</a>
</li>
<li class="">
<a href="#profile2" data-toggle="tab">Profile</a>
</li>
<li class="">
<a href="#settings2" data-toggle="tab">Settings</a>
</li>
<li class="">
<a href="#users2" data-toggle="tab">Users</a>
</li>
<li class="">
<a href="#shipment2" data-toggle="tab">Shipment</a>
</li>
</ul>
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade active in" id="home2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="profile2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="settings2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="users2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
<div class="tab-pane fade" id="shipment2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, suscipit, autem sit natus deserunt officia error odit ea minima soluta ratione maxime molestias fugit explicabo aspernatur praesentium quisquam voluptatum fuga delectus quidem quas aliquam
minus at corporis libero? Modi, aperiam, pariatur, sequi illum dolore consequuntur aspernatur eos hic officia doloribus magnam impedit autem maiores alias consectetur tempore explicabo. Ducimus, minima, suscipit
unde harum numquam ipsa laboriosam cupiditate nemo repellendus at? Dolorum dicta nemo quaerat iusto.
</p>
</div>
</div>
</div>
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h4>Accordion</h4>
</div>
<div class="panel-group accordion" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">Collapsible Group Item #1</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">Collapsible Group Item #2</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseThree">Collapsible Group Item #3</a>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h4>Toggle</h4>
</div>
<div class="panel-group accordion" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Collapsible Group Item #1</a>
</h5>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">Collapsible Group Item #2</a>
</h5>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">Collapsible Group Item #3</a>
</h5>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-default toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Progress bars</h4>
</div>
<div class="panel-body">
<form action="#" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Basic progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Success progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Danger progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">70%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Info progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">40%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Dark progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Yellow progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">70%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Lime progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-lime" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Orange progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Purple progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Pink progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">20%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Magenta progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Brown progressbar</label>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-default toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Stripped Progress bars</h4>
</div>
<div class="panel-body">
<form action="#" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Basic progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Success progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Danger progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">70%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Info progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">40%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Dark progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Yellow progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">70%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Lime progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-lime" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Orange progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Purple progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Pink progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">20%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Magenta progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Brown progressbar</label>
<div class="col-lg-10">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>
</div>
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-default toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title"><i class="im-equalizer"></i>Sliders</h4>
</div>
<div class="panel-body">
<form action="#" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Basic slider</label>
<div class="col-lg-10">
<input id="basic-slider" data-slider-id="slider1" type="text">
<span class="help-block color-red">Value : <span class="strong" id="slider1val">50</span></span>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">With 25 step</label>
<div class="col-lg-10">
<input id="step-slider" data-slider-id="slider2" type="text">
<span class="help-block color-red">Value : <span class="strong" id="slider2val">25</span></span>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Range slider</label>
<div class="col-lg-10">
<input id="range-slider" data-slider-id="slider3" type="text">
<span class="help-block color-red">Value : <span class="strong" id="slider3val">100-500</span></span>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Vertical sliders</label>
<div class="col-lg-10">
<input id="vertical-slider" data-slider-id="slider4" type="text">
<span class="help-block color-red">Value : <span class="strong" id="slider4val">5</span></span>
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-primary toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Circular progressbar styles</h4>
</div>
<div class="panel-body">
<form action="#" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Basic circle</label>
<div class="col-lg-10">
<div class="progress-circular-dark" data-dimension="100" data-text="79%" data-width="20" data-percent="79"></div>
<div class="progress-circular-red" data-dimension="100" data-text="42%" data-width="20" data-percent="42"></div>
<div class="progress-circular-green" data-dimension="100" data-text="23%" data-width="20" data-percent="23"></div>
<div class="progress-circular-orange" data-dimension="100" data-text="56%" data-width="20" data-percent="56"></div>
<div class="progress-circular-blue" data-dimension="100" data-text="89%" data-width="20" data-percent="89"></div>
<div class="progress-circular-yellow" data-dimension="100" data-text="25%" data-width="20" data-percent="25"></div>
<div class="progress-circular-teal" data-dimension="100" data-text="15%" data-width="20" data-percent="15"></div>
<div class="progress-circular-lime" data-dimension="100" data-text="41%" data-width="20" data-percent="41"></div>
<div class="progress-circular-magenta" data-dimension="100" data-text="62%" data-width="20" data-percent="62"></div>
<div class="progress-circular-purple" data-dimension="100" data-text="28%" data-width="20" data-percent="28"></div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">With icons</label>
<div class="col-lg-10">
<div class="progress-circular-dark" data-dimension="100" data-text="79%" data-width="20" data-percent="79" data-icon="ec-user"></div>
<div class="progress-circular-red" data-dimension="100" data-text="42%" data-width="20" data-percent="42" data-icon="ec-contract"></div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Arc style</label>
<div class="col-lg-10">
<div class="progress-circular-dark" data-dimension="100" data-text="79%" data-width="20" data-percent="79" data-type="half"></div>
<div class="progress-circular-red" data-dimension="100" data-text="42%" data-width="20" data-percent="42" data-type="half"></div>
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
</div>
<div class="row">
<!-- Start .row -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-success toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Tooltips, popovers and modals</h4>
</div>
<div class="panel-body text-center">
<div class="page-header">
<h5>Bootstrap tooltip</h5>
</div>
<button type="button" class="btn btn-primary btn-alt mr15 mb15" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-primary btn-alt mr15 mb15" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-primary btn-alt mr15 mb15" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-primary btn-alt mr15 mb15" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<div class="page-header">
<h5>Bootstrap popovers
<small>click for action</small>
</h5>
</div>
<button type="button" class="btn btn-primary mr15 mb15" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-primary mr15 mb15" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Fine title">
Popover on top
</button>
<button type="button" class="btn btn-primary mr15 mb15" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-primary mr15 mb15" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<div class="page-header">
<h5>Modal via bootbox.js</h5>
</div>
<button id="alert-modal" type="button" class="btn btn-primary btn-alt mr15 mb15">Alert modal</button>
<button id="confirm-modal" type="button" class="btn btn-danger btn-alt mr15 mb15">Confirm modal</button>
<button id="prompt-modal" type="button" class="btn btn-success btn-alt mr15 mb15">Prompt modal</button>
<div class="page-header">
<h5>Simple Bootstrap modal</h5>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myModal">Short modal</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myModal2">Long modal</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myModal3">No Footer</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myModal4">No Header</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myModal5">No Header & Footer</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#myLargeModal">Large Modal</button>
<button class="btn btn-primary btn-alt mr15 mb15" data-toggle="modal" data-target="#mySmallModal">Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad sed dolores iusto ab vero tempora in earum accusantium quas iure repellendus fugit ipsa reiciendis. Id illo natus sequi ex eveniet!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal2Label">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sit ipsum quis magnam tenetur dignissimos quam molestiae explicabo hic veritatis nobis facilis ipsa saepe voluptas doloribus voluptates culpa nesciunt quidem?
</p>
<p>
Voluptatibus suscipit ipsum quisquam architecto provident iusto eaque nemo nulla minima voluptas molestiae aliquam! Laborum est repellat aliquid esse optio cupiditate sunt vitae maiores voluptate incidunt aut quaerat rem. Sequi.
</p>
<p>
Tenetur atque aliquam quibusdam sapiente modi totam magnam blanditiis repudiandae quia illo eum cupiditate nihil dolore at veritatis culpa corporis! Aliquid error magnam tempore itaque non mollitia nemo ipsa exercitationem.
</p>
<p>
Labore assumenda expedita saepe doloremque animi optio maxime repudiandae incidunt. Obcaecati voluptates eveniet fuga harum facere dicta quidem vero aliquid totam natus doloremque quibusdam nesciunt iusto magnam expedita itaque ut?
</p>
<p>
Consectetur ex quae nisi alias doloribus autem cupiditate nobis dolore sit esse voluptates architecto dignissimos quis earum deserunt aliquid itaque nesciunt tempora porro error! Harum dicta minima quae molestias atque?
</p>
<p>
Fugiat velit quaerat sed pariatur quo debitis aut enim ipsam consequuntur itaque officiis omnis dolore ut reprehenderit rem quisquam aliquam amet eius tempora ratione est praesentium magni laudantium nulla quod.
</p>
<p>
Aperiam vel cupiditate enim ratione architecto facilis molestias minus neque sint fugiat reiciendis necessitatibus minima sit voluptas molestiae reprehenderit ullam sequi ut quae in. Et tempora quod vero illo praesentium.
</p>
<p>
Tempora sequi nihil cum esse nemo voluptatum iure impedit molestias tempore sapiente amet nulla eos architecto dolor enim expedita quidem. Reprehenderit earum aperiam voluptatem magnam suscipit cum consequatur dicta rem.
</p>
<p>
Facilis aperiam similique assumenda ab aut quo cupiditate corporis dolorum recusandae impedit tenetur doloremque id nesciunt sequi molestiae nostrum alias quibusdam ipsam enim numquam exercitationem tempora culpa ex ullam autem!
</p>
<p>
Dolores soluta quia voluptas rerum ducimus et reiciendis nulla aut blanditiis dolore vero deleniti impedit itaque aliquid consequuntur dolorem id officiis assumenda quam aspernatur! Optio consequatur deserunt magni nulla nam.
</p>
<p>
Iste ea doloremque omnis sunt quia voluptatum eum dolore. Nihil doloremque tempore culpa molestiae accusamus non quas eius sit commodi sequi earum rem magni dolorum nostrum possimus porro dolor excepturi.
</p>
<p>
Reprehenderit tenetur blanditiis esse ratione molestiae tempore laborum facilis atque expedita doloremque quidem facere fugit similique excepturi vitae dolorum officiis laudantium distinctio veniam a recusandae consectetur deserunt quo! Perspiciatis deleniti.
</p>
<p>
Nostrum sunt ea deleniti quod quos autem amet unde exercitationem ipsa commodi. Corporis aut possimus eaque omnis et voluptatibus dolores numquam ullam temporibus voluptas aliquid veniam rem harum pariatur perspiciatis.
</p>
<p>
Rem ducimus aliquid dolore reprehenderit reiciendis praesentium consectetur nemo nesciunt molestiae corporis quos sed in vero numquam molestias nostrum veritatis ex consequatur blanditiis quibusdam officiis illo ab unde rerum impedit!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal3Label">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad sed dolores iusto ab vero tempora in earum accusantium quas iure repellendus fugit ipsa reiciendis. Id illo natus sequi ex eveniet!
</p>
<p>
Animi temporibus voluptatibus minus ad laboriosam dignissimos eum incidunt blanditiis nobis magnam itaque nostrum veritatis eius laudantium voluptatem aspernatur accusamus maiores at vitae esse cumque. Est debitis nemo porro quam.
</p>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad sed dolores iusto ab vero tempora in earum accusantium quas iure repellendus fugit ipsa reiciendis. Id illo natus sequi ex eveniet!
</p>
<p>
Animi temporibus voluptatibus minus ad laboriosam dignissimos eum incidunt blanditiis nobis magnam itaque nostrum veritatis eius laudantium voluptatem aspernatur accusamus maiores at vitae esse cumque. Est debitis nemo porro quam.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo pariatur facilis molestiae recusandae vel facere et magnam praesentium veniam numquam eius distinctio dicta nostrum voluptatum doloribus. Optio quidem voluptatum quaerat.
</p>
<p>
Tempore quas omnis a suscipit doloremque voluptatibus sit non aliquid at accusamus quam vero culpa quisquam aut placeat vel odit. Pariatur architecto placeat nesciunt eveniet dolore eius voluptatibus ab fuga.
</p>
<p>
Necessitatibus deleniti incidunt rerum quia magni quidem cum sequi veritatis nostrum aliquam sapiente blanditiis laudantium nobis atque ab ipsum temporibus qui! Nihil eligendi fuga aliquam ullam voluptates pariatur ducimus delectus.
</p>
<p>
Fuga unde illum nisi suscipit esse eveniet quasi eligendi ipsam quia enim voluptates quis architecto omnis cum fugit ab sed culpa pariatur nulla minima voluptate dolorum incidunt accusantium officiis totam.
</p>
<p>
Nostrum optio sed quam vitae ducimus at aut reprehenderit amet voluptatum dolor doloribus temporibus perferendis veniam magnam illum nulla natus quibusdam repellat. Id aut aperiam qui iste quasi. Sed dolor.
</p>
<p>
Ratione ad aliquid mollitia ipsam dignissimos aperiam ullam odit earum enim odio adipisci qui non dicta culpa hic facere explicabo. Obcaecati doloribus eligendi voluptatibus placeat voluptas labore quisquam esse sunt.
</p>
<p>
Mollitia minima nesciunt maiores laboriosam voluptas at quidem necessitatibus repellat vel ullam. Ex ut qui mollitia pariatur illum iste hic rem provident quo ab maiores officiis harum repudiandae doloribus ipsa!
</p>
<p>
Alias tenetur repudiandae voluptatibus magni eligendi assumenda veritatis suscipit earum ea. Ipsam quibusdam accusantium beatae corrupti quisquam aut quae tempore autem ut dolorem voluptatibus sunt saepe dolor laborum voluptates eum.
</p>
<p>
Est sapiente earum animi facilis harum voluptatem non nobis ullam aliquam voluptate. Ipsum debitis doloremque harum molestiae non laborum dolorum illo facilis itaque quia excepturi quas sit nulla labore modi.
</p>
<p>
Eveniet dolorem facilis cumque beatae pariatur explicabo iste enim consequuntur sunt omnis possimus itaque dolor! Ex quas eveniet inventore quisquam sed fugit sequi obcaecati dolore optio libero perferendis natus aliquid.
</p>
<p>
Ipsum nihil a maxime in esse id nesciunt sapiente praesentium officiis sunt ea sed velit fuga sit cupiditate officia provident porro molestiae. Ut quae odio perspiciatis perferendis ipsam dignissimos quos.
</p>
<p>
Ad perferendis tempore incidunt dolorem assumenda quod nesciunt nobis expedita nemo alias dicta porro quasi adipisci culpa dolores nihil eveniet libero veritatis cum eligendi id unde animi similique natus tempora.
</p>
<p>
Amet a officia quae voluptate quisquam aliquam iste labore velit nemo quibusdam nostrum repellat alias vitae iusto in quaerat deleniti! Eligendi repellendus sed quod quisquam minima mollitia corporis dolores reprehenderit!
</p>
<p>
Dolorem iste blanditiis error hic nemo consequatur amet pariatur quidem in facere adipisci id deleniti provident natus eveniet dicta quo officia nisi ullam dolorum libero quaerat ratione soluta saepe est!
</p>
<p>
Necessitatibus porro eligendi numquam optio omnis eius magni laudantium expedita ex reprehenderit tempore perspiciatis perferendis natus voluptatibus veritatis. Voluptate molestiae nisi modi saepe tenetur tempora nulla dolores recusandae atque itaque.
</p>
<p>
Perspiciatis rerum dolore alias unde laborum veniam quam facere laudantium voluptas vero voluptatibus inventore esse aut dignissimos nemo adipisci repudiandae suscipit aspernatur minus laboriosam tenetur pariatur sed. Ratione aperiam provident.
</p>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myLargeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo pariatur facilis molestiae recusandae vel facere et magnam praesentium veniam numquam eius distinctio dicta nostrum voluptatum doloribus. Optio quidem voluptatum quaerat.
</p>
<p>
Tempore quas omnis a suscipit doloremque voluptatibus sit non aliquid at accusamus quam vero culpa quisquam aut placeat vel odit. Pariatur architecto placeat nesciunt eveniet dolore eius voluptatibus ab fuga.
</p>
<p>
Necessitatibus deleniti incidunt rerum quia magni quidem cum sequi veritatis nostrum aliquam sapiente blanditiis laudantium nobis atque ab ipsum temporibus qui! Nihil eligendi fuga aliquam ullam voluptates pariatur ducimus delectus.
</p>
<p>
Fuga unde illum nisi suscipit esse eveniet quasi eligendi ipsam quia enim voluptates quis architecto omnis cum fugit ab sed culpa pariatur nulla minima voluptate dolorum incidunt accusantium officiis totam.
</p>
<p>
Nostrum optio sed quam vitae ducimus at aut reprehenderit amet voluptatum dolor doloribus temporibus perferendis veniam magnam illum nulla natus quibusdam repellat. Id aut aperiam qui iste quasi. Sed dolor.
</p>
<p>
Ratione ad aliquid mollitia ipsam dignissimos aperiam ullam odit earum enim odio adipisci qui non dicta culpa hic facere explicabo. Obcaecati doloribus eligendi voluptatibus placeat voluptas labore quisquam esse sunt.
</p>
<p>
Mollitia minima nesciunt maiores laboriosam voluptas at quidem necessitatibus repellat vel ullam. Ex ut qui mollitia pariatur illum iste hic rem provident quo ab maiores officiis harum repudiandae doloribus ipsa!
</p>
<p>
Alias tenetur repudiandae voluptatibus magni eligendi assumenda veritatis suscipit earum ea. Ipsam quibusdam accusantium beatae corrupti quisquam aut quae tempore autem ut dolorem voluptatibus sunt saepe dolor laborum voluptates eum.
</p>
<p>
Est sapiente earum animi facilis harum voluptatem non nobis ullam aliquam voluptate. Ipsum debitis doloremque harum molestiae non laborum dolorum illo facilis itaque quia excepturi quas sit nulla labore modi.
</p>
<p>
Eveniet dolorem facilis cumque beatae pariatur explicabo iste enim consequuntur sunt omnis possimus itaque dolor! Ex quas eveniet inventore quisquam sed fugit sequi obcaecati dolore optio libero perferendis natus aliquid.
</p>
<p>
Ipsum nihil a maxime in esse id nesciunt sapiente praesentium officiis sunt ea sed velit fuga sit cupiditate officia provident porro molestiae. Ut quae odio perspiciatis perferendis ipsam dignissimos quos.
</p>
<p>
Ad perferendis tempore incidunt dolorem assumenda quod nesciunt nobis expedita nemo alias dicta porro quasi adipisci culpa dolores nihil eveniet libero veritatis cum eligendi id unde animi similique natus tempora.
</p>
<p>
Amet a officia quae voluptate quisquam aliquam iste labore velit nemo quibusdam nostrum repellat alias vitae iusto in quaerat deleniti! Eligendi repellendus sed quod quisquam minima mollitia corporis dolores reprehenderit!
</p>
<p>
Dolorem iste blanditiis error hic nemo consequatur amet pariatur quidem in facere adipisci id deleniti provident natus eveniet dicta quo officia nisi ullam dolorum libero quaerat ratione soluta saepe est!
</p>
<p>
Necessitatibus porro eligendi numquam optio omnis eius magni laudantium expedita ex reprehenderit tempore perspiciatis perferendis natus voluptatibus veritatis. Voluptate molestiae nisi modi saepe tenetur tempora nulla dolores recusandae atque itaque.
</p>
<p>
Perspiciatis rerum dolore alias unde laborum veniam quam facere laudantium voluptas vero voluptatibus inventore esse aut dignissimos nemo adipisci repudiandae suscipit aspernatur minus laboriosam tenetur pariatur sed. Ratione aperiam provident.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="mySmallModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo pariatur facilis molestiae recusandae vel facere et magnam praesentium veniam numquam eius distinctio dicta nostrum voluptatum doloribus. Optio quidem voluptatum quaerat.
</p>
<p>
Tempore quas omnis a suscipit doloremque voluptatibus sit non aliquid at accusamus quam vero culpa quisquam aut placeat vel odit. Pariatur architecto placeat nesciunt eveniet dolore eius voluptatibus ab fuga.
</p>
<p>
Necessitatibus deleniti incidunt rerum quia magni quidem cum sequi veritatis nostrum aliquam sapiente blanditiis laudantium nobis atque ab ipsum temporibus qui! Nihil eligendi fuga aliquam ullam voluptates pariatur ducimus delectus.
</p>
<p>
Fuga unde illum nisi suscipit esse eveniet quasi eligendi ipsam quia enim voluptates quis architecto omnis cum fugit ab sed culpa pariatur nulla minima voluptate dolorum incidunt accusantium officiis totam.
</p>
<p>
Nostrum optio sed quam vitae ducimus at aut reprehenderit amet voluptatum dolor doloribus temporibus perferendis veniam magnam illum nulla natus quibusdam repellat. Id aut aperiam qui iste quasi. Sed dolor.
</p>
<p>
Ratione ad aliquid mollitia ipsam dignissimos aperiam ullam odit earum enim odio adipisci qui non dicta culpa hic facere explicabo. Obcaecati doloribus eligendi voluptatibus placeat voluptas labore quisquam esse sunt.
</p>
<p>
Mollitia minima nesciunt maiores laboriosam voluptas at quidem necessitatibus repellat vel ullam. Ex ut qui mollitia pariatur illum iste hic rem provident quo ab maiores officiis harum repudiandae doloribus ipsa!
</p>
<p>
Alias tenetur repudiandae voluptatibus magni eligendi assumenda veritatis suscipit earum ea. Ipsam quibusdam accusantium beatae corrupti quisquam aut quae tempore autem ut dolorem voluptatibus sunt saepe dolor laborum voluptates eum.
</p>
<p>
Est sapiente earum animi facilis harum voluptatem non nobis ullam aliquam voluptate. Ipsum debitis doloremque harum molestiae non laborum dolorum illo facilis itaque quia excepturi quas sit nulla labore modi.
</p>
<p>
Eveniet dolorem facilis cumque beatae pariatur explicabo iste enim consequuntur sunt omnis possimus itaque dolor! Ex quas eveniet inventore quisquam sed fugit sequi obcaecati dolore optio libero perferendis natus aliquid.
</p>
<p>
Ipsum nihil a maxime in esse id nesciunt sapiente praesentium officiis sunt ea sed velit fuga sit cupiditate officia provident porro molestiae. Ut quae odio perspiciatis perferendis ipsam dignissimos quos.
</p>
<p>
Ad perferendis tempore incidunt dolorem assumenda quod nesciunt nobis expedita nemo alias dicta porro quasi adipisci culpa dolores nihil eveniet libero veritatis cum eligendi id unde animi similique natus tempora.
</p>
<p>
Amet a officia quae voluptate quisquam aliquam iste labore velit nemo quibusdam nostrum repellat alias vitae iusto in quaerat deleniti! Eligendi repellendus sed quod quisquam minima mollitia corporis dolores reprehenderit!
</p>
<p>
Dolorem iste blanditiis error hic nemo consequatur amet pariatur quidem in facere adipisci id deleniti provident natus eveniet dicta quo officia nisi ullam dolorum libero quaerat ratione soluta saepe est!
</p>
<p>
Necessitatibus porro eligendi numquam optio omnis eius magni laudantium expedita ex reprehenderit tempore perspiciatis perferendis natus voluptatibus veritatis. Voluptate molestiae nisi modi saepe tenetur tempora nulla dolores recusandae atque itaque.
</p>
<p>
Perspiciatis rerum dolore alias unde laborum veniam quam facere laudantium voluptas vero voluptatibus inventore esse aut dignissimos nemo adipisci repudiandae suscipit aspernatur minus laboriosam tenetur pariatur sed. Ratione aperiam provident.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="panel panel-primary toggle panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Wells</h4>
</div>
<div class="panel-body">
<div class="page-header">
<h5>Normal well</h5>
</div>
<div class="well">
Look, I'm in a well!
</div>
<div class="page-header">
<h5>Large well</h5>
</div>
<div class="well well-lg">
Look, I'm in a large well!
</div>
<div class="page-header">
<h5>Small well</h5>
</div>
<div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
</div>
<!-- End .row -->
<div class="row">
<!-- Start .row -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h5>Basic pills</h5>
</div>
<ul class="nav nav-pills">
<li><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Messages</a>
</li>
</ul>
<div class="page-header">
<h5>Justified pills</h5>
</div>
<ul class="nav nav-pills nav-justified">
<li><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Messages</a>
</li>
</ul>
<div class="page-header">
<h5>Stacked pills</h5>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Messages</a>
</li>
</ul>
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h5>Jumbotron unit</h5>
</div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium, maxime, id, quaerat eaque labore aspernatur similique nam facilis nesciunt tenetur ea incidunt eveniet minima explicabo a consequuntur veritatis
distinctio.</p>
<p><a class="btn btn-primary btn-lg btn-alt" role="button">Learn more</a>
</p>
</div>
</div>
<!-- col-lg-6 end here -->
</div>
<!-- End .row -->
<div class="row">
<!-- Start .row -->
<div class="col-lg-4">
<!-- col-lg-4 start here -->
<div class="page-header">
<h5>Pagination</h5>
</div>
<ul class="pagination mt0 mb0">
<li><a href="#"><i class="en-arrow-left8"></i></a>
</li>
<li><a href="#"><span class="sr-only">(current)</span>1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li><a href="#"><i class="en-arrow-right8"></i></a>
</li>
</ul>
<div class="page-header">
<h5>Complex Pagination</h5>
</div>
<ul class="pagination mt0">
<li class="first disabled"><a href="#">First</a>
</li>
<li class="previous"><a href="#"><i class="en-arrow-left8"></i></a>
</li>
<li><a href="#"><span class="sr-only">(current)</span>1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li class="next"><a href="#"><i class="en-arrow-right8"></i></a>
</li>
<li class="last"><a href="#">Last</a>
</li>
</ul>
</div>
<!-- col-lg-4 end here -->
<div class="col-lg-4">
<!-- col-lg-4 start here -->
<div class="page-header">
<h5>Pager</h5>
</div>
<ul class="pager">
<li><a href="#">Previous</a>
</li>
<li><a href="#">Next</a>
</li>
</ul>
<div class="page-header">
<h5>Disabled Pager</h5>
</div>
<ul class="pager">
<li class="disabled"><a href="#">Previous</a>
</li>
<li class="disabled"><a href="#">Next</a>
</li>
</ul>
</div>
<!-- col-lg-4 end here -->
<div class="col-lg-4">
<!-- col-lg-4 start here -->
<div class="page-header">
<h5>Pager with aligned links</h5>
</div>
<ul class="pager">
<li class="previous"><a href="#">← Older</a>
</li>
<li class="next"><a href="#">Newer →</a>
</li>
</ul>
<div class="page-header">
<h5>Disable state</h5>
</div>
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a>
</li>
<li class="next"><a href="#">Newer →</a>
</li>
</ul>
</div>
<!-- col-lg-4 end here -->
</div>
<!-- End .row -->
<div class="row">
<!-- Start .row -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h5>Carousel example</h5>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators dotstyle center">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><a href="#">slide1</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1"><a href="#">slide2</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2"><a href="#">slide3</a>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/carousel/1.jpg" alt="Image1">
<div class="carousel-caption">
<h4>Seagull</h4>
<p>Wonderful seagull in the beach.</p>
</div>
</div>
<div class="item">
<img src="assets/img/carousel/2.jpg" alt="Image2">
<div class="carousel-caption">
<h4>Pack of Seagulls</h4>
<p>Wonderful pack of seagulls in the beach.</p>
</div>
</div>
<div class="item">
<img src="assets/img/carousel/3.jpg" alt="Image3">
<div class="carousel-caption">
<h4>Stones</h4>
<p>Very nice stones in the beach.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="en-arrow-left8"></i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="en-arrow-right8"></i>
</a>
</div>
</div>
<!-- col-lg-6 col-md-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 col-md-6 start here -->
<div class="panel panel-primary toggle panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">SVG loading indicators</h4>
</div>
<div class="panel-body text-center">
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-spokes.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-balls.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-bars.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-bubbles.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-cubes.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-cylon.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-spin.svg" width="64" height="64" alt="loading">
</div>
<div class="mr20 mb15 pull-left">
<img src="assets/img/svg/loading-spinning-bubbles.svg" width="64" height="64" alt="loading">
</div>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 col-md-6 end here -->
<div class="col-lg-6 col-md-6">
<!-- col-lg-6 start here -->
<div class="page-header">
<h5>Labels</h5>
</div>
<span class="label label-default mr10 mb10">Default</span>
<span class="label label-primary mr10 mb10">Primary</span>
<span class="label label-success mr10 mb10">Success</span>
<span class="label label-info mr10 mb10">Info</span>
<span class="label label-warning mr10 mb10">Warning</span>
<span class="label label-danger mr10 mb10">Danger</span>
<span class="label label-dark mr10 mb10">Dark</span>
<span class="label label-orange mr10 mb10">Orange</span>
<span class="label label-yellow mr10 mb10">Yellow</span>
<span class="label label-pink mr10 mb10">Pink</span>
<span class="label label-lime mr10 mb10">Lime</span>
<span class="label label-magenta mr10 mb10">Magenta</span>
<span class="label label-brown mr10 mb10">Brown</span>
<span class="label label-teal mr10 mb10">Teal</span>
<span class="label label-purple mr10 mb10">Purple</span>
<div class="page-header">
<h5>Badges</h5>
</div>
<span class="badge badge-default mr10 mb10">Default</span>
<span class="badge badge-primary mr10 mb10">Primary</span>
<span class="badge badge-success mr10 mb10">Success</span>
<span class="badge badge-info mr10 mb10">Info</span>
<span class="badge badge-warning mr10 mb10">Warning</span>
<span class="badge badge-danger mr10 mb10">Danger</span>
<span class="badge badge-dark mr10 mb10">Dark</span>
<span class="badge badge-orange mr10 mb10">Orange</span>
<span class="badge badge-yellow mr10 mb10">Yellow</span>
<span class="badge badge-pink mr10 mb10">Pink</span>
<span class="badge badge-lime mr10 mb10">Lime</span>
<span class="badge badge-magenta mr10 mb10">Magenta</span>
<span class="badge badge-brown mr10 mb10">Brown</span>
<span class="badge badge-teal mr10 mb10">Teal</span>
<span class="badge badge-purple mr10 mb10">Purple</span>
</div>
<!-- col-lg-6 col-md-6 end here -->
</div>
<!-- End .row -->
<!-- Page End here -->
</div>
<!-- End .outlet -->
</div>
<!-- End .content-wrapper -->
<div class="clearfix"></div>
</div>
<!-- End #content -->
<!-- Javascripts -->
<!-- Load pace first -->
<script src="assets/plugins/core/pace/pace.min.js"></script>
<!-- Important javascript libs(put in all pages) -->
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script>
window.jQuery || document.write('<script src="assets/js/libs/jquery-2.1.1.min.js">\x3C/script>')
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
window.jQuery || document.write('<script src="assets/js/libs/jquery-ui-1.10.4.min.js">\x3C/script>')
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/libs/excanvas.min.js"></script>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="assets/js/libs/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap plugins -->
<script src="assets/js/bootstrap/bootstrap.js"></script>
<!-- Core plugins ( not remove ever) -->
<!-- Handle responsive view functions -->
<script src="assets/js/jRespond.min.js"></script>
<!-- Custom scroll for sidebars,tables and etc. -->
<script src="assets/plugins/core/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/core/slimscroll/jquery.slimscroll.horizontal.min.js"></script>
<!-- Resize text area in most pages -->
<script src="assets/plugins/forms/autosize/jquery.autosize.js"></script>
<!-- Proivde quick search for many widgets -->
<script src="assets/plugins/core/quicksearch/jquery.quicksearch.js"></script>
<!-- Bootbox confirm dialog for reset postion on panels -->
<script src="assets/plugins/ui/bootbox/bootbox.js"></script>
<!-- Other plugins ( load only nessesary plugins for every page) -->
<script src="assets/plugins/core/moment/moment.min.js"></script>
<script src="assets/plugins/charts/sparklines/jquery.sparkline.js"></script>
<script src="assets/plugins/charts/pie-chart/jquery.easy-pie-chart.js"></script>
<script src="assets/plugins/forms/icheck/jquery.icheck.js"></script>
<script src="assets/plugins/forms/tags/jquery.tagsinput.js"></script>
<script src="assets/plugins/forms/tinymce/tinymce.min.js"></script>
<script src="assets/plugins/misc/highlight/highlight.pack.js"></script>
<script src="assets/plugins/misc/countTo/jquery.countTo.js"></script>
<script src="assets/plugins/ui/tabdrop/bootstrap-tabdrop.js"></script>
<script src="assets/plugins/ui/slider/bootstrap-slider.js"></script>
<script src="assets/plugins/ui/progressbar/jquery.circliful.js"></script>
<script src="assets/js/jquery.sprFlat.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/pages/elements.js"></script>
</body>
</html>