UNPKG

equation-admin-template

Version:

Booststrap 4 admin template made by equation

3,002 lines 244 kB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>Tabs | Equation - Multipurpose Bootstrap Dashboard Template </title>
    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->

    <!--  BEGIN CUSTOM STYLE FILE  -->
    <link href="assets/css/ui-kit/tabs-accordian/custom-tabs.css" rel="stylesheet" type="text/css" />
    <!--  END CUSTOM STYLE FILE  -->
</head>
<body>
    <div id="eq-loader">
      <div class="eq-loader-div">
          <div class="eq-loading dual-loader mx-auto mb-5"></div>
      </div>
    </div>

    <!--  BEGIN NAVBAR  -->
    <header class="desktop-nav header navbar fixed-top">
        <div class="nav-logo mr-sm-5 ml-sm-4">
            <a href="javascript:void(0);" class="nav-link sidebarCollapse d-inline-block mr-sm-5" data-placement="bottom">
                <i class="flaticon-menu-line-3"></i>
            </a>
            <a href="index.html" class=""> <img src="assets/img/1.png" class="img-fluid" alt="logo"></a>
        </div>
        <ul class="navbar-nav flex-row mr-auto">
            <li class="nav-item ml-4 d-lg-none d-sm-block d-none">
                <form class="form-inline search-full form-inline search animated-search" role="search">
                    <i class="flaticon-search-1 d-lg-none d-block"></i>
                    <input type="text" class="form-control search-form-control  ml-lg-auto" placeholder="Search...">
                </form>
            </li>
            <li class="nav-item d-lg-block d-none">
                <form class="form-inline form-inline search animated-search" role="search">
                    <i class="flaticon-search-1 d-lg-none d-block"></i>
                    <input type="text" class="form-control search-form-control" placeholder="Search here...">
                </form>
            </li>
        </ul>

        <ul class="navbar-nav flex-row ml-lg-auto">

            <li class="nav-item dropdown language-dropdown ml-4 mr-4 pr-3 pl-3 align-self-center d-lg-inline-block d-none">
                <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="flagDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="">EN</span>
                </a>
                <div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="flagDropdown">
                    <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/fr.svg" class="flag-width" alt=""> &nbsp;FR</a>
                    <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/jp.svg" class="flag-width" alt=""> &nbsp;JP</a>
                    <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ru.svg" class="flag-width" alt=""> &nbsp;RU</a>
                    <a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ca.svg" class="flag-width" alt=""> &nbsp;EN</a>
                </div>
            </li>

           
            <li class="nav-item dropdown message-dropdown ml-lg-4 mr-lg-4 d-sm-block d-none align-self-center">
                <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="message-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="icon flaticon-mail-25"></span><span class="badge badge-primary">13</span>
                </a>
                <div class="dropdown-menu  position-absolute p-0 eq-animated eq-fadeInUp" aria-labelledby="message-dropdown">
                    <div class="">
                        <a class="dropdown-item">
                            <div class="">
                                <div class="media notification-new">
                                    <div class="usr-img align-self-center mr-3">
                                        <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
                                    </div>
                                    <div class="media-body">
                                        <div class="d-flex justify-content-between">
                                            <p class="meta-user-name mr-3 mb-0">Kara Young</p>
                                            <p class="meta-time align-self-center mb-0">04.02.19</p>
                                        </div>
                                        <p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="dropdown-item">
                            <div class="">
                                <div class="media notification-new">
                                    <div class="notification-icon align-self-center mr-3">
                                        <i class="flaticon-mailbox"></i>
                                    </div>
                                    <div class="media-body">
                                        <div class="d-flex justify-content-between">
                                            <p class="meta-title mr-3 mb-0">1 new email</p>
                                            <p class="meta-time align-self-center mb-0">04.02.19</p>
                                        </div>
                                        <p class="message-text mb-0 ">Anderson.Daisy@mail.com</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="dropdown-item">
                            <div class="">
                                <div class="media">
                                    <div class="usr-img align-self-center mr-3">
                                        <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
                                    </div>
                                    <div class="media-body">
                                        <div class="d-flex justify-content-between">
                                            <p class="meta-user-name mr-3 mb-0">Oscar Garner</p>
                                            <p class="meta-time align-self-center mb-0">04.02.19</p>
                                        </div>
                                        <p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </li>

            <li class="nav-item dropdown notification-dropdown ml-3 mr-lg-4 align-self-center">
                <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="icon flaticon-bell-4"></span><span class="badge badge-success">15</span>
                </a>
                <div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="notification-dropdown">
                    <div class="notification-scroll">
                        <div class="dropdown-item">
                            <a href="">
                                <div class="media">
                                    <div class="user-profile">
                                        <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
                                    </div>
                                    <div class="media-body">
                                        <span>Alan Green</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="dropdown-item">
                            <a href="">
                                <div class="media">
                                    <div class="user-profile">
                                        <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
                                    </div>
                                    <div class="media-body">
                                        <span>Irene Collins</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="dropdown-item">
                            <a href="">
                                <div class="media">
                                    <div class="user-profile">
                                        <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
                                    </div>
                                    <div class="media-body">
                                        <span>Sonia Shaw</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="dropdown-item">
                            <a href="">
                                <div class="media">
                                    <div class="user-profile">
                                        <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
                                    </div>
                                    <div class="media-body">
                                        <span>Xavier</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li class="nav-item dropdown user-profile-dropdown pl-4 pr-lg-0 pr-2 ml-lg-2 mr-lg-4  align-self-center">
                <a href="javascript:void(0);" class="nav-link dropdown-toggle user">
                    <div class="user-profile d-lg-block d-none">
                        <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
                    </div>
                    <i class="flaticon-user-7 d-lg-none d-block"></i>
                </a>
            </li>
        </ul>
    </header>
    <!--  END NAVBAR  -->

    <!--  BEGIN MAIN CONTAINER  -->
    <div class="main-container" id="container">
        <div class="overlay"></div>
        <div class="ps-overlay"></div>
        <div class="search-overlay"></div>
        
        <!--  BEGIN MODERN  -->
        <div class="modernSidebar-nav header navbar">
            <div class="">
                <nav id="modernSidebar">
                    <ul class="menu-categories pl-0 m-0" id="topAccordion">
                        <li class="menu">
                            <a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                                <div class="">
                                    <i class="flaticon-computer-6"></i>
                                    <span>Dashboard</span>
                                </div>
                            </a>
                            <div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="dashboard" data-parent="#topAccordion">
                                <ul class="submenu-scroll">
                                    <li>
                                        <ul class="list-unstyled sub-submenu" id="dashboards">
                                            <li>
                                                <a href="index.html"> <div><i class="flaticon-computer-4"></i> Default</div> </a>
                                            </li>
                                            <li>
                                                <a href="ecommerce_dashboard.html"> <div><i class="flaticon-cart-2"></i> Ecommerce</div> </a>
                                            </li>
                                            <li>
                                                <a href="accounting_dashboard.html"> <div><i class="flaticon-chart-line"></i> Accounting</div> </a>
                                            </li>
                                            <li>
                                                <a href="analytics_dashboard.html"> <div><i class="flaticon-computer-2"></i> Analytics</div> </a>
                                            </li>
                                            <li>
                                                <a href="car_dashboard.html"> <div><i class="flaticon-car"></i> Car</div> </a>
                                            </li>
                                            <li>
                                                <a href="classic_dashboard.html"> <div><i class="flaticon-computer-8"></i> Classic</div> </a>
                                            </li>
                                            <li>
                                                <a href="stock_market_dashboard.html"> <div><i class="flaticon-up-chart"></i> Stock Market</div> </a>
                                            </li>
                                            <li>
                                                <a href="cryptocurrency_dashboard.html"> <div><i class="flaticon-bitcoin-circle"></i> Cryptocurrency</div> </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li class="menu">
                            <a href="#uiAndComponents" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle collapsed">
                                <div class="">
                                    <i class="flaticon-3d-cube"></i>
                                    <span>Components</span>
                                </div>
                            </a>
                            <div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="uiAndComponents" data-parent="#topAccordion">
                                <div class="submenu-scroll">
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#ui-features" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">UI KIT</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ui-features">
                                                <li>
                                                    <a href="ui_helper_classes.html"> Helper Classes </a>
                                                </li>
                                                <li>
                                                    <a href="ui_color_library.html"> Color Library </a>
                                                </li>
                                                <li>
                                                    <a href="ui_grid.html"> Grid System </a>
                                                </li>
                                                <li>
                                                    <a href="ui_typography.html"> Typography </a>
                                                </li>
                                                <li>
                                                    <a href="ui_shadows.html"> Shadow </a>
                                                </li>
                                                <li>
                                                    <a href="ui_miscellaneous.html"> Miscellaneous </a>
                                                </li>
                                                <li>
                                                    <a href="ui_pagination.html">Pagination</a>
                                                </li>
                                                <li>
                                                    <a href="ui_alert.html"> Alerts </a>
                                                </li>
                                                <li>
                                                    <a href="ui_tooltips_and_popovers.html"> Tooltips And Popovers </a>
                                                </li>
                                                <li>
                                                    <a href="ui_loader.html"> Loaders </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#ui-buttons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Buttons <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-buttons" data-parent="#ui-features">
                                                        <li>
                                                            <a href="ui_buttons.html"> Bootstrap </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_creative.html"> Creative </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_switches.html"> Switches </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_social_button.html"> Social </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="ui_sweetalert.html"> Sweet Alerts </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#ui-font-icons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Font Icons <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-font-icons" data-parent="#ui-features">
                                                        <li>
                                                            <a href="ui_flaticon_icon.html"> Flaticon </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_linea_icon.html"> Linea </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_themify_icon.html"> Themify </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_pixeden_icon.html"> Pixeden </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_fontawesome_icon.html"> Fontawesome </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_metro_icon.html"> Metro </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_weather_icon.html"> Weather </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="active">
                                                    <a href="ui_tabs.html"> Tabs </a>
                                                </li>
                                                <li>
                                                    <a href="ui_accordion.html"> Accordions  </a>
                                                </li>
                                                <li>
                                                    <a href="ui_modal.html"> Modals </a>
                                                </li>
                                                <li>
                                                    <a href="ui_sliders.html"> Range Sliders </a>
                                                </li>
                                                <li>
                                                    <a href="ui_timeline.html"> Timeline </a>
                                                </li>
                                                <li>
                                                    <a href="ui_tree.html"> Tree View </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#ui-progress" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Progress Bar <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-progress" data-parent="#ui-features">
                                                        <li>
                                                            <a href="ui_bootstrap_progress_bar.html"> Bootstrap </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_material_progress_bar.html"> Custom </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#ui-notification" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Notifications <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-notification" data-parent="#ui-features">
                                                        <li>
                                                            <a href="ui_toastr.html"> Toastr </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_notification.html"> Creative </a>
                                                        </li>
                                                        <li>
                                                            <a href="ui_snackbar.html"> Snackbar </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="ui_session_timeout.html"> Session Timeout </a>
                                                </li>
                                                <li>
                                                    <a href="ui_media_object.html"> Media Object </a>
                                                </li>
                                                <li>
                                                    <a href="ui_list_group.html"> List Group </a>
                                                </li>
                                                <li>
                                                    <a href="ui_nestable_list.html"> Nested List </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#components" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">COMPONENTS</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="components">
                                                <li>
                                                    <a href="component_portlet.html"> Portlets </a>
                                                </li>
                                                <li>
                                                    <a href="component_keypad.html"> Keypad </a>
                                                </li>

                                                <li class="sub-sub-submenu-list">
                                                    <a href="#component-carousel" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Carousel <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-carousel" data-parent="#components">      
                                                        <li>
                                                            <a href="component_bootstrap_carousel.html">Bootstrap</a>
                                                        </li>
                                                        <li>
                                                            <a href="component_carousel.html">Metro</a>
                                                        </li>
                                                        <li>
                                                            <a href="component_sliders.html">Swiper</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="component_rating.html"> Rating </a>
                                                </li>
                                                <li>
                                                    <a href="component_blockui.html"> Block UI </a>
                                                </li>
                                                <li>
                                                    <a href="component_popup.html"> Popup </a>
                                                </li>
                                                <li>
                                                    <a href="component_scroll_bars_basic.html"> Scrollbar </a>
                                                </li>
                                                <li>
                                                    <a href="component_todo_list.html"> Todo List </a>
                                                </li>
                                                <li>
                                                    <a href="component_scrollspy.html"> Scrollspy </a>
                                                </li>
                                                <li>
                                                    <a href="component_countdown.html"> Countdown </a>
                                                </li>

                                                <li>
                                                    <a href="component_counter.html"> Counter </a>
                                                </li>
                                                <li>
                                                    <a href="component_datetime_picker.html"> Date &amp; Time Picker </a>
                                                </li>
                                                <li>
                                                    <a href="component_lightbox.html"> LightBox </a>
                                                </li>
                                                <li>
                                                    <a href="component_color_picker.html"> Color Picker </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#component-media" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Media <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-media" data-parent="#components"> 
                                                        <li>
                                                            <a href="component_video_player.html"> Video Player </a>
                                                        </li>
                                                        <li>
                                                            <a href="component_audio_player.html"> Audio Player </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="component_clipboard.html"> Clipboard </a>
                                                </li>
                                                <li>
                                                    <a href="component_typeahead.html"> Typeahead </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#component-search" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Search <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-search" data-parent="#components"> 
                                                        <li>
                                                            <a href="component_search_multiple.html"> Multiple </a>
                                                        </li>
                                                        <li>
                                                            <a href="component_search_web.html"> Web </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#component-animation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Animations <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-animation" data-parent="#components"> 
                                                        <li>
                                                            <a href="component_animation_buttons.html"> Buttons </a>
                                                        </li>
                                                        <li>
                                                            <a href="component_animation_css.html"> CSS </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#component-img-crop" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Image Cropping <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-img-crop" data-parent="#components"> 
                                                        <li>
                                                            <a href="component_image_cropping_basic.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="component_image_cropping_advanced.html"> Advanced </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#element" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ELEMENTS</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="element">
                                                <li>
                                                    <a href="element_steps.html"> Steps </a>
                                                </li>
                                                <li>
                                                    <a href="element_ribbon.html"> Ribbons </a>
                                                </li>
                                                <li>
                                                    <a href="element_testimonial.html"> Testimonials </a>
                                                </li>
                                                <li>
                                                    <a href="element_team.html"> Team </a>
                                                </li>
                                                <li>
                                                    <a href="element_contacts.html"> Contacts </a>
                                                </li>
                                                <li>
                                                    <a href="element_blog.html"> Blog Elements </a>
                                                </li>
                                                <li>
                                                    <a href="element_pricing_table.html"> Pricing Tables </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <li class="menu">
                            <a href="#tables-forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
                                <div class="">
                                    <i class="flaticon-table"></i>
                                    <span>Tables &amp; Forms</span>
                                </div>
                            </a>
                            <div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="tables-forms" data-parent="#topAccordion">
                                <div class="submenu-scroll">
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#tables" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">TABLES</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="tables">
                                                <li>
                                                    <a href="table_basic.html"> Basic </a>
                                                </li>
                                                <li>
                                                    <a href="table_tablesaw.html"> Tablesaw</a>
                                                </li>
                                                <li>
                                                    <a href="table_sticky_table_header.html"> Sticky Headers</a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#tables-editable" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Editable <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-editable" data-parent="#tables"> 
                                                        <li>
                                                            <a href="table_jq_spreadsheet.html"> Spreadsheet </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_jquery_tabledit.html"> TableEdit </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_editablegrid.html"> Editable Grid </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#tables-data-tables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> DataTables <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-data-tables" data-parent="#tables"> 
                                                        <li>
                                                            <a href="table_dt_zero_configuration.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_ordering_sorting.html"> Order Sorting </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_multiple_tables.html"> Multiple Tables</a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_alternative_pagination.html"> Alternative Pagination</a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_miscellaneous.html"> Miscellaneous </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_custom.html"> Custom </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_scrollable.html"> Scrollable </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_range_search.html"> Range Search </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_html5.html"> HTML5 Export </a>
                                                        </li>
                                                        <li>
                                                            <a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
                                                        </li>
                                                        
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#forms" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">FORMS</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="forms" style="">
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#forms-bootstrap" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Bootstrap <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-bootstrap" data-parent="#forms"> 
                                                        <li>
                                                            <a href="form_bootstrap_basic.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_bootstrap_rounded.html"> Rounded </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#forms-input-group" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Input Group <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-input-group" data-parent="#forms"> 
                                                        <li>
                                                            <a href="form_input_group_basic.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_input_group_rounded.html"> Rounded </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="form_bootstrap_material.html"> Material </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#forms-layout" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Layouts <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-layout" data-parent="#forms"> 
                                                        <li>
                                                            <a href="form_layouts.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_layouts_rounded.html"> Rounded </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#forms-validation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Validation <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-validation" data-parent="#forms"> 
                                                        <li>
                                                            <a href="form_validation.html"> Bootstrap </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_jqvalidation.html"> jQuery </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_validation_material.html"> Custom </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="form_input_mask.html"> Input Mask </a>
                                                </li>
                                                <li>
                                                    <a href="form_bootstrap_select.html"> Bootstrap Select </a>
                                                </li>
                                                <li>
                                                    <a href="form_select2.html"> Select2 </a>
                                                </li>
                                                <li>
                                                    <a href="form_bootstrap_touchspin.html"> TouchSpin </a>
                                                </li>
                                                <li>
                                                    <a href="form_multiselect.html"> Multi Select </a>
                                                </li>
                                                <li>
                                                    <a href="form_maxlength.html"> Maxlength </a>
                                                </li>
                                                <li>
                                                    <a href="form_repeater.html"> Repeater </a>
                                                </li>                           
                                                <li>
                                                    <a href="form_checkbox_radio.html"> Checkbox and Radio </a>
                                                </li>

                                                <li class="sub-sub-submenu-list">
                                                    <a href="#forms-wizard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Wizards <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-wizard" data-parent="#forms"> 
                                                        <li>
                                                            <a href="form_bs_wizard.html"> Bootstrap </a>
                                                        </li>
                                                        <li>
                                                            <a href="form_wizard.html"> jQuery Steps </a>
                                                        </li>
                                                    </ul>
                                                </li>

                                                <li>
                                                    <a href="form_fileupload.html"> File Upload </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <li class="menu">
                            <a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
                                <div class="">
                                    <i class="flaticon-copy"></i>
                                    <span>Pages</span>
                                </div>
                            </a>
                            <div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="pages" data-parent="#topAccordion">
                                <div class="submenu-scroll">
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#ecommerce" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ECOMMERCE</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ecommerce">
                                                <li>
                                                    <a href="ecommerce_orders.html"> Orders </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_product.html"> Products </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_product_catalog.html"> Product Catalog </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#product-details" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" data-parent="#ecommerce"> Product Details <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="product-details">
                                                        <li>
                                                            <a href="ecommerce_product_details_1.html"> Product Details 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="ecommerce_product_details_2.html"> Product Details 2 </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_addedit_product.html"> Add/Edit Products </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_addedit_categories.html"> Add/Edit Categories </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_view_cart.html"> View Cart </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_view_payments.html"> View Payments </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_view_customers.html"> View Customers </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_checkout.html"> Checkout </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_invoices.html"> Invoice </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_shipments.html"> Shipments </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_products_cart.html"> Products in Cart </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_coupons.html"> Coupons </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_low_stock.html"> Low Stock </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_best_sellers.html"> Best Sellers </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_refunds.html"> Refunds </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_search_terms.html"> Search Terms </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_newsletters.html"> Newsletters </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_wizards.html"> Payment Wizard </a>
                                                </li>
                                                <li>
                                                    <a href="ecommerce_reviews.html"> Reviews </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#page" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">PAGES</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="page">
                                                <li>
                                                    <a href="pages_blank_page.html"> Blank Page</a>
                                                </li>
                                                <li>
                                                    <a href="pages_helpdesk.html"> Helpdesk </a>
                                                </li>
                                                <li>
                                                    <a href="pages_contact_us.html"> Contact Form </a>
                                                </li>
                                                <li>
                                                    <a href="pages_faq.html"> FAQ </a>
                                                </li>
                                                <li>
                                                    <a href="pages_blog.html"> Blog </a>
                                                </li>                            
                                                <li>
                                                    <a href="pages_privacy.html"> Privacy Policy </a>
                                                </li>
                                                <li>
                                                    <a href="pages_cookie_consent.html"> Cookie Consent </a>
                                                </li>
                                                <li>
                                                    <a href="pages_landing_page.html" target="_blank"> Landing Page </a>
                                                </li>
                                                <li>
                                                    <a href="pages_coming_soon.html"> Coming Soon </a>
                                                </li>

                                                <li class="sub-sub-submenu-list">
                                                    <a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="pages-error" data-parent="#pages"> 
                                                        <li>
                                                            <a href="pages_error404.html"> 404 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_error404-2.html"> 404 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_error500.html"> 500 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_error500-2.html"> 500 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_error503.html"> 503 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_error503-2.html"> 503 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="pages_maintenence.html"> Maintanence </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#users" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">USERS</span> </a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="users"> 
                                                <li>
                                                    <a href="user_profile.html"> Profile </a>
                                                </li>
                                                <li>
                                                    <a href="user_account_setting.html"> Account Settings </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#user-login" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Login <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-login" data-parent="#users"> 
                                                        <li>
                                                            <a href="user_login_1.html"> Login 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_login_2.html"> Login 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_login_3.html"> Login 3 </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#user-register" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Register <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-register" data-parent="#users"> 
                                                        <li>
                                                            <a href="user_register_1.html"> Register 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_register_2.html"> Register 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_register_3.html"> Register 3 </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#user-passRecovery" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Password Recovery <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-passRecovery" data-parent="#users"> 
                                                        <li>
                                                            <a href="user_pass_recovery_1.html"> Password Recovery 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_pass_recovery_2.html"> Password Recovery 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_pass_recovery_3.html"> Password Recovery 3 </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#user-lockscreen" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Lockscreen <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-lockscreen" data-parent="#users"> 
                                                        <li>
                                                            <a href="user_lockscreen_1.html"> Lockscreen 1 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_lockscreen_2.html"> Lockscreen 2 </a>
                                                        </li>
                                                        <li>
                                                            <a href="user_lockscreen_3.html"> Lockscreen 3 </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <li class="menu">
                            <a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
                                <div class="">
                                    <i class="flaticon-mail-19"></i>
                                    <span>Apps</span>
                                </div>
                            </a>
                            <div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="app" data-parent="#topAccordion">
                                <ul class="submenu-scroll">
                                    <li>
                                        <ul class="list-unstyled mt-4">
                                            <li>
                                                <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="apps"> 
                                                    <li>
                                                        <a href="apps_chat.html"> Chat </a>
                                                    </li>
                                                    <li>
                                                        <a href="apps_mailbox.html"> Mailbox </a>
                                                    </li>
                                                    <li>
                                                        <a href="apps_mailbox_with_chat.html"> Mailbox With Chat </a>
                                                    </li>
                                                    <li>
                                                        <a href="apps_newsletter.html"> Newsletter </a>
                                                    </li>
                                                    <li>
                                                        <a href="apps_scheduler.html"> Scheduler </a>
                                                    </li>
                                                    <li class="sub-sub-submenu-list">
                                                        <a href="#apps-calendars" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Calendar <i class="flaticon-right-arrow"></i> </a>
                                                        <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="apps-calendars" data-parent="#apps-calendars"> 
                                                            <li>
                                                                <a href="apps_basic_calendar.html"> Basic </a>
                                                            </li>
                                                            <li>
                                                                <a href="apps_full_calendar.html"> Full Calendar </a>
                                                            </li>
                                                            <li>
                                                                <a href="apps_drag_n_drop_calendar.html"> Drag n Drop </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li class="menu">
                            <a href="#more" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                                <div class="">
                                    <i class="flaticon-plus"></i>
                                    <span class="">More</span>
                                </div>
                            </a>
                            <div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="more" data-parent="#topAccordion">
                                <div class="submenu-scroll">
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#modules" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MODULES</span></a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="modules"> 
                                                <li>
                                                    <a href="modules_widgets.html"> Widgets </a>
                                                </li>
                                                <li>
                                                    <a href="modules_table_and_event.html"> Tables &amp; Events </a>
                                                </li>
                                                <li>
                                                    <a href="modules_charts_and_maps.html"> Charts &amp; Maps </a>
                                                </li>
                                                <li>
                                                    <a href="modules_weather_and_calendar.html"> Weather &amp; Calendar </a>
                                                </li>
                                                <li>
                                                    <a href="modules_cards.html"> Cards </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#dragndrop" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">DRAG AND DROP</span></a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="dragndrop"> 
                                                <li>
                                                    <a href="dragndrop_gridstack.html"> Grid Stack</a>
                                                </li>
                                                <li>
                                                    <a href="dragndrop_dragula.html"> Dragula</a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#dragndrop-jqueryui" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jQuery UI <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="dragndrop-jqueryui" data-parent="#dragndrop"> 
                                                        <li>
                                                            <a href="dragndrop_ui_product_cart.html"> Shopping Cart </a>
                                                        </li>
                                                        <li>
                                                            <a href="dragndrop_scrumboard.html"> Scrum Task Board</a>
                                                        </li>                               
                                                        <li>
                                                            <a href="dragndrop_scroll_bars.html"> Scrollbar</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#charts" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">CHARTS</span></a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="charts"> 
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#chart-amcharts" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> amCharts <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-amcharts" data-parent="#charts"> 
                                                        <li>
                                                            <a href="am_column_and_barchart.html"> Column &amp; Bar </a>
                                                        </li>
                                                        <li>
                                                            <a href="am_line_and_areachart.html"> Line &amp; Area </a>
                                                        </li>
                                                        <li>
                                                            <a href="am_pie_and_donutchart.html"> Pie &amp; Donut </a>
                                                        </li>
                                                        <li>
                                                            <a href="am_gauge_and_otherchart.html"> Gauges  &amp; Other </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#chart-c3chart" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> C3 <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-c3chart" data-parent="#charts"> 
                                                        <li>
                                                            <a href="charts_c3_chart.html"> Simple</a>
                                                        </li>
                                                        <li>
                                                            <a href="charts_c3_api.html"> Api </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="charts_cssplot.html"> CSS Plot </a>
                                                </li>
                                                <li>
                                                    <a href="charts_morris.html"> Morris </a>
                                                </li>
                                                <li>
                                                    <a href="charts_jQuery_sparklines.html"> jQuery Sparklines </a>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#chart-chartist" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Chartist <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-chartist" data-parent="#charts"> 
                                                        <li>
                                                            <a href="charts_chartist_bar.html"> Bar </a>
                                                        </li>
                                                        <li>
                                                            <a href="charts_chartist_line.html"> Line &amp; Area </a>
                                                        </li>
                                                        <li>
                                                            <a href="charts_chartist_pie.html"> Pie </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="list-unstyled">
                                        <li>
                                            <a href="#maps" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MAPS</span></a>
                                            <ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="maps">
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#map-jqMapael" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jquery Mapael <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-jqMapael" data-parent="#maps"> 
                                                        <li>
                                                            <a href="map_jquerymapael_basic.html"> Basic </a>
                                                        </li>
                                                        <li>
                                                            <a href="map_jquerymapael_advanced.html"> Advanced </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="sub-sub-submenu-list">
                                                    <a href="#map-vMaps" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Vector Maps <i class="flaticon-right-arrow"></i> </a>
                                                    <ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-vMaps" data-parent="#maps"> 
                                                        <li>
                                                            <a href="map_amvector.html"> amVector</a>
                                                        </li>
                                                        <li>
                                                            <a href="map_jvector.html"> jVector</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                        </li>

                    </ul>
                </nav>
            </div>
        </div>
        <!--  END MODERN  -->

        <!--  BEGIN CONTENT PART  -->
        <div id="content" class="main-content">
            <div class="container">
                <div class="page-header">
                    <div class="page-title">
                        <h3>Tabs</h3>
                    </div>
                </div>
                
                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Simple Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area simple-tab">                                
                                <ul class="nav nav-tabs  mb-3 mt-3" id="simpletab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="simpletabContent">
                                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>   
                                    </div>
                                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Simple Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area simple-pills">
                                <ul class="nav nav-pills mb-3 mt-3" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Icon Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area icon-tab">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3" id="iconTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="icon-home-tab" data-toggle="tab" href="#icon-home" role="tab" aria-controls="icon-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="icon-profile-tab" data-toggle="tab" href="#icon-profile" role="tab" aria-controls="icon-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="icon-contact-tab" data-toggle="tab" href="#icon-contact" role="tab" aria-controls="icon-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="iconTabContent-1">
                                    <div class="tab-pane fade show active" id="icon-home" role="tabpanel" aria-labelledby="icon-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="icon-profile" role="tabpanel" aria-labelledby="icon-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="icon-contact" role="tabpanel" aria-labelledby="icon-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Icon Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area icon-pill">
                                
                                <ul class="nav nav-pills mb-3 mt-3" id="icon-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="icon-pills-home-tab" data-toggle="pill" href="#icon-pills-home" role="tab" aria-controls="icon-pills-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="icon-pills-profile-tab" data-toggle="pill" href="#icon-pills-profile" role="tab" aria-controls="icon-pills-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="icon-pills-contact-tab" data-toggle="pill" href="#icon-pills-contact" role="tab" aria-controls="icon-pills-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="icon-pills-tabContent">
                                    <div class="tab-pane fade show active" id="icon-pills-home" role="tabpanel" aria-labelledby="icon-pills-home-tab">
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                    </div>
                                    <div class="tab-pane fade" id="icon-pills-profile" role="tabpanel" aria-labelledby="icon-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="icon-pills-contact" role="tabpanel" aria-labelledby="icon-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Dropdown Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area dropdown-tab">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3" id="dropdownTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="dropdown-home-tab" data-toggle="tab" href="#dropdown-home" role="tab" aria-controls="dropdown-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="flaticon-user-7"></i> Dropdown</a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" id="dropdown-profile-tab1" data-toggle="tab" href="#dropdown-profile1" role="tab" aria-controls="dropdown-profile1" aria-selected="false"><i class="flaticon-user-fill"></i> Profile 1</a>
                                            <a class="dropdown-item" id="dropdown-profile-tab2" data-toggle="tab" href="#dropdown-profile2" role="tab" aria-controls="dropdown-profile2" aria-selected="false"><i class="flaticon-gear-fill"></i> Profile 2</a>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="dropdown-contact-tab" data-toggle="tab" href="#dropdown-contact" role="tab" aria-controls="dropdown-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="dropdownTabContent-2">
                                    <div class="tab-pane fade show active" id="dropdown-home" role="tabpanel" aria-labelledby="dropdown-home-tab">
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                    </div>
                                    <div class="tab-pane fade" id="dropdown-profile1" role="tabpanel" aria-labelledby="dropdown-profile-tab1">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="dropdown-profile2" role="tabpanel" aria-labelledby="dropdown-profile-tab2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                                    <div class="tab-pane fade" id="dropdown-contact" role="tabpanel" aria-labelledby="dropdown-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Dropdown Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area dropdown-pill">
                                
                                <ul class="nav nav-pills mb-3 mt-3" id="dropdown-pills-tab" role="tablist">
                                    <li class="nav-item mr-1">
                                        <a class="nav-link active" id="dropdown-pills-home-tab" data-toggle="pill" href="#dropdown-pills-home" role="tab" aria-controls="dropdown-pills-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    
                                     <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Profile</a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" id="dropdown-pills-profile-tab1" data-toggle="tab" href="#dropdown-pills-profile" role="tab" aria-controls="dropdown-pills-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile 1</a>
                                            <a class="dropdown-item" id="dropdown-pills-profile-tab2" data-toggle="tab" href="#dropdown-pills-profile2" role="tab" aria-controls="dropdown-pills-profile" aria-selected="false"><i class="flaticon-gear-fill"></i> Profile 2</a>
                                        </div>
                                      </li>

                                    <li class="nav-item mr-1">
                                        <a class="nav-link" id="dropdown-pills-contact-tab" data-toggle="pill" href="#dropdown-pills-contact" role="tab" aria-controls="dropdown-pills-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="dropdown-pills-tabContent">
                                    <div class="tab-pane fade show active" id="dropdown-pills-home" role="tabpanel" aria-labelledby="dropdown-pills-home-tab">
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                    </div>
                                    <div class="tab-pane fade" id="dropdown-pills-profile" role="tabpanel" aria-labelledby="dropdown-pills-profile-tab1">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="dropdown-pills-profile2" role="tabpanel" aria-labelledby="dropdown-pills-profile-tab2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                                    <div class="tab-pane fade" id="dropdown-pills-contact" role="tabpanel" aria-labelledby="dropdown-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Vertical Bordered</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area vertical-border-pill">

                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-3 col-12">
                                        <div class="nav flex-column nav-pills mb-sm-0 mb-3   text-center mx-auto" id="v-border-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link active" id="v-border-pills-home-tab" data-toggle="pill" href="#v-border-pills-home" role="tab" aria-controls="v-border-pills-home" aria-selected="true">Home</a>
                                          <a class="nav-link  text-center" id="v-border-pills-profile-tab" data-toggle="pill" href="#v-border-pills-profile" role="tab" aria-controls="v-border-pills-profile" aria-selected="false">Profile</a>
                                          <a class="nav-link  text-center" id="v-border-pills-messages-tab" data-toggle="pill" href="#v-border-pills-messages" role="tab" aria-controls="v-border-pills-messages" aria-selected="false">Messages</a>
                                          <a class="nav-link  text-center" id="v-border-pills-settings-tab" data-toggle="pill" href="#v-border-pills-settings" role="tab" aria-controls="v-border-pills-settings" aria-selected="false">Settings</a>
                                        </div>
                                    </div>

                                    <div class="col-sm-9 col-12">
                                        <div class="tab-content" id="v-border-pills-tabContent">
                                          <div class="tab-pane fade show active" id="v-border-pills-home" role="tabpanel" aria-labelledby="v-border-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>                                            
                                          </div>
                                          <div class="tab-pane fade" id="v-border-pills-profile" role="tabpanel" aria-labelledby="v-border-pills-profile-tab">

                                            <div class="media mt-4 mb-3">
                                                <img class="mr-3 rounded-circle" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    <h5 class="mt-0 mb-3">Media heading</h5>
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                            </div>

                                          </div>
                                          <div class="tab-pane fade" id="v-border-pills-messages" role="tabpanel" aria-labelledby="v-border-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>

                                          <div class="tab-pane fade" id="v-border-pills-settings" role="tabpanel" aria-labelledby="v-border-pills-settings-tab">
                                                <blockquote class="blockquote">
                                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                </blockquote>
                                          </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Border Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area border-tab">
                                
                                <ul class="nav nav-tabs mt-3" id="border-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="border-home-tab" data-toggle="tab" href="#border-home" role="tab" aria-controls="border-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="border-profile-tab" data-toggle="tab" href="#border-profile" role="tab" aria-controls="border-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="border-contact-tab" data-toggle="tab" href="#border-contact" role="tab" aria-controls="border-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content mb-4" id="border-tabsContent">
                                    <div class="tab-pane fade show active" id="border-home" role="tabpanel" aria-labelledby="border-home-tab">
                                        <h4 class="mb-4">We move your world!</h4>
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="border-profile" role="tabpanel" aria-labelledby="border-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="meta-usr-img mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="border-contact" role="tabpanel" aria-labelledby="border-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Line</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area underline-content">
                                
                                <ul class="nav nav-tabs  mb-3" id="lineTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="underline-home-tab" data-toggle="tab" href="#underline-home" role="tab" aria-controls="underline-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="underline-profile-tab" data-toggle="tab" href="#underline-profile" role="tab" aria-controls="underline-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="underline-contact-tab" data-toggle="tab" href="#underline-contact" role="tab" aria-controls="underline-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="lineTabContent-3">
                                    <div class="tab-pane fade show active" id="underline-home" role="tabpanel" aria-labelledby="underline-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="underline-profile" role="tabpanel" aria-labelledby="underline-profile-tab">
                                       <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="underline-contact" role="tabpanel" aria-labelledby="underline-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Animated Line</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area animated-underline-content">
                                
                                <ul class="nav nav-tabs  mb-3" id="animateLine" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="animated-underline-home-tab" data-toggle="tab" href="#animated-underline-home" role="tab" aria-controls="animated-underline-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="animated-underline-profile-tab" data-toggle="tab" href="#animated-underline-profile" role="tab" aria-controls="animated-underline-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="animated-underline-contact-tab" data-toggle="tab" href="#animated-underline-contact" role="tab" aria-controls="animated-underline-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="animateLineContent-4">
                                    <div class="tab-pane fade show active" id="animated-underline-home" role="tabpanel" aria-labelledby="animated-underline-home-tab">
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                    </div>
                                    <div class="tab-pane fade" id="animated-underline-profile" role="tabpanel" aria-labelledby="animated-underline-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="animated-underline-contact" role="tabpanel" aria-labelledby="animated-underline-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4 class="justify-tab">Justify Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area justify-tab">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3 nav-fill" id="justifyTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-home-tab" data-toggle="tab" href="#justify-home" role="tab" aria-controls="justify-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-profile-tab" data-toggle="tab" href="#justify-profile" role="tab" aria-controls="justify-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-contact-tab" data-toggle="tab" href="#justify-contact" role="tab" aria-controls="justify-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justifyTabContent">
                                    <div class="tab-pane fade show active" id="justify-home" role="tabpanel" aria-labelledby="justify-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="justify-profile" role="tabpanel" aria-labelledby="justify-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-contact" role="tabpanel" aria-labelledby="justify-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area justify-pill">
                                
                                <ul class="nav nav-pills mb-3 mt-3 nav-fill" id="justify-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-pills-home-tab" data-toggle="pill" href="#justify-pills-home" role="tab" aria-controls="justify-pills-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-pills-profile-tab" data-toggle="pill" href="#justify-pills-profile" role="tab" aria-controls="justify-pills-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-pills-contact-tab" data-toggle="pill" href="#justify-pills-contact" role="tab" aria-controls="justify-pills-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justify-pills-tabContent">
                                    <div class="tab-pane fade show active" id="justify-pills-home" role="tabpanel" aria-labelledby="justify-pills-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="justify-pills-profile" role="tabpanel" aria-labelledby="justify-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-pills-contact" role="tabpanel" aria-labelledby="justify-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Center Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area tab-justify-centered">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3 justify-content-center" id="justifyCenterTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-center-home-tab" data-toggle="tab" href="#justify-center-home" role="tab" aria-controls="justify-center-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-center-profile-tab" data-toggle="tab" href="#justify-center-profile" role="tab" aria-controls="justify-center-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-center-contact-tab" data-toggle="tab" href="#justify-center-contact" role="tab" aria-controls="justify-center-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justifyCenterTabContent">
                                    <div class="tab-pane fade show active" id="justify-center-home" role="tabpanel" aria-labelledby="justify-center-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="justify-center-profile" role="tabpanel" aria-labelledby="justify-center-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-center-contact" role="tabpanel" aria-labelledby="justify-center-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Center Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area pill-justify-centered">
                                
                                <ul class="nav nav-pills mb-3 mt-3 justify-content-center" id="justify-center-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-center-pills-home-tab" data-toggle="pill" href="#justify-center-pills-home" role="tab" aria-controls="justify-center-pills-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-center-pills-profile-tab" data-toggle="pill" href="#justify-center-pills-profile" role="tab" aria-controls="justify-center-pills-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-center-pills-contact-tab" data-toggle="pill" href="#justify-center-pills-contact" role="tab" aria-controls="justify-center-pills-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justify-center-pills-tabContent">
                                    <div class="tab-pane fade show active" id="justify-center-pills-home" role="tabpanel" aria-labelledby="justify-center-pills-home-tab">
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                    </div>
                                    <div class="tab-pane fade" id="justify-center-pills-profile" role="tabpanel" aria-labelledby="justify-center-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-center-pills-contact" role="tabpanel" aria-labelledby="justify-center-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Right Tabs</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area tab-justify-right">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3 justify-content-end" id="justifyRightTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-right-home-tab" data-toggle="tab" href="#justify-right-home" role="tab" aria-controls="justify-right-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-right-profile-tab" data-toggle="tab" href="#justify-right-profile" role="tab" aria-controls="justify-right-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-right-contact-tab" data-toggle="tab" href="#justify-right-contact" role="tab" aria-controls="justify-right-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justifyRightTabContent">
                                    <div class="tab-pane fade show active" id="justify-right-home" role="tabpanel" aria-labelledby="justify-right-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="justify-right-profile" role="tabpanel" aria-labelledby="justify-right-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-right-contact" role="tabpanel" aria-labelledby="justify-right-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Right Pills</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area pill-justify-right">
                                
                                <ul class="nav nav-pills mb-3 mt-3 justify-content-end" id="justify-right-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="justify-right-pills-home-tab" data-toggle="pill" href="#justify-right-pills-home" role="tab" aria-controls="justify-right-pills-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-right-pills-profile-tab" data-toggle="pill" href="#justify-right-pills-profile" role="tab" aria-controls="justify-right-pills-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="justify-right-pills-contact-tab" data-toggle="pill" href="#justify-right-pills-contact" role="tab" aria-controls="justify-right-pills-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="justify-right-pills-tabContent">
                                    <div class="tab-pane fade show active" id="justify-right-pills-home" role="tabpanel" aria-labelledby="justify-right-pills-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>
                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="justify-right-pills-profile" role="tabpanel" aria-labelledby="justify-right-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="justify-right-pills-contact" role="tabpanel" aria-labelledby="justify-right-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="col-lg-12">
                            <div class="statbox widget box box-shadow">
                                <div class="widget-header widget-heading">
                                    <div class="row">
                                        <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                            <h4>Rounded Pills</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="statbox widget box box-shadow">
                            <div class="widget-content widget-content-area rounded-pills">
                                
                                <ul class="nav nav-pills mb-3  nav-fill" id="rounded-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link  btn-rounded active" id="rounded-pills-home-tab" data-toggle="pill" href="#rounded-pills-home" role="tab" aria-controls="rounded-pills-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item ml-1">
                                        <a class="nav-link  btn-rounded" id="rounded-pills-profile-tab" data-toggle="pill" href="#rounded-pills-profile" role="tab" aria-controls="rounded-pills-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item ml-1">
                                        <a class="nav-link  btn-rounded" id="ronded-pills-contact-tab" data-toggle="pill" href="#rounded-pills-contact" role="tab" aria-controls="rounded-pills-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>

                                    <li class="nav-item ml-1">
                                        <a class="nav-link  btn-rounded" id="ronded-pills-settings-tab" data-toggle="pill" href="#rounded-pills-settings" role="tab" aria-controls="rounded-pills-settings" aria-selected="false"><i class="flaticon-settings-7"></i> Settings</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="rounded-pills-tabContent">
                                    <div class="tab-pane fade show active" id="rounded-pills-home" role="tabpanel" aria-labelledby="rounded-pills-home-tab">
                                        <h4 class="mb-4">We move your world!</h4>
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-profile" role="tabpanel" aria-labelledby="rounded-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-contact" role="tabpanel" aria-labelledby="ronded-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-settings" role="tabpanel" aria-labelledby="ronded-pills-settings-tab">
                                        <blockquote class="blockquote">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        </blockquote>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="col-lg-12">
                            <div class="statbox widget box box-shadow">
                                <div class="widget-header widget-heading">
                                    <div class="row">
                                        <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                            <h4>Rounded Pills with Background</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="statbox widget box box-shadow">
                            <div class="widget-content widget-content-area rounded-background-pills">
                                
                                <ul class="nav nav-pills justify-content-center" id="rounded-background-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link btn-rounded active" id="rounded-background-pills-home-tab" data-toggle="pill" href="#rounded-background-pills-home" role="tab" aria-controls="rounded-background-pills-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>

                                    <li class="nav-item ml-1">
                                        <a class="nav-link btn-rounded" id="rounded-background-pills-profile-tab" data-toggle="pill" href="#rounded-background-pills-profile" role="tab" aria-controls="rounded-background-pills-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>

                                    <li class="nav-item ml-1">
                                        <a class="nav-link btn-rounded" id="rounded-background-pills-contact-tab" data-toggle="pill" href="#rounded-background-pills-contact" role="tab" aria-controls="rounded-background-pills-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>

                                    <li class="nav-item ml-1">
                                        <a class="nav-link  btn-rounded" id="rounded-background-pills-settings-tab" data-toggle="pill" href="#rounded-background-pills-settings" role="tab" aria-controls="rounded-background-pills-settings" aria-selected="false"><i class="flaticon-settings-7"></i> Settings</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="rounded-background-pills-tabContent">
                                    <div class="tab-pane fade show active" id="rounded-background-pills-home" role="tabpanel" aria-labelledby="rounded-background-pills-home-tab">
                                        <h4 class="mb-4">We move your world!</h4>
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="rounded-background-pills-profile" role="tabpanel" aria-labelledby="rounded-background-pills-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-background-pills-contact" role="tabpanel" aria-labelledby="rounded-background-pills-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-background-pills-settings" role="tabpanel" aria-labelledby="rounded-background-pills-settings-tab">
                                        <blockquote class="blockquote">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        </blockquote>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Rounded with Icon</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area rounded-pills-icon">
                                
                                <ul class="nav nav-pills mb-4 mt-3  justify-content-center" id="rounded-pills-icon-tab" role="tablist">
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 active text-center" id="rounded-pills-icon-home-tab" data-toggle="pill" href="#rounded-pills-icon-home" role="tab" aria-controls="rounded-pills-icon-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center" id="rounded-pills-icon-profile-tab" data-toggle="pill" href="#rounded-pills-icon-profile" role="tab" aria-controls="rounded-pills-icon-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center" id="rounded-pills-icon-contact-tab" data-toggle="pill" href="#rounded-pills-icon-contact" role="tab" aria-controls="rounded-pills-icon-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center" id="rounded-pills-icon-settings-tab" data-toggle="pill" href="#rounded-pills-icon-settings" role="tab" aria-controls="rounded-pills-icon-settings" aria-selected="false"><i class="flaticon-settings-7"></i> Settings</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="rounded-pills-icon-tabContent">
                                    <div class="tab-pane fade show active" id="rounded-pills-icon-home" role="tabpanel" aria-labelledby="rounded-pills-icon-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-icon-profile" role="tabpanel" aria-labelledby="rounded-pills-icon-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-icon-contact" role="tabpanel" aria-labelledby="rounded-pills-icon-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-pills-icon-settings" role="tabpanel" aria-labelledby="rounded-pills-icon-settings-tab">
                                        <blockquote class="blockquote">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        </blockquote>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Circle with Icon</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area rounded-circle-pills-icon">
                                
                                <ul class="nav nav-pills mb-4 mt-3  justify-content-center" id="rounded-circle-pills-icon-tab" role="tablist">
                                    <li class="nav-item mr-2">
                                        <a class="nav-link mb-1 rounded-circle active" id="rounded-circle-pills-icon-home-tab" data-toggle="pill" href="#rounded-circle-pills-icon-home" role="tab" aria-controls="rounded-circle-pills-icon-home" aria-selected="true"><i class="flaticon-home-fill-1"></i></a>
                                    </li>
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-1 rounded-circle" id="rounded-circle-pills-icon-profile-tab" data-toggle="pill" href="#rounded-circle-pills-icon-profile" role="tab" aria-controls="rounded-circle-pills-icon-profile" aria-selected="false"><i class="flaticon-user-7"></i></a>
                                    </li>
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-1 rounded-circle" id="rounded-circle-pills-icon-contact-tab" data-toggle="pill" href="#rounded-circle-pills-icon-contact" role="tab" aria-controls="rounded-circle-pills-icon-contact" aria-selected="false"><i class="flaticon-telephone"></i></a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-1 rounded-circle" id="rounded-circle-pills-icon-settings-tab" data-toggle="pill" href="#rounded-circle-pills-icon-settings" role="tab" aria-controls="rounded-circle-pills-icon-settings" aria-selected="false"><i class="flaticon-settings-7"></i></a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="rounded-circle-pills-icon-tabContent">
                                    <div class="tab-pane fade show active" id="rounded-circle-pills-icon-home" role="tabpanel" aria-labelledby="rounded-circle-pills-icon-home-tab">
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                        </div>
                                    <div class="tab-pane fade" id="rounded-circle-pills-icon-profile" role="tabpanel" aria-labelledby="rounded-circle-pills-icon-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                          </div>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-circle-pills-icon-contact" role="tabpanel" aria-labelledby="rounded-circle-pills-icon-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="rounded-circle-pills-icon-settings" role="tabpanel" aria-labelledby="rounded-pills-icon-settings-tab">
                                        <blockquote class="blockquote">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        </blockquote>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Vertical Rounded With Icon</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area rounded-vertical-pills-icon">
                                
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-4 col-12">
                                        <div class="nav flex-column nav-pills mb-sm-0 mb-3" id="rounded-vertical-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link mb-2 active mx-auto" id="rounded-vertical-pills-home-tab" data-toggle="pill" href="#rounded-vertical-pills-home" role="tab" aria-controls="rounded-vertical-pills-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                          <a class="nav-link mb-2 mx-auto" id="rounded-vertical-pills-profile-tab" data-toggle="pill" href="#rounded-vertical-pills-profile" role="tab" aria-controls="rounded-vertical-pills-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                          <a class="nav-link mb-2 mx-auto" id="rounded-vertical-pills-messages-tab" data-toggle="pill" href="#rounded-vertical-pills-messages" role="tab" aria-controls="rounded-vertical-pills-messages" aria-selected="false"><i class="flaticon-mail-fill"></i> Messages</a>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 col-12">
                                        <div class="tab-content" id="rounded-vertical-pills-tabContent">
                                          <div class="tab-pane fade show active" id="rounded-vertical-pills-home" role="tabpanel" aria-labelledby="rounded-vertical-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                          </div>
                                          <div class="tab-pane fade" id="rounded-vertical-pills-profile" role="tabpanel" aria-labelledby="rounded-vertical-pills-profile-tab">
                                            <div class="media mt-4 mb-3 mr-2">
                                                <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                              </div>
                                          </div>
                                          <div class="tab-pane fade" id="rounded-vertical-pills-messages" role="tabpanel" aria-labelledby="rounded-vertical-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                           </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Vertical Circle With Icon</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area rounded-circle-vertical-pills-icon">
                                
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-4 col-12">
                                        <div class="nav flex-column nav-pills" id="rounded-circle-vertical-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link  rounded-circle mb-3  mx-auto active" id="rounded-circle-vertical-pills-home-tab" data-toggle="pill" href="#rounded-circle-vertical-pills-home" role="tab" aria-controls="rounded-circle-vertical-pills-home" aria-selected="true">
                                            <i class="flaticon-home-fill-1"></i>
                                          </a>
                                          <a class="nav-link  rounded-circle mb-3  mx-auto" id="rounded-circle-vertical-pills-profile-tab" data-toggle="pill" href="#rounded-circle-vertical-pills-profile" role="tab" aria-controls="rounded-circle-vertical-pills-profile" aria-selected="false">
                                            <i class="flaticon-user-7"></i>
                                        </a>
                                          <a class="nav-link rounded-circle mb-3  mx-auto" id="rounded-circle-vertical-pills-messages-tab" data-toggle="pill" href="#rounded-circle-vertical-pills-messages" role="tab" aria-controls="rounded-circle-vertical-pills-messages" aria-selected="false">
                                            <i class="flaticon-telephone"></i>
                                        </a>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 col-12">
                                        <div class="tab-content" id="rounded-circle-vertical-pills-tabContent">
                                          <div class="tab-pane fade show active" id="rounded-circle-vertical-pills-home" role="tabpanel" aria-labelledby="rounded-circle-vertical-pills-home-tab">
                                          <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                          </div>
                                          <div class="tab-pane fade" id="rounded-circle-vertical-pills-profile" role="tabpanel" aria-labelledby="rounded-circle-vertical-pills-profile-tab">
                                            <div class="media mt-4 mb-3 mr-2">
                                                <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                              </div>
                                          </div>
                                          <div class="tab-pane fade" id="rounded-circle-vertical-pills-messages" role="tabpanel" aria-labelledby="rounded-circle-vertical-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Vertical Pill</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area vertical-pill">
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-3 col-12">
                                        <div class="nav flex-column nav-pills mb-sm-0 mb-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link active mb-2" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
                                          <a class="nav-link mb-2" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                                          <a class="nav-link mb-2" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Text</a>
                                          <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
                                        </div>
                                    </div>

                                    <div class="col-sm-9 col-12">
                                        <div class="tab-content" id="v-pills-tabContent">
                                          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>
                                          </div>
                                          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                            <div class="media mt-4 mb-3">
                                                <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                              </div>
                                          </div>
                                          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>
                                          <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                                            <blockquote class="blockquote">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            </blockquote>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Justify Vertical Pill Right</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area vertical-pill-right">
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-9 col-12 order-sm-0 order-1">
                                        <div class="tab-content" id="v-right-pills-tabContent">
                                          <div class="tab-pane fade show active" id="v-right-pills-home" role="tabpanel" aria-labelledby="v-right-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>      
                                          </div>
                                          <div class="tab-pane fade" id="v-right-pills-profile" role="tabpanel" aria-labelledby="v-right-pills-profile-tab">
                                                <div class="media mt-4 mb-3">
                                                    <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                    <div class="media-body">
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                    </div>
                                                </div>
                                          </div>
                                          <div class="tab-pane fade" id="v-right-pills-messages" role="tabpanel" aria-labelledby="v-right-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>
                                          <div class="tab-pane fade" id="v-right-pills-settings" role="tabpanel" aria-labelledby="v-right-pills-settings-tab">
                                            <blockquote class="blockquote">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            </blockquote>
                                          </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3 col-12">
                                        <div class="nav flex-column nav-pills mb-sm-0 mb-3" id="v-right-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link active mb-2" id="v-right-pills-home-tab" data-toggle="pill" href="#v-right-pills-home" role="tab" aria-controls="v-right-pills-home" aria-selected="true">Home</a>
                                          <a class="nav-link mb-2" id="v-right-pills-profile-tab" data-toggle="pill" href="#v-right-pills-profile" role="tab" aria-controls="v-right-pills-profile" aria-selected="false">Profile</a>
                                          <a class="nav-link mb-2" id="v-right-pills-messages-tab" data-toggle="pill" href="#v-right-pills-messages" role="tab" aria-controls="v-right-pills-messages" aria-selected="false">Text</a>
                                          <a class="nav-link" id="v-right-pills-settings-tab" data-toggle="pill" href="#v-right-pills-settings" role="tab" aria-controls="v-right-pills-settings" aria-selected="false">Settings</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Creative Center Justify Tab</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area tab-creative-justify-centered">
                                
                                <ul class="nav nav-tabs  mb-3 mt-3 justify-content-center" id="creativeJustifyCenterTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="creative-justify-center-home-tab" data-toggle="tab" href="#creative-justify-center-home" role="tab" aria-controls="creative-justify-center-home" aria-selected="true">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="creative-justify-center-profile-tab" data-toggle="tab" href="#creative-justify-center-profile" role="tab" aria-controls="creative-justify-center-profile" aria-selected="false">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="creative-justify-center-contact-tab" data-toggle="tab" href="#creative-justify-center-contact" role="tab" aria-controls="creative-justify-center-contact" aria-selected="false">Contact</a>
                                    </li>
                                </ul>
                                <div class="tab-content text-center" id="creativeJustifyCenterTabContent">
                                    <div class="tab-pane fade show active" id="creative-justify-center-home" role="tabpanel" aria-labelledby="creative-justify-center-home-tab">
                                        <i class="flaticon-bitcoin-circle mb-4 mt-2"></i>
                                        <h4 class="mb-4">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="creative-justify-center-profile" role="tabpanel" aria-labelledby="creative-justify-center-profile-tab">
                                        <i class="flaticon-user-group-1 mb-4 mt-2"></i>
                                        <h4 class="mb-4">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="creative-justify-center-contact" role="tabpanel" aria-labelledby="creative-justify-center-contact-tab">
                                        <i class="flaticon-mail-17 mb-4 mt-2"></i>
                                        <h4 class="mb-4">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Creative Vertical Tab</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area creative-vertical-pill">
                                
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-3 col-12">
                                        <div class="nav flex-column nav-pills  text-center mx-auto" id="creative-v-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link active mb-3" id="creative-v-pills-home-tab" data-toggle="pill" href="#creative-v-pills-home" role="tab" aria-controls="creative-v-pills-home" aria-selected="true">Home</a>
                                          <a class="nav-link mb-3  text-center" id="creative-v-pills-profile-tab" data-toggle="pill" href="#creative-v-pills-profile" role="tab" aria-controls="creative-v-pills-profile" aria-selected="false">Profile</a>
                                          <a class="nav-link mb-3  text-center" id="creative-v-pills-messages-tab" data-toggle="pill" href="#creative-v-pills-messages" role="tab" aria-controls="creative-v-pills-messages" aria-selected="false">Messages</a>
                                        </div>
                                    </div>

                                    <div class="col-sm-9 col-12">
                                        <div class="tab-content" id="creative-v-pills-tabContent">
                                          <div class="tab-pane fade show active" id="creative-v-pills-home" role="tabpanel" aria-labelledby="creative-v-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>                                            
                                          </div>
                                          <div class="tab-pane fade" id="creative-v-pills-profile" role="tabpanel" aria-labelledby="creative-v-pills-profile-tab">
                                              
                                              <div class="media mt-4 mb-3">
                                                <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                              </div>

                                          </div>
                                          <div class="tab-pane fade" id="creative-v-pills-messages" role="tabpanel" aria-labelledby="creative-v-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="row">

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Vertical Line Tab</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area vertical-line-pill">
                                
                                <div class="row mb-4 mt-3">
                                    <div class="col-sm-3 col-12">
                                        <div class="nav flex-column nav-pills mb-sm-0 mb-3 text-center mx-auto" id="v-line-pills-tab" role="tablist" aria-orientation="vertical">
                                          <a class="nav-link active mb-3" id="v-line-pills-home-tab" data-toggle="pill" href="#v-line-pills-home" role="tab" aria-controls="v-line-pills-home" aria-selected="true">Home</a>
                                          <a class="nav-link mb-3  text-center" id="v-line-pills-profile-tab" data-toggle="pill" href="#v-line-pills-profile" role="tab" aria-controls="v-line-pills-profile" aria-selected="false">Profile</a>
                                          <a class="nav-link mb-3  text-center" id="v-line-pills-messages-tab" data-toggle="pill" href="#v-line-pills-messages" role="tab" aria-controls="v-line-pills-messages" aria-selected="false">Messages</a>
                                          <a class="nav-link  text-center" id="v-line-pills-settings-tab" data-toggle="pill" href="#v-line-pills-settings" role="tab" aria-controls="v-line-pills-settings" aria-selected="false">Settings</a>
                                        </div>
                                    </div>

                                    <div class="col-sm-9 col-12">
                                        <div class="tab-content" id="v-line-pills-tabContent">
                                          <div class="tab-pane fade show active" id="v-line-pills-home" role="tabpanel" aria-labelledby="v-line-pills-home-tab">
                                            <h4 class="mb-4">We move your world!</h4>
                                            <p class="mb-4">
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                            </p>

                                            <p>
                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </p>                                            
                                          </div>
                                          <div class="tab-pane fade" id="v-line-pills-profile" role="tabpanel" aria-labelledby="v-line-pills-profile-tab">

                                            <div class="media mt-4 mb-3">
                                                <img class="mr-3 rounded-circle" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                                <div class="media-body">
                                                    <h5 class="mt-0">Media heading</h5>
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                </div>
                                            </div>

                                          </div>
                                          <div class="tab-pane fade" id="v-line-pills-messages" role="tabpanel" aria-labelledby="v-line-pills-messages-tab">
                                            <p class="dropcap  dc-outline-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>
                                          </div>
                                          <div class="tab-pane fade" id="v-line-pills-settings" role="tabpanel" aria-labelledby="v-line-pills-settings-tab">
                                            <blockquote class="blockquote">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            </blockquote>
                                          </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-12 layout-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header border-bottom border-default">
                                <div class="row">
                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                        <h4>Border Top</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area border-top-tab">                                
                                <ul class="nav nav-tabs mb-3 mt-3" id="borderTop" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="border-top-home-tab" data-toggle="tab" href="#border-top-home" role="tab" aria-controls="border-top-home" aria-selected="true"><i class="flaticon-home-fill-1"></i> Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="border-top-profile-tab" data-toggle="tab" href="#border-top-profile" role="tab" aria-controls="border-top-profile" aria-selected="false"><i class="flaticon-user-7"></i> Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="border-top-contact-tab" data-toggle="tab" href="#border-top-contact" role="tab" aria-controls="border-top-contact" aria-selected="false"><i class="flaticon-telephone"></i> Contact</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="border-top-setting-tab" data-toggle="tab" href="#border-top-setting" role="tab" aria-controls="border-top-setting" aria-selected="false"><i class="flaticon-settings-7"></i> Settings</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="borderTopContent">
                                    <div class="tab-pane fade show active" id="border-top-home" role="tabpanel" aria-labelledby="border-top-home-tab">
                                        <h4 class="mb-4">We move your world!</h4>
                                        <p class="mb-4">
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                                
                                        </p>

                                        <p>
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>      
                                    </div>
                                    <div class="tab-pane fade" id="border-top-profile" role="tabpanel" aria-labelledby="border-top-profile-tab">
                                        <div class="media mt-4 mb-3">
                                            <img class="mr-3" src="assets/img/90x90.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="border-top-contact" role="tabpanel" aria-labelledby="border-top-contact-tab">
                                        <p class="dropcap  dc-outline-primary">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                    <div class="tab-pane fade" id="border-top-setting" role="tabpanel" aria-labelledby="border-top-setting-tab">
                                        <blockquote class="blockquote">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                        </blockquote>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    
                </div>

                
            </div>
        </div>
        <!--  END CONTENT PART  -->
    </div>
    <!-- END MAIN CONTAINER -->

    <!--  BEGIN FOOTER  -->
    <footer class="footer-section theme-footer">

        <div class="footer-section-1  sidebar-theme">
            
        </div>

        <div class="footer-section-2 container-fluid">
            <div class="row">
                <div id="toggle-grid" class="col-xl-7 col-md-6 col-sm-6 col-12 text-sm-left text-center">
                    <ul class="list-inline links ml-sm-5">
                        <li class="list-inline-item">
                            <a target="_blank" href="https://themeforest.net/item/equation-responsive-admin-dashboard-template/23191987">Buy</a>
                        </li>
                    </ul>
                </div>
                <div class="col-xl-5 col-md-6 col-sm-6 col-12">
                    <ul class="list-inline mb-0 d-flex justify-content-sm-end justify-content-center mr-sm-3 ml-sm-0 mx-3">
                        <li class="list-inline-item  mr-3">
                            <p class="bottom-footer">&#xA9; 2019 <a target="_blank" href="https://designreset.com/equation">Equation Admin Theme</a></p>
                        </li>
                        <li class="list-inline-item align-self-center">
                            <div class="scrollTop"><i class="flaticon-up-arrow-fill-1"></i></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!--  END FOOTER  -->

    <!--  BEGIN PROFILE SIDEBAR  -->
    <aside class="profile-sidebar text-center">
        <div class="profile-content profile-content-scroll">
            <div class="usr-profile">
                <img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
            </div>
            <p class="user-name mt-4 mb-4">Vincent Carpenter</p>
            <div class="">
                <div class="accordion" id="user-stats">
                    <div class="card">
                        <div class="card-header pb-4 mb-4" id="status">
                            <h6 class="mb-0" data-toggle="collapse" data-target="#user-status" aria-expanded="true" aria-controls="user-status"><i class="flaticon-view-3 mr-2"></i> Status <i class="flaticon-down-arrow ml-2"></i> </h6>
                        </div>
                        <div id="user-status" class="collapse show" aria-labelledby="status" data-parent="#user-stats">
                            <div class="card-body text-left">
                                <ul class="list-unstyled pb-4">
                                    <li class="status-online"><a href="javascript:void(0);">Online</a></li>
                                    <li class="status-away"><a href="javascript:void(0);">Away</a></li>
                                    <li class="status-no-disturb"><a href="javascript:void(0);">Not Disturb</a></li>
                                    <li class="status-invisible"><a href="javascript:void(0);">Invisible</a></li>
                                    <li class="status-offline"><a href="javascript:void(0);">Offline</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-links text-left">
                <ul class="list-unstyled">
                    <li><a href="apps_mailbox.html"><i class="flaticon-mail-22"></i> Inbox</a></li>
                    <li><a href="user_profile.html"><i class="flaticon-user-11"></i> My Profile</a></li>
                    <li><a href="user_login_1.html"><i class="flaticon-power-off"></i> Logout</a></li>
                </ul>
            </div>
        </div>
    </aside>
    <!--  BEGIN PROFILE SIDEBAR  -->
    
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <script src="assets/js/libs/jquery-3.1.1.min.js"></script>
    <script src="assets/js/loader.js"></script>
    <script src="bootstrap/js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="assets/js/app.js"></script>
    
    <script>
        $(document).ready(function() {
            App.init();
        });
    </script>
    <script src="assets/js/custom.js"></script>
    <!-- END GLOBAL MANDATORY STYLES -->    
</body>
</html>