<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="">
    <meta name="keywords" content="thema bootstrap template, thema admin, bootstrap, admin template, bootstrap admin">

    <meta name="author" content="LanceCoder">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="shortcut icon" href="">
    <title>Thema Admin Boostrap Template</title>

    <!-- Start Global plugin css -->
    <link href="../../assets/css/global-plugins.css" rel="stylesheet">
    <link href="../../assets/vendors/jquery-icheck/skins/all.css" rel="stylesheet" />
    <!-- <link href="../../assets/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/css/bootstrap-reset.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/font-awesome/css/font-awesome.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/pe-icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet" /> -->
    <!-- <link href="../../assets/vendors/pe-icon-7-stroke/css/helper.css" rel="stylesheet"/> -->
    <!-- <link href="../../assets/vendors/jquery-notific8/jquery.notific8.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/line-icons/line-icons.css" rel="stylesheet" /> -->
    <!-- <link href="../../assets/vendors/jquery-ui/jquery-ui.min.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/dropdowns-enhancement/css/dropdowns-enhancement.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/hover/hover.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/animate/animate.css" rel="stylesheet"> -->
    <!-- <link href="../../assets/vendors/tooltipster/css/tooltipster.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="../../assets/vendors/tooltipster/css/themes/tooltipster-light.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="../../assets/vendors/tooltipster/css/themes/tooltipster-noir.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="../../assets/vendors/tooltipster/css/themes/tooltipster-punk.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="../../assets/vendors/tooltipster/css/themes/tooltipster-shadow.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="../../assets/vendors/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet" /> -->
    <!-- End Global plugin css -->
    

    <!-- This page plugin css start -->
    <link href="../../assets/vendors/maps/css/jquery-jvectormap-2.0.1.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/vendors/morris-chart/morris.css" rel="stylesheet" >
    <link href="../../assets/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
    <link href="../../assets/vendors/jquery-ricksaw-chart/css/rickshaw.css" rel="stylesheet"/>
    <link href="../../assets/css/flot-chart.css" rel="stylesheet"/>
    <link href="../../assets/vendors/c3-chart/c3.min.css" rel="stylesheet" type="text/css">
    <!-- This page plugin css end -->

    <!-- Custom styles for this template -->
    <link href="../../assets/css/theme.css" rel="stylesheet">
    <link href="../../assets/css/style-responsive.css" rel="stylesheet"/>
    <link href="../../assets/css/class-helpers.css" rel="stylesheet"/>

    <!--Color schemes-->
    <link href="../../assets/css/colors/green.css" rel="stylesheet">
    <link href="../../assets/css/colors/turquoise.css" rel="stylesheet">
    <link href="../../assets/css/colors/blue.css" rel="stylesheet">
    <link href="../../assets/css/colors/amethyst.css" rel="stylesheet">
    <link href="../../assets/css/colors/cloud.css" rel="stylesheet">
    <link href="../../assets/css/colors/sun-flower.css" rel="stylesheet">
    <link href="../../assets/css/colors/carrot.css" rel="stylesheet">
    <link href="../../assets/css/colors/alizarin.css" rel="stylesheet">
    <link href="../../assets/css/colors/concrete.css" rel="stylesheet">
    <link href="../../assets/css/colors/wet-asphalt.css" rel="stylesheet">

    <!--Fonts-->
    <link href="../../assets/fonts/Indie-Flower/indie-flower.css" rel="stylesheet" />
    <link href="../../assets/fonts/Open-Sans/open-sans.css?family=Open+Sans:300,400,700" rel="stylesheet" />

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]>
    <script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<!--
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Thema Color Schemes
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Just add the attribute value to the attribute ID in <body> element
* List of color scheme values that supported to this theme
    - default-scheme - the default is green color
    - alizarin-scheme
    - amethyst-scheme
    - blue-scheme
    - carrot-scheme
    - cloud-scheme
    - concrete-scheme
    - sun-flower-scheme
    - turquoise-scheme
    - wet-asphalt-scheme

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-->


