<!-- Wrapper -->
    <div class="wrapper"> 
        <!-- Header -->
        <header class="header white-bg fixed-top d-flex align-content-center flex-wrap">
            ...................................
        </header>
        <!-- End Header -->

        <!-- Main Wrapper -->
        <div class="main-wrapper">
            <!-- Sidebar -->
            <nav class="sidebar" data-trigger="scrollbar">
                ...................................
            </nav>
            <!-- End Sidebar -->

            <!-- Main Content -->
            <div class="main-content">
                ...................................
            </div>
            <!-- End Main Content -->
        </div>
        <!-- End Main Wrapper -->

        <!-- Footer -->
        <footer class="footer">
            ...................................
        </footer>
        <!-- End Footer -->
    </div>
    <!-- End wrapper -->

                

/*
    *******************
    Template name:  Dashmin
    Version:        1.0
    Author:         ThemeLooks
    Author url:     http://themelooks.com

    NOTE:
    -----
    Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
    We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

    ******** CSS INDEX ********
    01. Base
        1.1 Reset 
        1.2 Padding/Margin
        1.3 color
    02. Components
        2.1 Common Classes
        2.2 Animations
        2.3 Pagination
        2.4 Buttons
        2.5 Table
        2.6 Progress
        2.7 Input
    03. Layout
        3.1 Header 
        3.2 Sidebar
        3.3 Footer
        3.4 Main Content
        3.5 Aside
    04. Dashboard
        4.1 Dashboard
        4.2 Social Analytics
    05. Ecommerce
        5.1 Ecommerce1
        5.2 Ecommerce2
        5.3 Product Details
        5.4 Cartlist
    06. Apps
        6.1 Mail
        6.2 Chat
        6.3 Todo List
        6.4 Calendar
        6.5 Invoice
        6.6 Contact
        6.7 Project Manager
        6.8 File Manager
    07. Form & Table
        7.1 Form Elements
        7.2 Form Wizard
    08. UI Elements
        8.1 Widget
        8.2 Icons
    09. Pages
        9.1 FAQ
        9.2 Price
        9.3 Timeline
        9.4 Account Settings
        9.5 Authentications
        9.6 Coming Soon
        9.7 Miscellaneous
        9.8 Profile
    10. Extension
        10.1 Extension

    ********************/

                

/* ************************
   01.1: Reset
   ********************* */
*,
*::before,
*::after {
  outline: none !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

::-moz-selection {
  text-shadow: none;
  color: #ffffff;
}

::selection {
  text-shadow: none;
  color: #ffffff;
}

                

/*---------------------------------------------
Template name :  Dashmin
Version       :  1.0
Author        :  ThemeLooks
Author url    :  http://themelooks.com


[Table of Content]

    01: Main Sidebar
    02: Background Image
    03: Collapse
    04: Header Search Box
    05: Changing svg
    06: Checkboxes Selected
    07: To Do List Parent border bottom
    08: Perfect Scrollbar
    09: Progress Bar
    10: Process Bar
    11: Date Time
    12: Email Cc & Bcc
    13: Chat Search Box
    14: Contact List Table Row & Contact box remove & Edit
    15: Contact PopUp Add Avatar
    16: Project Box Background Change
    17: Copy Shareable Link
    18: Share comment box
    19: File Maneger Dropdown Options
    20: Textarea Word Count
    21: Radio Validation
    22: File Upload
    23: Table Contextual Background
    24: Session Timeout Circular Countdown
    25: Drag & Drop
    26: Add Workplace
    27: About Info Edit, Delete & Update Workplace
    28: About skill edit

----------------------------------------------*/

                

$(function () {
    "use strict";

    /*===================
    01: Main Sidebar
    =====================*/
    /* Parent li add class */
    var body = $("body");
    $('.sidebar .sidebar-body').find('ul li').parents('.sidebar-body ul li').addClass('has-sub-item');

    /* Submenu Opened */
    $('.sidebar .sidebar-body').find(".has-sub-item > a").on("click", function(event){
        event.preventDefault();
        if(!body.hasClass("sidebar-folded") || body.hasClass("open-sidebar-folded")) {
            $(this).parent(".has-sub-item").toggleClass("sub-menu-opened");
            if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').slideUp('200');
            } else {
                $(this).siblings('ul').addClass('open').slideDown('200');
            }
        }
    });

    /* If has class sub-menu-opened */
    function preloadFunc() {
        if( $('.sidebar .sidebar-body').find(".has-sub-item").hasClass("sub-menu-opened")) {
            $('.sidebar .sidebar-body').find(".sub-menu-opened a").siblings("ul").addClass('open').show();    
        }
    }
    window.onpaint = preloadFunc();


    /* Open Sidebar */
    $(".header .header-toogle-menu, .offcanvas-overlay").on("click", function() {
        body.toggleClass("sidebar-open");
        $(".offcanvas-overlay").toggleClass("active");
        //body.find(".sidebar-body .has-sub-item a").siblings('ul').removeClass('open').slideUp('fast');
    });

    /* Holded Sidebar on Mouseenter */
    $(window).resize(function() {
        sidebar();
    });

    /* Sidebar function */
    function sidebar() {
        if ($(window).width() > 1023) {
            /* Remove siderbar-open */
            if(body.is('.sidebar-open')) {
                body.removeClass('sidebar-open');
            }

            /* Holded Sidebar on Mouseenter */
            $(".sidebar .sidebar-body").on("mouseenter", function() {
                body.addClass("open-sidebar-folded");
            });

            /* Holded Sidebar on Mouseleave */
            $(".sidebar .sidebar-body").on("mouseleave", function() {
                body.removeClass("open-sidebar-folded");
                if(body.hasClass("sidebar-folded")) {
                    $(".sidebar").find(".sidebar-body .has-sub-item a").siblings('ul').removeClass('open').slideUp(0);
                }
            });

            /* Holded Sidebar */
            $(".sidebar .sidebar-toogle-pin").on("click", function() {
                body.toggleClass("sidebar-folded");
                body.find(".sidebar-body .has-sub-item a").siblings('ul').removeClass('open').slideUp('fast');
            });
        } else {
            /* Remove sidebar-folded & open-sidebar-folded */
            if(body.is('.sidebar-folded, .open-sidebar-folded')) {
                body.removeClass('sidebar-folded open-sidebar-folded');
            }
        }
    }
    sidebar();

    /*========================
    02: Background Image
    ==========================*/
    var $bgImg = $('[data-bg-img]');
    $bgImg.css('background-image', function () {
        return 'url("' + $(this).data('bg-img') + '")';
    }).removeAttr('data-bg-img').addClass('bg-img');