<!--
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Thema Layout Options
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Lists of layout options just follow the instructions if you want to use this feature
    > Boxed Page
        - Just add class "fixed-width-unfixed-header" in <body> element 
        - and add class "unfixed-header" also in  <div class="leftside-navigation"> just search "leftside-navigation"
        - and add class also "unfixed-header" to the <section id="main-content"> element just search it
        
    > Boxed Page + Fixed Header
        - Just add class "fixed-width" in <body> element
        - and add class also "boxed-page-fixed-header" to the <section id="main-content"> element just search it

    > Boxed Page + No sidebar
        - Just add class "fixed-width-unfixed-header no-sidebar" in <body> element 
        - and add class also "unfixed-header merge-left" to the <section id="main-content"> element just search it
    
    > Boxed Page + No sidebar + Fixed header
        - Just add class "fixed-width no-sidebar" in <body> element
        - and add class also "merge-left" to the <section id="main-content"> element just search it

    > Full width + Unfixed header
        - Just add class "full-content-unfixed-header" in <body> element
        - and add class also "merge-left" to the <section id="main-content"> element just search it 
    
    > Right Sidebar
        - Just follow the sample page
        - the important to do is replace "<section id="main-content">" to "<section id="main-content-right">"

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-->
<body id="default-scheme" class="theme-sidebar-2 theme-dark-1">

    <!--======== Start Style Switcher ========-->    
    <i class="style-switcher-btn fa fa-cogs hidden-xs"></i>
    <div class="style-switcher">
        <div class="style-swticher-header">
            <div class="style-switcher-heading fg-white">Color Switcher</div>            
            <div class="theme-close"><i class="icon-close"></i></div>
        </div>

        <div class="style-swticher-body">
            <ul class="list-unstyled">
                <li class="theme-default theme-active" data-style="default"></li>
                <li class="theme-turquoise" data-style="turquoise"></li>
                <li class="theme-blue" data-style="blue"></li>
                <li class="theme-amethyst" data-style="amethyst"></li>
                <li class="theme-cloud" data-style="cloud"></li>
                <li class="theme-sun-flower" data-style="sun-flower"></li>
                <li class="theme-carrot" data-style="carrot"></li>
                <li class="theme-alizarin" data-style="alizarin"></li>
                <li class="theme-concrete" data-style="concrete"></li>
                <li class="theme-wet-ashphalt" data-style="wet-ashphalt"></li>
            </ul>         
        </div>
    </div><!--/style-switcher-->
    <!--======== End Style Switcher ========-->

    <section id="container">

        <!--header start-->
        <header class="header fixed-top clearfix">

            <!--logo start-->
            <div class="brand">

                <a href="index.html" class="logo">
                    Thema Admin
                </a>
                <div class="sidebar-toggle-box">
                    <div class="fa fa-bars"></div>
                </div>
            </div>
            <!--logo end-->

            <!-- 
                *****************************
                ** Start of top navigation **
                *****************************
             -->
            <div class="top-nav">

                <ul class="nav navbar-nav navbar-left" style="margin-left:30px;">
                    <li>
                        <a href="javascript:void(0)" class="btn-menu-grid" title="Menu Grid">
                            <span class="icon-grid"></span>
                        </a>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            Dropdown
                            <span class=" fa fa-angle-down" style="font-size:12px;"></span>
                        </a>
                        <ul class="dropdown-menu animated fadeInUp pull-right">
                            <li>
                                <a href="javascript:void(0);" class="hvr-bounce-to-right">  Submenu 1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="hvr-bounce-to-right">
                                    <span class="badge bg-red pull-right">20%</span>
                                    <span>Submenu 2</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="hvr-bounce-to-right">Submenu 3</a>
                            </li>
                            <li><a href="login.html" class="hvr-bounce-to-right">Submenu 4</a>
                            </li>
                        </ul>
                    </li>
                </ul>    
                
                <ul class="nav navbar-nav navbar-right">
                    <li class="search-box">
                        <input type="text" class="form-control search" placeholder=" Search">
                    </li>
                    <li role="presentation" class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
                            <span class="pe-7s-mail" style="font-size:22.9px;"></span>
                            <span class="badge bg-color label-danger">6</span>
                        </a>
                        <ul id="menu" class="dropdown-menu list-unstyled msg_list animated fadeInUp" role="menu">
                            <li>
                                <a class="hvr-bounce-to-right">
                                    <span class="image">
                                        <img src="../../assets/images/profile.jpg" alt="Profile Image" />
                                    </span>
                                    <span>
                                        <span>John Smith</span>
                                        <span class="time">3 mins ago</span>
                                    </span>
                                    <span class="message">
                                        Film festivals used to be do-or-die moments for movie makers. They were where... 
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="hvr-bounce-to-right">
                                    <span class="image">
                                        <img src="../../assets/images/profile.jpg" alt="Profile Image" />
                                    </span>
                                    <span>
                                        <span>John Smith</span>
                                        <span class="time">3 mins ago</span>
                                    </span>
                                    <span class="message">
                                        Film festivals used to be do-or-die moments for movie makers. They were where... 
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="hvr-bounce-to-right">
                                    <span class="image">
                                        <img src="../../assets/images/profile.jpg" alt="Profile Image" />
                                    </span>
                                    <span>
                                        <span>John Smith</span>
                                        <span class="time">3 mins ago</span>
                                    </span>
                                    <span class="message">
                                        Film festivals used to be do-or-die moments for movie makers. They were where... 
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="hvr-bounce-to-right">
                                    <span class="image">
                                        <img src="../../assets/images/profile.jpg" alt="Profile Image" />
                                    </span>
                                    <span>
                                        <span>John Smith</span>
                                        <span class="time">3 mins ago</span>
                                    </span>
                                    <span class="message">
                                        Film festivals used to be do-or-die moments for movie makers. They were where... 
                                    </span>
                                </a>
                            </li>
                            <li class='top-nav-li-see-all-alerts'>
                                <div class="text-center">
                                    <a href="inbox.html">
                                        <strong>See All Alerts</strong>
                                        <i class="fa fa-angle-right"></i>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="javascript:void(0);" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <img src="../../assets/images/profile.jpg" alt="image">John Doe
                            <span class=" fa fa-angle-down"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-usermenu animated fadeInUp pull-right">
                            <li>
                                <a href="app-pages/page-profile-dashboard.html" class="hvr-bounce-to-right">  Profile</a>
                            </li>
                            <li>
                                <a href="app-pages/page-profile-settings.html" class="hvr-bounce-to-right">
                                    <span class="badge bg-red pull-right">50%</span>
                                    <span>Settings</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="hvr-bounce-to-right">Help</a>
                            </li>
                            <li><a href="app-pages/page-login-2.html" class="hvr-bounce-to-right"><i class=" icon-login pull-right"></i> Log Out</a>
                            </li>
                        </ul>
                    </li>

                </ul>

            </div>

            <!-- 
                *****************************
                *** End of top navigation ***
                *****************************
             -->

        </header>    <!--header end-->

        <!--sidebar start-->
        <aside>
            <div id="sidebar" class="nav-collapse md-box-shadowed">
                <!-- sidebar menu start-->
                <div class="leftside-navigation leftside-navigation-scroll">
                    <ul class="sidebar-menu" id="nav-accordion">
                        <li class="sidebar-profile">

                            <div class="profile-options-container">
                                <p class="text-right profile-options"><span class="profile-options-close pe-7s-close fa-2x font-bold"></span></p>

                                <div class="profile-options-list animated zoomIn">
                                    <p><a href="app-pages/page-profile-dashboard.html">Profile</a></p>
                                    <p><a href="app-pages/page-profile-settings.html">Settings</a></p>
                                    <p><a href="javascript:void(0)">Help</a></p>
                                    <p><a href="app-pages/page-login-2.html">Log Out</a></p>
                                </div>
                                
                            </div>
                            
                            <div class="profile-main">
                                <p class="text-right profile-options"><i class="profile-options-open icon-options-vertical fa-2x"></i></p>
                                <p class="image">
                                    <img alt="image" src="../../assets/images/profile.jpg" width="80">
                                    <span class="status"><i class="fa fa-circle text-success"></i></span>
                                </p>
                                <p>
                                    <span class="name">John Doe</span><br>
                                    <span class="position" style="font-family: monospace;">Administrator</span>
                                </p>
                            </div>
                            
                        </li>
                        <li class=' '><a href="#" class="hvr-bounce-to-right-sidebar-parent active"><span class='icon-sidebar icon-home fa-2x'></span><span>Dashboard</span></a>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar icon-screen-desktop fa-2x'></span><span>Layouts</span></a>
                            <ul class='sub'>
                                <li class="sub-menu"><a href="javascript:void(0);">Boxed Page</a>
                                    <ul class='sub'>
                                        <li><a href='layouts/boxed_page.html'>Default</a>
                                        </li>
                                        <li><a href='layouts/boxed_page_fixed_header.html'>Default + Fixed Header</a>
                                        </li>
                                        <li><a href='layouts/boxed_page_no_sidebar.html'>No sidebar</a>
                                        </li>
                                        <li><a href='layouts/boxed_page_no_sidebar_fixed_header.html'>No sidebar + Fixed Header</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href='layouts/full_width_content.html'>Full width content</a>
                                </li>
                                <li><a href='layouts/blank.html'>Blank Page</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-portfolio fa-2x'></span><span>UI Elements</span></a>
                            <ul class='sub'>
                                <li><a href='ui-elements/class-helpers.html'>Class Helpers</a>
                                </li>
                                <li><a href='ui-elements/accordions.html'>Accordions</a>
                                </li>
                                <li><a href='ui-elements/alerts.html'>Alerts</a>
                                </li>
                                <li><a href='ui-elements/buttons.html'>Buttons</a>
                                </li>
                                <li><a href='ui-elements/draggable-portlet.html'>Draggable Portlet</a>
                                </li>
                                <li><a href='ui-elements/grids.html'>Grids</a>
                                </li>
                                <li><a href='ui-elements/labels-badges.html'>Labels and Badges</a>
                                </li>
                                <li><a href='ui-elements/list-group.html'>List Group</a>
                                </li>
                                <li><a href='ui-elements/modal.html'>Modal</a>
                                </li>
                                <li><a href='ui-elements/nestable.html'>Nestable</a>
                                </li>
                                <li><a href='ui-elements/pagination.html'>Pagination</a>
                                </li>
                                <li><a href='ui-elements/panels.html'>Panels</a>
                                </li>
                                <li><a href='ui-elements/progressbar.html'>Progress Bar</a>
                                </li>
                                <li><a href='ui-elements/tabs.html'>Tabs</a>
                                </li>
                                <li><a href='ui-elements/tooltips_popover.html'>Tooltips and Popover</a>
                                </li>
                                <li><a href='ui-elements/typography.html'>Typography</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-display2 fa-2x'></span><span>UI Admin</span></a>
                            <ul class='sub'>
                                <li><a href='ui-admin/animatecss.html'>Animate CSS</a>
                                </li>
                                <li><a href='ui-admin/hovercss.html'>Hover CSS</a>
                                </li>
                                <li><a href='ui-admin/hover-ideas.html'>Hover Ideas</a>
                                </li>
                                <li><a href='ui-admin/icheck.html'>iCheck</a>
                                </li>
                                <li><a href='ui-admin/tooltipster.html'>Tooltipster</a>
                                </li>
                                <li><a href='ui-admin/sweetalert.html'>Sweet Alert</a>
                                </li>
                                <li><a href='ui-admin/counter.html'>Counter</a>
                                </li>
                                <li><a href='ui-admin/word-rotator.html'>Word Rotator</a>
                                </li>
                                <li><a href='ui-admin/wow-animations.html'>Wow animations</a>
                                </li>
                                <li><a href='ui-admin/owl-carousel.html'>Owl Carousel</a>
                                </li>
                                <li><a href='ui-admin/magnific-popup.html'>Magnific Popup</a>
                                </li>
                            </ul>
                        </li>
                        <li class=' '><a href="ui-widgets/widgets.html" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-ribbon fa-2x'></span><span>UI Widgets <span class="badge label-info">23</span></span></a>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-note fa-2x'></span><span>Fonts</span></a>
                            <ul class='sub'>
                                <li><a href='fonts/font-awesome.html'>Font Awesome</a>
                                </li>
                                <li><a href='fonts/font-icon-7stroke.html'>Pe Icon 7 Stroke </a>
                                </li>
                                <li><a href='fonts/font-simple-line-icons.html'>Simple Line Icons</a>
                                </li>
                                <li><a href='fonts/font-glyphicons.html'>Glyphicons</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-box1 fa-2x'></span><span>Data Tables</span></a>
                            <ul class='sub'>
                                <li><a href='data-tables/basic-table.html'>Basic Table</a>
                                </li>
                                <li><a href='data-tables/responsive-table.html'>Responsive Table</a>
                                </li>
                                <li><a href='data-tables/dynamic-table.html'>Dynamic Table</a>
                                </li>
                                <li><a href='data-tables/editable-table.html'>Editable Table</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-calculator      fa-2x'></span><span>UI Form</span></a>
                            <ul class='sub'>
                                <li><a href='ui-form/form-elements.html'>Form Elements</a>
                                </li>
                                <li><a href='ui-form/advanced-form.html'>Advanced Components</a>
                                </li>
                                <li><a href='ui-form/form-wizard.html'>Form Wizard</a>
                                </li>
                                <li><a href='ui-form/form-validation.html'>Form Validation</a>
                                </li>
                                <li><a href='ui-form/advanced-form-upload.html'>Advanced Form Upload</a>
                                </li>
                                <li><a href='ui-form/x-editable.html'>X-editable</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-albums fa-2x'></span><span>Form Templates <span class="badge label-info">20</span></span></a>
                            <ul class='sub'>
                                <li class="sub-menu"><a href="javascript:void(0);">Business</a>
                                    <ul class='sub'>
                                        <li><a href='form-templates/business-bug-tracker.html'>Bug Tracker</a>
                                        </li>
                                        <li><a href='form-templates/business-client-details.html'>Client Details</a>
                                        </li>
                                        <li><a href='form-templates/business-complaints.html'>Complaints</a>
                                        </li>
                                        <li><a href='form-templates/business-tpl-contact-us.html'>Contact Us</a>
                                        </li>
                                        <li><a href='form-templates/business-email-subscription.html'>Email Subscription</a>
                                        </li>
                                        <li><a href='form-templates/business-software-evaluation.html'>Software Evaluation</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Human Resources</a>
                                    <ul class='sub'>
                                        <li><a href='form-templates/hr-employee-emergency-information.html'>Employee Emergency Information</a>
                                        </li>
                                        <li><a href='form-templates/hr-employee-evaluation.html'>Employee Evaluation</a>
                                        </li>
                                        <li><a href='form-templates/hr-employee-satisfaction.html'>Employee Satisfaction</a>
                                        </li>
                                        <li><a href='form-templates/hr-job-application.html'>Job Application</a>
                                        </li>
                                        <li><a href='form-templates/hr-resignation-form.html'>Resignation Form</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Requests</a>
                                    <ul class='sub'>
                                        <li><a href='form-templates/requests-leave-application.html'>Leave Application</a>
                                        </li>
                                        <li><a href='form-templates/requests-product-review.html'>Prodoct Review</a>
                                        </li>
                                        <li><a href='form-templates/requests-software-request.html'>Software Request</a>
                                        </li>
                                        <li><a href='form-templates/requests-testimonial.html'>Testimonial</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Construction</a>
                                    <ul class='sub'>
                                        <li><a href='form-templates/construction-client-review.html'>Client Review</a>
                                        </li>
                                        <li><a href='form-templates/construction-location-updates.html'>Location Updates</a>
                                        </li>
                                        <li><a href='form-templates/construction-on-site-inquiries.html'>On-site Inquiries</a>
                                        </li>
                                        <li><a href='form-templates/construction-status-updates.html'>Status Updates</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Non-profit</a>
                                    <ul class='sub'>
                                        <li><a href='form-templates/non-profit-donation-form.html'>Donation Form</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-mail fa-2x'></span><span>Mail</span></a>
                            <ul class='sub'>
                                <li><a href='mail/email.html'>Emails</a>
                                </li>
                                <li><a href='mail/create_email.html'>Create Email</a>
                                </li>
                                <li><a href='mail/view_email.html'>View Email</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-graph fa-2x'></span><span>Charts</span></a>
                            <ul class='sub'>
                                <li><a href='charts/chart-morris.html'>Morris</a>
                                </li>
                                <li><a href='charts/chart-js.html'>Chartjs</a>
                                </li>
                                <li><a href='charts/chart-flotchart.html'>Flot Charts</a>
                                </li>
                                <li><a href='charts/chart-c3.html'>C3 Chart</a>
                                </li>
                                <li><a href='charts/chart-sparkline.html'>Sparkline</a>
                                </li>
                                <li><a href='charts/chart-ricksaw.html'>Ricksaw</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-map-marker fa-2x'></span><span>Maps <span class="badge label-info">22</span></span></a>
                            <ul class='sub'>
                                <li class="sub-menu"><a href="javascript:void(0);">Google Map</a>
                                    <ul class='sub'>
                                        <li><a href='maps/google-map-basic.html'>Basic Map</a>
                                        </li>
                                        <li><a href='maps/google-map-events.html'>Map Events</a>
                                        </li>
                                        <li><a href='maps/google-map-markers.html'>Map Makers</a>
                                        </li>
                                        <li><a href='maps/google-map-geolocation.html'>Map Geolocation</a>
                                        </li>
                                        <li><a href='maps/google-map-geocoding.html'>Map Geocoding</a>
                                        </li>
                                        <li><a href='maps/google-map-polylines.html'>Map Polylines</a>
                                        </li>
                                        <li><a href='maps/google-map-overlays.html'>Map Overlays</a>
                                        </li>
                                        <li><a href='maps/google-map-polygon.html'>Map Polygon</a>
                                        </li>
                                        <li><a href='maps/google-map-routes.html'>Map Routes</a>
                                        </li>
                                        <li><a href='maps/google-map-advanced-routes.html'>Map Advanced Routes</a>
                                        </li>
                                        <li><a href='maps/google-map-static.html'>Map Static</a>
                                        </li>
                                        <li><a href='maps/google-map-static-markers.html'>Map Static Markers</a>
                                        </li>
                                        <li><a href='maps/google-map-static-polylines.html'>Map Static Polylines</a>
                                        </li>
                                        <li><a href='maps/google-map-context-menu.html'>Map Context Menu</a>
                                        </li>
                                        <li><a href='maps/google-map-geofences.html'>Map Geofences</a>
                                        </li>
                                        <li><a href='maps/google-map-custom-controls.html'>Map Custom Controls</a>
                                        </li>
                                        <li><a href='maps/google-map-fusion-table-layers.html'>Map Fusion Tables layers</a>
                                        </li>
                                        <li><a href='maps/google-map-kml-georss-layers.html'>Map KML and GeoRSS layers</a>
                                        </li>
                                        <li><a href='maps/google-map-street-view-panoramas.html'>Map Street View Panoramas</a>
                                        </li>
                                        <li><a href='maps/google-map-interacting-ui.html'>Map Interacting with UI</a>
                                        </li>
                                        <li><a href='maps/google-map-clustering.html'>Map Clustering</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href='maps/vector-map.html'>Vector Map</a>
                                </li>
                            </ul>
                        </li>
                        <li class='sub-menu '><a href="1" class="hvr-bounce-to-right-sidebar-parent"><span class='icon-sidebar pe-7s-box2 fa-2x'></span><span>App Pages <span class="badge label-success">45</span></span></a>
                            <ul class='sub'>
                                <li><a href='app-pages/page-user-management.html'>User Management</a>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">User Profile</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-profile-dashboard.html'>Profile Dashboard</a>
                                        </li>
                                        <li><a href='app-pages/page-profile-about.html'>Profile About</a>
                                        </li>
                                        <li><a href='app-pages/page-profile-timeline.html'>Profile Timeline</a>
                                        </li>
                                        <li><a href='app-pages/page-profile-projects.html'>Profile Projects</a>
                                        </li>
                                        <li><a href='app-pages/page-profile-gallery.html'>Profile Gallery</a>
                                        </li>
                                        <li><a href='app-pages/page-profile-settings.html'>Profile Settings</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Project Management</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-project-all.html'>All Projects</a>
                                        </li>
                                        <li><a href='app-pages/page-project-view.html'>View Projects</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Services</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-services-1.html'>Services 1</a>
                                        </li>
                                        <li><a href='app-pages/page-services-2.html'>Services 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Login &amp; Registration</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-registration-1.html'>Registration 1</a>
                                        </li>
                                        <li><a href='app-pages/page-registration-2.html'>Registration 2</a>
                                        </li>
                                        <li><a href='app-pages/page-login-1.html'>Login 1</a>
                                        </li>
                                        <li><a href='app-pages/page-login-2.html'>Login 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Errors</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-error-404.html'>404 Error</a>
                                        </li>
                                        <li><a href='app-pages/page-error-500.html'>500 Error</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Timelines</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-timeline-1.html'>Timeline 1</a>
                                        </li>
                                        <li><a href='app-pages/page-timeline-2.html'>Timeline 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Forum</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-main-forum.html'>Main</a>
                                        </li>
                                        <li><a href='app-pages/page-forum-details.html'>Details</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Email Templates</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-email-template-1.html'>Email Templates 1</a>
                                        </li>
                                        <li><a href='app-pages/page-email-template-2.html'>Email Templates 2</a>
                                        </li>
                                        <li><a href='app-pages/page-email-template-3.html'>Email Templates 3</a>
                                        </li>
                                        <li><a href='app-pages/page-email-template-4.html'>Email Templates 4</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Ecommerce</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-ecommerce-dashboard.html'>Dashboard</a>
                                        </li>
                                        <li><a href='app-pages/page-ecommerce-products.html'>Product Lists</a>
                                        </li>
                                        <li><a href='app-pages/page-ecommerce-view-product.html'>View Product</a>
                                        </li>
                                        <li><a href='app-pages/page-ecommerce-cart-summary.html'>Cart Summary</a>
                                        </li>
                                        <li><a href='app-pages/page-ecommerce-checkout.html'>Checkout</a>
                                        </li>
                                        <li><a href='app-pages/page-ecommerce-product-envoice.html'>Envoice</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sub-menu"><a href="javascript:void(0);">Contact</a>
                                    <ul class='sub'>
                                        <li><a href='app-pages/page-contact-1.html'>Contact 1</a>
                                        </li>
                                        <li><a href='app-pages/page-contact-2.html'>Contact 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href='app-pages/page-full-calendar.html'>Full Calendar</a>
                                </li>
                                <li><a href='app-pages/page-people-directory.html'>Contact Management</a>
                                </li>
                                <li><a href='app-pages/page-search-results-1.html'>Search Results</a>
                                </li>
                                <li><a href='app-pages/page-faqs.html'>FAQs</a>
                                </li>
                                <li><a href='app-pages/page-about-us-1.html'>About Us</a>
                                </li>
                                <li><a href='app-pages/page-coming-soon.html'>Coming Soon</a>
                                </li>
                                <li><a href='app-pages/page-pricing-tables.html'>Pricing Tables</a>
                                </li>
                                <li><a href='app-pages/page-lock-screen.html'>Lock Screen</a>
                                </li>
                                <li><a href='app-pages/page-media-gallery.html'>Media Gallery</a>
                                </li>
                                <li><a href='app-pages/page-privacy-policy.html'>Privacy Policy</a>
                                </li>
                                <li><a href='app-pages/page-terms-of-condition.html'>Terms of Condition</a>
                                </li>
                            </ul>
                        </li>
                   
                    </ul>           
                </div>
                <!-- sidebar menu end-->
            </div>
        </aside>    <!--sidebar end-->

        <!-- /menu footer buttons -->
        
        <!--<div class="sidebar-footer hidden-small">
            <a class="tooltip-settings" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
            </a>
            <a class="tooltip-fullscreen" title="Full Screen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
            </a>
            <a class="tooltip-resize-fullscreen" title="Resize Screen" style='display:none'>
                <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
            </a>
            <a class="tooltip-lock" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
            </a>
            <a class="tooltip-logout" title="Logout">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
            </a>
        </div>-->    <!-- /menu footer buttons -->

        <!--main content start-->
        <section id="main-content">

                
            <section class="wrapper">

                    
                <!--======== Grid Menu Start ========-->
                <div id="grid-menu">
                    <div class="color-overlay grid-menu-overlay">
                        <div class="grid-icon-wrap grid-icon-effect-8">
                            <a href="#" class="grid-icon icon-envelope font-size-50 turquoise"></a>
                            <a href="#" class="grid-icon icon-user font-size-50 teal"></a>
                            <a href="#" class="grid-icon icon-support font-size-50 peter-river"></a>
                            <a href="#" class="grid-icon icon-settings font-size-50 light-blue"></a>
                            <a href="#" class="grid-icon icon-picture font-size-50 orange"></a>
                            <a href="#" class="grid-icon icon-camrecorder font-size-50 light-orange"></a>
                        </div>
                    </div>
                </div>                
                <!--======== Grid Menu End ========-->

                <!--======== Page Title and Breadcrumbs Start ========-->
                <div class="top-page-header">
                    
                    <div class="page-title">
                        <h2>Thema Dashboard</h2>
                        <small>Your admin dashboard.</small>
                    </div>
                    <div class="page-breadcrumb">
                        <nav class="c_breadcrumbs">
                            <ul>
                                <li><a href="#">Thema</a></li>
                                <li class="active"><a href="#">Dashboard</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="right-menu pull-right">
                        Reporting Period
                        <div class="btn-group">
                          <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Last 10 days <span class="caret"></span></button>
                          <ul class="dropdown-menu bullet pull-middle animated pulse">
                            <li>
                              <input type="radio" id="ex1_1" name="ex1" value="1" checked>
                              <label for="ex1_1">Last 10 days</label>
                            </li>
                            <li>
                              <input type="radio" id="ex1_2" name="ex1" value="2">
                              <label for="ex1_2">Last 20 days</label>
                            </li>
                            <li>
                              <input type="radio" id="ex1_3" name="ex1" value="3">
                              <label for="ex1_3">Last 30 days</label>
                            </li>
                          </ul>
                        </div>

                    </div>

                    <div class="pull-right toggle-right-sidebar">
                        <span class="fa fa-outdent fa-2x title-open-right-sidebar"></span>
                    </div>

                </div>
                <!--======== Page Title and Breadcrumbs End ========-->


                <div class="row">   

                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6">

                                <div class="widget">
                                    <div class="widget-content bg-white">
                                        
                                        <div class="icon bg-sun-flower padding-14 margin-left-7">
                                            <span class="fa fa-tasks font-size-30 fg-white"></span>
                                        </div>

                                        <div class="value bg-white padding-10">
                                            <span class="font-size-30 counter">100</span>
                                            <span class="text-uppercase"><sup>Tasks</sup></span>
                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div><!--/col-col-4-->

                            <div class="col-md-6">

                                <div class="widget">
                                    <div class="widget-content bg-white">
                                        
                                        <div class="icon bg-belize-hole padding-14 margin-left-7">
                                            <span class="fa fa-dollar font-size-30 fg-white"></span>
                                        </div>

                                        <div class="value bg-white padding-10">
                                            <span class="font-size-30 counter">540</span>
                                            <span class="text-uppercase"><sup>Sales</sup></span>
                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div><!--/col-col-4-->

                            <div class="col-md-6">

                                <div class="widget">
                                    <div class="widget-content bg-white">
                                        
                                        <div class="icon bg-green padding-14 margin-left-7">
                                            <span class="fa fa-comment font-size-30 fg-white"></span>
                                        </div>

                                        <div class="value bg-white padding-10">
                                            <span class="font-size-30 counter">8</span>
                                            <span class="text-uppercase"><sup>Comments</sup></span>
                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div><!--/col-col-6-->

                            <div class="col-md-6">

                                <div class="widget">
                                    <div class="widget-content bg-white">
                                        
                                        <div class="icon bg-amethyst padding-14 margin-left-7">
                                            <span class="fa fa-envelope font-size-30 fg-white"></span>
                                        </div>

                                        <div class="value bg-white padding-10">
                                            <span class="font-size-30 counter">87</span>
                                            <span class="text-uppercase"><sup>Messages</sup></span>
                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div><!--/col-col-6-->
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12 col-sx-12">
                        <div class="widget">

                            <div class="social-style-1 padding-left-15 padding-right-15 margin-bottom-20">

                                <div class="row">

                                    <div class="col-md-6 bg-facebook padding-bottom-30 text-center">
                                        <div class="text-center">
                                            <p class="pull-left margin-top-20">
                                                <i class="fa fa-facebook fa-4x fg-white"></i>
                                            </p>

                                            <div class="social-overview">
                                                <span class="font-size-30 counter font-bold text-left fg-white">2100</span>
                                                <p class="margin-left-50 text-left fg-white">Fans</p>
                                            </div>
                                            
                                        </div>
                                    </div>

                                    <div class="col-md-6 bg-twitter padding-bottom-30 text-center">
                                        <div class="text-center">
                                            <p class="pull-left margin-top-20">
                                                <i class="fa fa-twitter fa-4x fg-white"></i>
                                            </p>

                                            <div class="social-overview">
                                                <span class="font-size-20 counter font-bold text-left fg-white">1500</span>
                                                <p class="margin-left-50 text-left fg-white">Followers</p>
                                            </div>
                                            
                                        </div>
                                    </div>

                                </div><!--/row-->

                                <div class="row">
 
                                    <div class="col-md-6 bg-rss padding-bottom-30 text-center">
                                        <div class="text-center">
                                            <p class="pull-left margin-top-20">
                                                <i class="fa fa-rss fa-4x fg-white"></i>
                                            </p>

                                            <div class="social-overview">
                                                <span class="font-size-30 counter font-bold text-left fg-white">5000</span>
                                                <p class="margin-left-50 text-left fg-white">Subscribers</p>
                                            </div>
                                            
                                        </div>
                                    </div>

                                    <div class="col-md-6 bg-youtube padding-bottom-30 text-center">
                                        <div class="text-center">
                                            <p class="pull-left margin-top-20">
                                                <i class="fa fa-youtube fa-4x fg-white"></i>
                                            </p>

                                            <div class="social-overview">
                                                <span class="font-size-30 counter font-bold text-left fg-white">4300</span>
                                                <p class="margin-left-50 text-left fg-white">Viewers</p>
                                            </div>
                                            
                                        </div>
                                    </div>

                                </div><!--/row-->

                            </div><!--/widget-content-->
                            
                        </div><!--/widget-->
                    </div>

                </div><!--/row-->

                    
                <!--======== Widget Start ========-->
                <div class="row">

                    <div class="col-md-12">

                        <div class="widget">
                            <div class="widget-header bg-white">
                                <h3>STATISTICS</h3>

                                <div class="daterange daterange-text add-date-ranges pull-right" id="daterange-4" data-format="MMMM D, YYYY" data-start-date="February 19, 2015" data-end-date="March 19, 2015" style="    margin-top: -24px;">
                                    <i class="fa fa-calendar"></i>
                                    <span>February 19, 2015 - March 19, 2015</span>
                                </div>
                            </div>
                            <div class="widget-content bg-white">
                                
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="chart-widget">
                                            <div class="chart-widget-content" style="width:100%" id="flot-chart-stats"></div>
                                        </div>
                                        <div class="row" style="border-top:1px solid rgb(105, 81, 102);">
                                            <div style="margin-top:10px;">
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Project</span>
                                                    <h2 class="counter">11,120</h2>
                                                </div><!--/.col-md-4-->
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Selling</span>
                                                    <h2><span class="counter">21,137</span></h2>
                                                </div><!--/.col-md-4-->
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Orders</span>
                                                    <h2><span class="counter">1,401</span></h2>
                                                </div><!--/.col-md-4-->
                                            </div>
                                            
                                        </div>

                                    </div><!--/.col-md-6-->
                                </div><!--/row-->

                            </div><!--/widget-content--> 
                        </div><!--/widget-->

                    </div><!--/.col-md-12-->

                </div><!--/.row-->
                <!--======== Widget End ========-->


                <!--======== Widget Start ========-->
                <div class="row">
                    <div class="col-md-6">
                        <div class="widget">
                            <div class="widget-header bg-white">
                                <h3>ANALYTICS</h3>
                            </div>
                            <div class="widget-content bg-white">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="chart-widget">
                                            <div class="chart-widget-content" id="flot-pie-donut-analytics"  style="height:312px"></div>
                                            
                                            <div class="row" style="border-top:1px solid rgb(105, 81, 102);">
                                                <div style="margin-top:10px;">
                                                    <div class="col-md-2 mobile-text-center">
                                                        <span><b>Chrome</b></span>
                                                        <h5 class="counter">55,412</h5>
                                                    </div><!--/.col-md-2-->
                                                    <div class="col-md-2 mobile-text-center">
                                                        <span><b>Firefox</b></span>
                                                        <h5 class="counter">12,112</h5>
                                                    </div><!--/.col-md-2-->
                                                    <div class="col-md-2 mobile-text-center">
                                                        <span><b>IE</b></span>
                                                        <h5 class="counter">23,238</h5>
                                                    </div><!--/.col-md-2-->
                                                    <div class="col-md-2 mobile-text-center">
                                                        <span><b>Opera</b></span>
                                                        <h5 class="counter">13,221</h5>
                                                    </div><!--/.col-md-2-->
                                                    <div class="col-md-2 mobile-text-center">
                                                        <span><b>Android</b></span>
                                                        <h5 class="counter">20,873</h5>
                                                    </div><!--/.col-md-2-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!--/widget-->
                    </div><!--/col-md-6-->

                    <div class="col-md-6">
                        <div class="widget">
                            <div class="widget-header bg-white">
                                <h3>TOP PRODCUTS</h3>
                            </div>
                            <div class="widget-content bg-white">
                                
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="chart-widget">
                                            <div class="chart-widget-content" style="height:240px" id="flot-bar"></div>
                                        </div>
                                        <div class="row" style="border-top:1px solid rgb(105, 81, 102);">
                                            <div style="margin-top:10px;">
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Product 1</span>
                                                    <h2 class="counter">121,411</h2>
                                                </div><!--/.col-md-4-->
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Product 2</span>
                                                    <h2><span class="counter">87,341</span></h2>
                                                </div><!--/.col-md-4-->
                                                <div class="col-md-4 mobile-text-center">
                                                    <span>Product 3</span>
                                                    <h2><span class="counter">65,192</span></h2>
                                                </div><!--/.col-md-4-->
                                            </div>
                                            
                                        </div>

                                    </div><!--/.col-md-6-->
                                </div><!--/row-->

                            </div><!--/widget-content--> 
                        </div><!--/widget-->
                    </div>



                </div><!--/.row-->
                <!--======== Widget End ========-->


                <div class="row">

                    <div class="col-md-4">

                        <!--======== Server Load Start ========-->
                        <div class="row">

                            <div class="col-md-12">

                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>SERVER LOAD</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="server-load">
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <h3><span class="counter">400</span> GB</h3>
                                                </div>
                                                <div class="col-xs-6">
                                                    <p class="font-size-26 margin-top-5"><span class="icon-layers pull-right"></span></p>
                                                </div>
                                            </div>
                                            
                                            <div style="margin-left:-20px; margin-right:-20px;">
                                                <div class="progress progress-xs">
                                                    <div class="progress-bar bg-warning" role="progressbar" data-transitiongoal="30"></div>
                                                </div>

                                                <p style="margin-top:-10px; margin-left:20px; margin-right:20px;"><span style="font-family: monospace;">400 GB of 8,000 GB used</span></p>
                                            </div>
                                            
                                            <div class="overflow-hidden" style="margin-left:-20px; margin-right:-20px; margin-bottom:-20px;">
                                                <div id="server_load_chart" class="wow zoomIn"> </div>
                                            </div> 
                                        </div>   

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div>
                            
                        </div><!--/.row-->
                        <!--======== Server Load End ========-->


                        <!--======== Weather Forecast Start ========-->
                        <div class="row">

                            <div class="col-md-12">
                                
                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>WEATHER FORECAST</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="row">
                                            <div class="col-md-12 text-center padding-10">
                                                <div class="weather-icon">
                                                    <span>
                                                        <canvas height="84" width="84" id="partly-cloudy-day"></canvas>
                                                    </span>
                                                </div>
                                                <div class="weather-temperature">
                                                    <b>Monday</b>, 07:30 AM
                                                    <span>F</span>
                                                    <span><b>C</b></span>
                                                </div>
                                                <div class="weather-text">
                                                    <h2>Manila</h2>
                                                    <p class="text-muted">Partly Cloudy Day</p>
                                                </div>

                                            </div>
                                        </div><!--/row-->

                                        <div class="clearfix"></div>
                                        <div class="row weather-days padding-left-10 padding-right-10">
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Mon</h2>
                                                    <h3 class="degrees">25</h3>
                                                    <span>
                                                        <canvas id="clear-day" width="32" height="32"></canvas>
                                                    </span>
                                                    <h5>15
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Tue</h2>
                                                    <h3 class="degrees">25</h3>
                                                    <canvas height="32" width="32" id="rain"></canvas>
                                                    <h5>12
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Wed</h2>
                                                    <h3 class="degrees">27</h3>
                                                    <canvas height="32" width="32" id="snow"></canvas>
                                                    <h5>14
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Thu</h2>
                                                    <h3 class="degrees">28</h3>
                                                    <canvas height="32" width="32" id="sleet"></canvas>
                                                    <h5>15
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Fri</h2>
                                                    <h3 class="degrees">28</h3>
                                                    <canvas height="32" width="32" id="wind"></canvas>
                                                    <h5>11
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                            <div class="col-xs-2">
                                                <div class="daily-weather">
                                                    <h2 class="day">Sat</h2>
                                                    <h3 class="degrees">26</h3>
                                                    <canvas height="32" width="32" id="cloudy"></canvas>
                                                    <h5>10
                                                        <i>km/h</i>
                                                    </h5>
                                                </div>
                                            </div><!--/col-xs-2-->
                                        </div><!--/row-->

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div>
                            
                        </div><!--/.row-->
                        <!--======== Weather Forecast End ========-->

                        <!--======== Chat Room Conversation Start ========-->
                        <div class="row">

                            <div class="col-md-12">
                                
                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>CHAT CONVERSATION</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="chat-conversation">
                                            <ul class="chat-msg-list padding-left-20 padding-right-20 padding-top-20">
                                                <li class="clearfix even">
                                                    <div class="chat-avatar">
                                                        <img src="../../assets/images/users/img4.jpg" alt="male" width="43">
                                                        
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="msg-text">
                                                            <i>John Doe</i>
                                                            <p>
                                                                Hello!
                                                            </p>
                                                        </div>
                                                        <p>
                                                            <span>Wednesday 10:00 pm</span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="clearfix odd">
                                                    <div class="chat-avatar">
                                                        <img src="../../assets/images/users/img3.jpg" alt="female" width="43">
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="msg-text">
                                                            <i>Jane Dane</i>
                                                            <p>
                                                                Hi, How are you? What about our next meeting?
                                                            </p>
                                                        </div>
                                                        <p>
                                                            <span>Wednesday 10:00 pm</span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="clearfix even">
                                                    <div class="chat-avatar">
                                                        <img src="../../assets/images/users/img4.jpg" alt="male" width="43">
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="msg-text">
                                                            <i>John Doe</i>
                                                            <p>
                                                                Yeah everything is fine
                                                            </p>
                                                        </div>
                                                        <p>
                                                            <span>Wednesday 10:00 pm</span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="clearfix odd">
                                                    <div class="chat-avatar">
                                                        <img src="../../assets/images/users/img3.jpg" alt="female" width="43">
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="msg-text">
                                                            <i>Jane Dane</i>
                                                            <p>
                                                                Wow that's great
                                                            </p>
                                                        </div>
                                                        <p>
                                                            <span>Wednesday 10:00 pm</span>
                                                        </p>
                                                    </div>
                                                </li>
                                            </ul><!--/chat-msg-list-->

                                            <div class="chat-conversation-action padding-10">
                                                <div class="row">
                                                    <div class="col-xs-9 padding-right-0 chat-input-wrapper">
                                                        <input type="text" class="form-control chat-input col-xs-8" placeholder="Your message here">
                                                    </div>
                                                    <div class="col-xs-3 padding-left-0 send-msg">
                                                        <button type="button" class="col-xs-4 btn btn-success btn-flat btn-block">Send</button>
                                                    </div>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div><!--/chat-conversation--> 

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div>
                            
                        </div><!--/.row-->
                        <!--======== Chat Room Conversation End ========-->


                    </div><!--/.col-md-4-->
                    

                    <div class="col-md-8 col-sm-8 col-xs-12">

                        <!--======== Visitors Location Start ========-->
                        <div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">

                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>VISITORS SUMMARY</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="row">
                                            <div class="col-md-4">
                                                <h4 class="margin-left-10"><span class="counter">125.7</span>k views from <span class="counter">60</span> countries</h4>

                                                <table class="countries_list wow zoomIn">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                United States
                                                                <div>
                                                                    <div class="progress progress-5 progress_sm">
                                                                        <div class="progress-bar bg-success" role="progressbar" data-transitiongoal="33"></div>
                                                                    </div>
                                                                </div> 
                                                            </td>
                                                            <td class="text-right">
                                                                <p class="badge bg-lightgray"><span class="counter">33</span>%</p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                France
                                                                <div>
                                                                    <div class="progress progress-5 progress_sm">
                                                                        <div class="progress-bar bg-info" role="progressbar" data-transitiongoal="27"></div>
                                                                    </div>
                                                                </div> 
                                                            </td>
                                                            <td class="text-right">
                                                                <p class="badge bg-lightgray"><span class="counter">27</span>%</p>

                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                Germany
                                                                <div>
                                                                    <div class="progress progress-5 progress_sm">
                                                                        <div class="progress-bar bg-primary" role="progressbar" data-transitiongoal="16"></div>
                                                                    </div>
                                                                </div> 
                                                            </td>
                                                            <td class="text-right"><p class="badge bg-lightgray"><span class="counter">16</span>%</p></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                Spain
                                                                <div>
                                                                    <div class="progress progress-5 progress_sm">
                                                                        <div class="progress-bar bg-warning" role="progressbar" data-transitiongoal="11"></div>
                                                                    </div>
                                                                </div> 
                                                            </td>
                                                            <td class="text-right"><p class="badge bg-lightgray"><span class="counter">11</span>%</p></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                Britain
                                                                <div>
                                                                    <div class="progress progress-5 progress_sm">
                                                                        <div class="progress-bar bg-danger" role="progressbar" data-transitiongoal="10"></div>
                                                                    </div>
                                                                </div> 
                                                            </td>
                                                            <td class="text-right"><p class="badge bg-lightgray"><span class="counter">10</span>%</p></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="col-md-8 col-sm-12 col-xs-12  wow zoomIn">
                                                <div id="world-map-gdp-1" class="margin-top-15" style="height:280px;"></div>
                                            </div>
                                        </div><!--/row-->

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div>

                        </div><!--/.row-->
                        <!--======== Visitors Location End ========-->

                        <!--======== Bandwidth Start ========-->
                        <div class="row">

                            <div class="col-md-6">

                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>BANDWIDTH</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="text-center padding-10 wow zoomIn">
                                            <span class="pie-chart-bandwidth" data-percent="86">
                                                <span class="percent"></span>
                                            </span>

                                            <p>3900 GB / 5000 GB</p>
                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->

                            </div>

                            <div class="col-md-6">
                                
                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>MEMORY</h3>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="text-center padding-10 wow zoomIn">
                                            <span class="pie-chart-memory" data-percent="90">
                                                <span class="percent"></span>
                                            </span>

                                            <p>63 GB / 64 GB</p>

                                        </div>

                                    </div><!--/widget-content--> 
                                </div><!--/widget-->
                                
                            </div>

                        </div><!--/.row-->
                        <!--======== Bandwidth End ========-->


                        <!--======== Earning Graph Start ========-->
                        <div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="c_panel">
                                    <div class="c_title">
                                        <h2>Earning Graph</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="c_content">
                                        <div class="dashboard-widget-content">

                                            <div class="chart-widget">
                                                <div class="chart-widget-content wow zoomIn" id="graph-earnings"></div>
                                            </div>

                                            <div class="global-stats">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="global-earning-stats">
                                                            <p>Total countries earning <span>$80,1233,212</span></p>
                                                        </div>

                                                        <p class="country-breakdown">Countries earning breakdown</p>
                                                        <table class="countries_list wow zoomIn">
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        United States
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-success" role="progressbar" data-transitiongoal="90"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <p class="badge bg-lightgray">$<span class="counter">1,000,000</span></p>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Japan
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-info" role="progressbar" data-transitiongoal="82"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <p class="badge bg-lightgray">$<span class="counter">890,000</span></p>

                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        France
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-primary" role="progressbar" data-transitiongoal="78"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <p class="badge bg-lightgray">$<span class="counter">780,000</span></p>

                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Germany
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-warning" role="progressbar" data-transitiongoal="66"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right"><p class="badge bg-lightgray">$<span class="counter">600,000</span></p></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Spain
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-sun-flower" role="progressbar" data-transitiongoal="62"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right"><p class="badge bg-lightgray">$<span class="counter">540,000</span></p></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Britain
                                                                        <div>
                                                                            <div class="progress progress-5 progress_sm">
                                                                                <div class="progress-bar bg-danger" role="progressbar" data-transitiongoal="53"></div>
                                                                            </div>
                                                                        </div> 
                                                                    </td>
                                                                    <td class="text-right"><p class="badge bg-lightgray">$<span class="counter">470,121</span></p></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>

                                                        
                                                    </div>
                                                    <div class="col-md-8">
                                                        <div id="world-map-gdp-2" class="map-country-earnings wow zoomIn"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div><!--/.row-->
                        <!--======== Earning Graph End ========-->


                        <!--======== Todo List Start ========-->
                        <div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">

                                <div class="widget">
                                    <div class="widget-header bg-white">
                                        <h3>TODO LIST</h3>
                                        <span class="fa fa-plus pull-right btn-todo-add" data-toggle="modal" data-target="#modal-add-todo"></span>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="widget-content bg-white">
                                        
                                        <div class="todo-list">
                                            <ul class="sortable-container">
                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>CSS: Additional Widget</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Javascript: UI Fixes</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>User Login and Registrat...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Bootstrap Panel Customiz...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>


                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Bootstrap Panel Customiz...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Elementum excepturi so...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Bootstrap Panel Customiz...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Minima aliquam elit nequ...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>

                                                <li class="sortable-item"> 
                                                    <div style="float:left;" class="todo-actions">
                                                        <div class="wrapper-actions">
                                                            <div style="float:left">
                                                                <span class='fa fa-square-o bg-success padding-top-12 btn-todo-check' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div style="float:right;">
                                                                <span class='fa fa-times bg-danger padding-top-12 btn-todo-remove' style="width:40px; height:40px;"></span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </div>
                                                    <div style="float:right; float:left" class="todo-title">
                                                        <span>Cursus voluptas conseq...</span>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </li>
                                            </ul>

                                            <!--****** Start Add Task Modal ******-->
                                            <div class="modal" id="modal-add-todo" tabindex="-1" role="dialog" aria-hidden="true"  data-easein="fadeInDown" data-easeout="fadeOutDown">
                                                <div class="modal-dialog">
                                                  <div class="modal-content">
                                                    <div class="modal-header">
                                                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                                                      <h4 class="modal-title"><strong>Add</strong> new task</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form>
                                                            <div class="form-group">
                                                                <label for="title">Title</label>
                                                                <input type="text" class="form-control txtTitleTodo">
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                      <button type="button" class="btn btn-default btn-raised rippler rippler-default" data-dismiss="modal">Close</button>
                                                      <button type="button" class="btn btn-primary btn-raised rippler rippler-default btn-save-new-task">Save task</button>
                                                    </div>
                                                  </div>
                                                </div>
                                            </div>
                                            <!--****** End Add Task Modal ******-->
                                            

                                        </div><!--/todo-list-->

                                    </div><!--/widget-content--> 
                                    <div class="widget-footer padding-10 text-center">
                                        <a href="#">View all <i class="fa fa-arrow-right"></i></a>
                                    </div>
                                </div><!--/widget-->

                            </div>

                        </div><!--/.row-->
                        <!--======== Todo List End ========-->

                    </div><!--/.col-md-8-->
                        
                </div><!--/.row-->


            </section>
            
        </section>
        <!--======== Main Content End ========-->


        <!--===== Right sidebar nofications start ========-->
        <aside>
            <div id="right-sidebar" class="right-sidebar-notifcations nav-collapse hide-right-bar-notifications">
                <div class="bs-example bs-example-tabs right-sidebar-tab-notification" data-example-id="togglable-tabs">
                    <ul id="right-sidebar-tabs" class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#activities" id="activities-tab" role="tab" data-toggle="tab" aria-controls="activities" aria-expanded="true">Activities</a>
                        </li>
                        <li role="presentation">
                            <a href="#tasks" role="tab" id="tasks-tab" data-toggle="tab" aria-controls="tasks">Tasks</a>
                        </li>
                        <li role="presentation">
                            <a href="#settings" role="tab" id="settings-tab" data-toggle="tab" aria-controls="settings">Settings</a>
                        </li>
                        
                    </ul>
                    <div id="right-sidebar-tab-content" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="activities" aria-labelledBy="activities-tab">
                            <div class="right-sidebar-panel-content-heading">
                                <h4><span class="icon-user"></span> Latest user activities</h4>
                                <small>10 Latest Activities</small>
                            </div>
                            <div class="right-sidebar-panel-content animated fadeInRight">
                                
                                <ul class="right-sidebar-list">
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image" />
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - User Login...</h5>
                                            <p>Accessing the system...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img3.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating...</h5>
                                            <p>Updating user ID 1 ...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img2.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting...</h5>
                                            <p>Deleting user message...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img5.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Accessing...</h5>
                                            <p>User accessing the sys...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Viewing...</h5>
                                            <p>Viewing the user...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Reading...</h5>
                                            <p>Reading user message...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Registering...</h5>
                                            <p>Registering new user...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Registering...</h5>
                                            <p>Registering new user...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Registering...</h5>
                                            <p>Registering new user...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Registering...</h5>
                                            <p>Registering new user...</p>
                                        </div>
                                    </li>
                                    
                                </ul>    

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tasks" aria-labelledBy="tasks-tab">
                            <div class="right-sidebar-panel-content-heading">
                                <h4><span class="icon-list"></span> Recent tasks</h4>
                                <small>15 Ongoing tasks</small>
                            </div>
                            <div class="right-sidebar-panel-content animated fadeInRight">
                                
                                <ul class="right-sidebar-list">
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5><a href="#">John Doe - Creating Tasks</a></h5>
                                            <p>To update the sidebar...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img2.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img3.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img4.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img5.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/users/img4.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Updating Tasks</h5>
                                            <p>To update the header UI...</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pull-left thumbnail-hover">
                                            <div class="overflow-hidden">
                                                <img src="../../assets/images/profile.jpg" width="80" alt="image"/>
                                            </div>
                                        </div>
                                        <div>
                                            <h5>John Doe - Deleting Tasks</h5>
                                            <p>Change the content UI...</p>
                                        </div>
                                    </li>
                                    
                                </ul>

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="settings" aria-labelledBy="settings-tab">
                            <div class="right-sidebar-panel-content-heading">
                                <h4><span class="icon-list"></span> System Settins</h4>
                                <small>80% Completed Settings</small>
                            </div>
                            <div class="right-sidebar-panel-content animated fadeInRight">
                                <ul class="right-sidebar-list">
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Email Notifications
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Daily Email Notifiactions
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show user visitors
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show birthdate
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Show address
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Payment Recurring
                                        </label>
                                    </li>
                                    <li>
                                        <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> SMS Notifications
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div><!-- /example -->
                <div class="btn-bottom-right-sidebar-close">
                    <span class="fa fa-times"></span>
                </div>
                    
            </div>
        </aside>    
        <!--===== Right sidebar nofications end ========-->

    </section><!--/.container-->

    <!--===== Footer Start ========-->

    <!-- Placed js at the end of the document so the pages load faster -->

    <!--##################################################################################
    #
    # Thema GLOBAL JS PLUGINS
    # 
    # NOTE: These libraries are neccessary to run the template so don't remove one of these libraries. 
    # You can uncomment the following libraries commented and comment the global-plugins.js but it will may cause slow performance of the template because of many links should be load from the server.
    #
    ##################################################################################-->
    <script src="../../assets/js/global-plugins.js"></script>
    <!-- <script src="../../assets/js/jquery.js"></script> -->
    <!-- <script src="../../assets/js/jquery-migrate-1.2.1.min.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery.cookie/jquery.cookie.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery-ui/jquery-ui.min.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery-easing/jquery.easing.1.3.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap/js/bootstrap.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery/dcjqaccordion.2.7.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery/scrollTo.min.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery/slimscroll.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery/nicescroll.js"></script> -->
    <!-- <script src="../../assets/vendors/progressbar/bootstrap-progressbar.min.js"></script> -->
    <!-- <script src="../../assets/vendors/counter/waypoints.min.js" type="text/javascript" ></script> -->
    <!-- <script src="../../assets/vendors/counter/jquery.counterup.min.js" type="text/javascript" ></script> -->
    <!-- <script src="../../assets/vendors/jquery-icheck/icheck.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-tagsinput/bootstrap-tagsinput.js"></script> -->
    <!-- <script src="../../assets/vendors/summernote/summernote.min.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery.autosize/jquery.autosize.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery.multi-select/js/jquery.multi-select.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery.multi-select/js/jquery.quicksearch.js"></script> -->
    <!-- <script src="../../assets/vendors/typeahead/js/typeahead.bundle.js"></script> -->
    <!-- <script src="../../assets/vendors/typeahead/js/handlebars.min.js"></script> -->
    <!-- <script src="../../assets/vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script> -->
    <!-- <script src="../../assets/vendors/select2/select2.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-star-rating/js/star-rating.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-inputmask/bootstrap-inputmask.min.js"></script> -->
    <!-- <script src="../../assets/vendors/jquery.validate/jquery.validate.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script> -->
    <!-- <script src="../../assets/vendors/dropzone/dropzone.min.js"></script> -->
    <!-- <script src="../../assets/vendors/plupload/js/plupload.full.min.js"></script> -->
    <!-- <script src="../../assets/vendors/plupload/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script> -->
    <!-- <script src="../../assets/vendors/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script> -->
    <!-- <script src="../../assets/vendors/x-editable/inputs-ext/address/address.js"></script> -->
    <!-- <script src="../../assets/vendors/x-editable/inputs-ext/typeaheadjs/typeaheadjs.js"></script> -->
    <!-- <script src="../../assets/vendors/owl-carousel/owl.carousel.js"></script> -->
    <!-- <script src="../../assets/vendors/magnific-popup/js/jquery.magnific-popup.js"></script> -->
    <!-- <script src="../../assets/vendors/masonry/masonry.pkgd.min.js"></script> -->
    <!-- <script src="../../assets/vendors/moment.min.js"></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script> -->
    <!-- <script src="../../assets/vendors/raphael-min.js" charset="utf-8" ></script> -->
    <!-- <script src="../../assets/vendors/sweetalert/sweetalert.min.js"></script> -->
    <!-- <script src="../../assets/vendors/word-rotator/jquery.wordrotator.min.js"></script> -->
    <!-- <script src="../../assets/vendors/wow-animations/js/wow.min.js"></script> -->
    <!-- <script src="../../assets/vendors/rwd-table/js/rwd-table.min.js?v=5.0.3"></script> -->
    <!-- <script src="../../assets/vendors/jqueryui.sortable.animation/jquery.ui.sortable-animation.js"></script> -->
    <!-- <script src="../../assets/vendors/tooltipster/js/jquery.tooltipster.js" type="text/javascript" ></script> -->
    <!-- <script src="../../assets/vendors/dropdowns-enhancement/js/dropdowns-enhancement.min.js" type="text/javascript"></script> -->
    <!-- <script src="../../assets/vendors/jquery-notific8/jquery.notific8.js" type="text/javascript"></script> -->
    <!-- <script src="../../assets/vendors/date.js"></script> -->
    <!-- <script src="../../assets/vendors/pogo-slider/js/jquery.pogo-slider.min.js" type="text/javascript" ></script> -->
    <!-- <script src="../../assets/vendors/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript" ></script> -->
    <!-- <script src="../../vendors/nestable/jquery.nestable.js" type="text/javascript" ></script> -->
    <!-- <script src="../../assets/vendors/bstooltip/bstooltip.js"></script> -->

    <!--##################################################################################
    #
    # DASHBOARD AND WIDGET PAGE PLUGINS
    #
    ##################################################################################-->
    <!-- Chart JS -->
    <script src="../../assets/vendors/chartjs/chart.min.js"></script>
    <!--jQuery Flot Chart-->
    <script src="../../assets/vendors/flot/jquery.flot.full.min.js" type="text/javascript"></script>

    <!--jQuery Ricksaw Chart-->
    <script src="../../assets/vendors/jquery-ricksaw-chart/js/rickshaw.min.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/jquery-ricksaw-chart/js/d3.v2.js" type="text/javascript" ></script>
    <!-- Easy Pie JS -->
    <script src="../../assets/vendors/easypie/jquery.easypiechart.min.js"></script>
    <!--Sparkline JS-->
    <script src="../../assets/vendors/sparkline/index.js"></script>
    <!--Morris Chart-->
    <script src="../../assets/vendors/morris-chart/morris.min.js"></script>
    <!--Skycons JS-->
    <script src="../../assets/vendors/skycons/skycons.js"></script>
    <!-- World Map JS -->
    <script src="../../assets/vendors/maps/js/jquery-jvectormap-2.0.1.min.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/maps/js/gdp-data.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/maps/js/jquery-jvectormap-world-mill-en.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/maps/js/jquery-jvectormap-us-aea-en.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/video-js/video.js"></script>
    <script>
        videojs.options.flash.swf = "../../assets/vendors/video-js/video-js.swf";
    </script>


    <!--##################################################################################
    #
    # COMMON SCRIPT FOR THIS PAGE
    #
    ##################################################################################-->
    <!--common script init for all pages-->
    <script src="../../assets/js/theme.js" type="text/javascript" ></script>

    <!--script for this page-->
    <script src="../../assets/js/dashboard-green.js" type="text/javascript" ></script>
    <script src="../../assets/js/forms.js" type="text/javascript" ></script>
    <script src="../../assets/vendors/c3-chart/d3-3.5.0.min.js"></script>
    <script src="../../assets/vendors/c3-chart/c3.min.js"></script>

    <script type="text/javascript">


        $(document).ready(function(){
            new WOW().init();

            App.initPage();
            App.initLeftSideBar();
            App.initCounter();
            App.initNiceScroll();
            App.initPanels();
            App.initProgressBar();
            App.initSlimScroll();
            App.initNotific8();
            App.initTooltipster();
            App.initStyleSwitcher();
            App.initMenuSelected();
            App.initRightSideBar();
            App.initEmail();
            App.initSummernote();
            App.initAccordion();
            App.initModal();
            App.initPopover();
            App.initOwlCarousel();
            App.initSkyCons();
            App.initWidgets();

            DashboardGreen.initRickShawGraph();
            DashboardGreen.initFlotGraph();
            DashboardGreen.initChartGraph();
            DashboardGreen.initSparklineGraph();
            DashboardGreen.initDateRange();
            DashboardGreen.initWorldMap();
            DashboardGreen.initEasyPieChart();
            DashboardGreen.initMorrisChart();
            DashboardGreen.initTodoList();

            var d2 = [];
              for (var i = 0; i <= 6; i += 1) {
                d2.push([i, parseInt((Math.floor(Math.random() * (1 + 30 - 10))) + 10)]);
              }
              var d3 = [];
              for (var i = 0; i <= 6; i += 1) {
                d3.push([i, parseInt((Math.floor(Math.random() * (1 + 30 - 10))) + 10)]);
              }
              var d4 = [];
              for (var i = 0; i <= 6; i += 1) {
                d4.push([i, parseInt((Math.floor(Math.random() * (1 + 30 - 10))) + 10)]);
              }
              $("#flot-chart-stats").length && $.plot($("#flot-chart-stats"), [{
                      data: d2,
                      label: "Unique Visits"
                  }, {
                      data: d3,
                      label: "Page Views"
                  },{
                      data: d4,
                      label: "Revenue"
                  }], 
                  {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 1,
                            fill: true,
                            fillColor: {
                                colors: [{
                                    opacity: 0.3
                                }, {
                                    opacity: 0.3
                                }, {
                                    opacity: 0.3
                                }]
                            }
                        },
                        points: {
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#ab9ba9",
                        borderWidth: 0
                    },
                    colors: ["#F1C40F", "#1bb399","#177bbb"],
                    xaxis: {
                        ticks: 15,
                        tickDecimals: 0
                    },
                    yaxis: {
                        ticks: 10,
                        tickDecimals: 0
                    },
                    tooltip: true,
                    tooltipOpts: {
                      content: "'%s' of %x.1 is %y.4",
                      defaultTheme: false,
                      shifts: {
                        x: 0,
                        y: 20
                      }
                    }
                  }
              );


              var da = [
                {
                  label: "Chrome",
                  data: 40
                },    
                {
                  label: "Firefox",
                  data: 10
                },
                {
                  label: "IE",
                  data: 20
                },
                {
                  label: "Opera",
                  data: 12
                },
                {
                  label: "Android",
                  data: 18
                }
              ], 
              da1 = [],
              series = Math.floor(Math.random() * 4) + 3;

              $("#flot-pie-donut-analytics").length && $.plot($("#flot-pie-donut-analytics"), da, {
                series: {
                  pie: {
                    innerRadius: 0.4,
                    show: true,
                    stroke: {
                      width: 0
                    },
                    label: {
                      show: true,
                      threshold: 0.05
                    },

                  }
                },
                colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
                grid: {
                    hoverable: true,
                    clickable: false
                },
                tooltip: true,
                tooltipOpts: {
                  content: "%s: %p.0%"
                }
              });



                // bar
              var d1_1 = [
                [10, 120],
                [20, 70],
                [30, 100],
                [40, 60]
              ];

              var d1_2 = [
                [10, 80],
                [20, 60],
                [30, 30],
                [40, 35]
              ];

              var d1_3 = [
                [10, 80],
                [20, 40],
                [30, 30],
                [40, 20]
              ];

              var data1 = [
                {
                    label: "Product 1",
                    data: d1_1,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 1,
                        fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
                    },
                    color: "#6783b7"
                },
                {
                    label: "Product 2",
                    data: d1_2,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 2,
                        fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
                    },
                    color: "#4fcdb7"
                },
                {
                    label: "Product 3",
                    data: d1_3,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 3,
                        fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
                    },
                    color: "#8dd168"
                }
              ];


              $("#flot-bar").length && $.plot($("#flot-bar"), data1, {
                  xaxis: {
                      
                  },
                  yaxis: {
                      
                  },
                  grid: {
                      hoverable: true,
                      clickable: false,
                      borderWidth: 0
                  },
                  legend: {
                      labelBoxBorderColor: "none",
                      position: "left"
                  },
                  series: {
                      shadowSize: 1
                  },
                  tooltip: true,
              });

        });
    </script>


</body>

</html>

<!--===== Footer End ========-->