Introduction


Severny admin is a popular open source WebApp template for admin dashboards and control panels. Severny admin is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Severny admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

We put a lot of love and effort to make Severny admin a useful template for everyone and now It comes with 5 unique demos. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Severny admin, you will be entitled to free download of all future updates for the same license.


NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.
Support does include:
  • 1) Answering your questions or problems regarding the template.
  • 2) Giving solution to the Bugs reported.

Support does not include:
  • 1) Custmaization Work
  • 2) Any Installation Work
  • 3) Support for any Third Party Plugins / Software
  • 4) Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)
  • 5) Solve bug in your implemented template

Installation


We are using gulp which allows to have complete compiler and minifier for our assets. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g [email protected] from your terminal.

Installation

To setup severny, follow below mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running in your computer

  • Install Dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder. And now, you are ready to use severny admin.

Command that can be used in this severny admin are as below:

Command Description
gulp Applying this command will start the task of compiling scss to css and then minifying it. It also minifies all the js files inside the given source path in gulpfile.js. You just have to save any open scss/js file and it will automatically compile and minify that file. It will show like below image, once it has started.
gulp copy If you are installing any new plugin through NPM and want that in your assets/libs folder, then you have to apply this command.
Troubleshooting
  • I am getting error "Error: ENOENT: no such file or directory, scandir '/root/website/node_modules/node-sass/vendor" while running npm install, what should I do?

    If you are getting this error, there could be multiple root causes, please try following workarounds:

    • 1. Run npm rebuild node-sass to re-install node-sass
    • 2. Delete node_modules folder and re run npm install
If you are having any question or getting difficulty while installing severny, we are here to help.

Layout options


With the theme settings you can convert the theme into dark or light, you can change sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

You can find app.init.js file from here:

                                    
                                        dist/js/app.init.js
                                    
                                
                                    
                                        Theme: false, // this can be true or false ( true means dark and false means light ),
                                        Layout: 'vertical',
                                        NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarType: 'full', // You can change it full / mini-sidebar
                                        SidebarColor: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid ) 
                                    
                                
How to apply Dark Theme ?

For dark theme, you can change Theme:true in place of Theme:false.

                                    
                                        Theme: true, // this can be true or false ( true means dark and false means light ),
                                    
                                
How to apply Minisidebar(Collapse) Sidebar ?

For Collapse sidebar, you can change SidebarType: 'mini-sidebar' in place of SidebarType: 'full'.

                                    
                                        SidebarType: 'mini-sidebar', // You can change it full / mini-sidebar
                                    
                                
How to apply Full Sidebar ?

For Full sidebar, you can change SidebarType: 'full'.

                                    
                                        SidebarType: 'full', // You can change it full / mini-sidebar
                                    
                                
How to apply Fixed Sidebar ?

For Fixed sidebar, you can change SidebarPosition: true, in place of SidebarPosition: false,.

                                    
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Fixed Header ?

For Fixed Header, you can change HeaderPosition: true, in place of HeaderPosition: false.

                                    
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Boxed Layout ?

For Boxed Layout, you can change BoxedLayout: true in place of BoxedLayout: false.

                                    
                                        BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid ) 
                                    
                                

For the Horizontal Demo Version


You can find app.init.horizontal.js file from here:

                                    
                                        dist/js/app.init.horizontal.js
                                    
                                

For Horizontal sidebar, you can change Layout: 'horizontal'.

                                    
                                        $(function() {
										    "use strict";
										    $("#main-wrapper").AdminSettings({
										        Theme: false, // this can be true or false ( true means dark and false means light ),
										        Layout: 'horizontal',
										        NavbarBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
										        SidebarType: 'full', // You can change it full / mini-sidebar
										        SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
										        SidebarPosition: false, // it can be true / false ( true means Fixed and false means absolute )
										        HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute )
										        BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid ) 
										    });
										}); 
                                    
                                

Color Variations

With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

                                    
                                        $(function() {
										    "use strict";
										    $("#main-wrapper").AdminSettings({
										        Theme: false, // this can be true or false ( true means dark and false means light ),
										        Layout: 'vertical',
										        NavbarBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
										        SidebarType: 'full', // You can change it full / mini-sidebar
										        SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
										        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
										        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
										        BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid ) 
										    });
										});
                                    
                                
How to apply Dark Theme ?

For dark theme, you can change Theme:true in place of Theme:false.

                                    
                                        Theme: true, // this can be true or false ( true means dark and false means light ),
                                    
                                
How to Change Sidebar Color?
To change a sidebar color, choose any of the following options.

To apply blue color of sidebar

                                    
                                        SidebarColor: 'skin1' //To apply blue color of sidebar
                                    
                                
How to Change Navbar Color?
To change a navbar color, choose any of the following options.

To apply blue color of navbar

                                    
                                        NavbarBg: 'skin1' //To apply blue color of navbar
                                    
                                

Folder Structure


we follow simple structure for the template

                                    
├── Severny                                                                                   
    ├── documentation
    ├── landingpage
    └── src
        │   ├── assets/
        |   |   └── extra-libs
        │   │   └── images
        │   │   └── libs
        │   ├── dist/
        |   |   └── css
        │   │   └── js
        │   ├── html/
        |   |   └── dark
        │   │   └── horizontal
        │   │   └── menu-sidebar
        │   │   └── mini-sidebar
        │   │   └── rtl
        │   ├── scss/
        │   │   └── bootstrap/
        │   │   └── config/
        │   │   └── custom/
        │   │   └── icons/
        │   │   └── style.scss
        │   │   └── style-dark.scss
        │   ├── gulpfile.js
        │   ├── package.json
        │   ├── package-lock.json
        |   └── .gitignore
                                    
                                

Plugins (Find Js and CSS Path)


You can find plugins from here as per page requirements

Select Plugin
jQuery Block-UI
CSS Files
                                        
                                            No CSS available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/blockUI/jquery.blockUI.js" type="text/javascript"></script>
                                        
                                    
Bootstrap Colorpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap datepaginator
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap datepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap duallistbox
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-duallistbox/dist/bootstrap-duallistbox.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap material datetimepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js" type="text/javascript"></script>
                                        
                                    
Bootstrap switch
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap touchspin
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
                                        
                                    
chart-js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/chart-js/dist/Chart.min.js" type="text/javascript"></script>
                                        
                                    
chartist
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/chartist/dist/chartist.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/chartist/dist/chartist.min.js" type="text/javascript"></script>
                                        
                                    
chartist-plugin-tooltips
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js" type="text/javascript"></script>
                                        
                                    
ckeditor
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css" />
                                         <link rel="stylesheet" type="text/css" href="../../src/assets/libs/ckeditor/samples/css/samples.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/ckeditor/ckeditor.js" type="text/javascript"></script>
                                         <script src=" ../../src/assets/libs/ckeditor/samples/js/sample.js" type="text/javascript"></script>
                                        
                                    
clockpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/clockpicker/dist/bootstrap-clockpicker.min.css" />

                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/clockpicker/dist/jquery-clockpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/clockpicker/dist/bootstrap-clockpicker.min.js" type="text/javascript"></script>

                                        <script src="../../src/assets/libs/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>
                                        
                                    
cropper
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/cropper/dist/cropper.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/cropper/dist/cropper.min.js" type="text/javascript"></script>
                                        
                                    
datatables
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/datatables/media/css/jquery.dataTables.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
                                        
                                    
daterangepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/daterangepicker/daterangepicker.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/daterangepicker/daterangepicker.js" type="text/javascript"></script>
                                        
                                    
dragula
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/dragula/dist/dragula.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/dragula/dist/dragula.min.js" type="text/javascript"></script>
                                        
                                    
dropzone
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/dropzone/dist/dropzone.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/dropzone/dist/dropzone.js" type="text/javascript"></script>
                                        
                                    
echarts
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/echarts/dist/echarts.min.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/echarts/dist/echarts.simple.min.js" type="text/javascript"></script>
                                        
                                    
flot
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/flot/jquery.flot.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/flot/jquery.flot.pie.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/flot/jquery.flot.resize.js" type="text/javascript"></script>
                                        
                                    
footable
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/footable/css/footable.core.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
                                        
                                    
footable
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/footable/css/footable.core.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
                                        
                                    
fullcalendar
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../src/assets/libs/fullcalendar/dist/fullcalendar.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/fullcalendar/dist/fullcalendar.min.js" type="text/javascript"></script>
                                        
                                    
gaugeJS
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/gaugeJS/dist/gauge.min.js" type="text/javascript"></script>
                                        
                                    
gmaps
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/gmaps/dist/gmaps.min.js" type="text/javascript"></script>
                                        
                                    
inputmask
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js" type="text/javascript"></script>
                                        
                                    
jquery
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
                                        
                                    
jquery.flot.tooltip
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>
                                        
                                    
jquery.repeater
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery.repeater/js/jquery.repeater.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asColor
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-asColor/js/jquery-asColor.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asColorPicker
CSS Files
                                        
                                        <script src="../../src/assets/libs/jquery-asColorPicker/dist/css/asColorPicker.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js" type="text/javascript"></script>
                                        
                                    
jquery-asGradient
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-asGradient/dist/jquery-asGradient.min.js" type="text/javascript"></script>
                                        
                                    
jquery-sessiontimeout
CSS Files
                                        
                                       css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-sessiontimeout/jquery.sessionTimeout.min.js" type="text/javascript"></script>
                                        
                                    
jquery-steps
CSS Files
                                        
                                        <script src="../../src/assets/libs/jquery-steps/jquery.steps.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-steps/build/jquery.steps.min.js" type="text/javascript"></script>
                                        
                                    
jquery-validation
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
                                        
                                    
jsgrid
CSS Files
                                        
                                        <script src="../../src/assets/libs/jsgrid/dist/jsgrid.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
                                        
                                    
jvectormap
CSS Files
                                        
                                        <script src="../../src/assets/libs/jvectormap/jquery-jvectormap.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/jvectormap/jquery-jvectormap.min.js" type="text/javascript"></script>
                                        
                                    
magnific-popup
CSS Files
                                        
                                        <script src="../../src/assets/libs/magnific-popup/dist/magnific-popup.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
                                        
                                    
masonry-layout
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/masonry-layout/dist/masonry.pkgd.min.js" type="text/javascript"></script>
                                        
                                    
moment
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/moment/moment.js" type="text/javascript"></script>
                                        
                                    
morris.js
CSS Files
                                        
                                        <script src="../../src/assets/libs/morris.js/morris.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/morris.js/morris.min.js" type="text/javascript"></script>
                                        
                                    
nestable
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/nestable/jquery.nestable.js" type="text/javascript"></script>
                                        
                                    
perfect-scrollbar
CSS Files
                                        
                                        <script src="../../src/assets/libs/perfect-scrollbar/css/perfect-scrollbar.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/perfect-scrollbar/js/perfect-scrollbar.min.js" type="text/javascript"></script>
                                        
                                    
pickadate
CSS Files
                                        
                                        <script src="../../src/assets/libs/pickadate/lib/themes/default.css" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/pickadate/lib/themes/default.date.css" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/pickadate/lib/themes/default.time.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/pickadate/lib/picker.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/pickadate/lib/picker.date.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/pickadate/lib/picker.time.js" type="text/javascript"></script>

                                        
                                    
popper.js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/popper.js/dist/popper.min.js" type="text/javascript"></script>
                                        
                                    
prism
CSS Files
                                        
                                        <script src="../../src/assets/extra-libs/prism/prism.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/extra-libs/prism/prism.js" type="text/javascript"></script>
                                        
                                    
taskboard
CSS Files
                                        
                                        <script src="../../src/assets/extra-libs/taskboard/css/lobilist.css" type="text/javascript"></script>
                                        <script src="../../src/assets/extra-libs/taskboard/css/jquery-ui.min.css" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/extra-libs/taskboard/js/lobilist.js" type="text/javascript"></script>
                                        <script src="../../src/assets/extra-libs/taskboard/js/lobibox.min.js" type="text/javascript"></script>
                                        <script src="../../src/assets/extra-libs/taskboard/js/task-init.js" type="text/javascript"></script>
                                        
                                    
treeview
CSS Files
                                        
                                        <script src="../../src/assets/extra-libs/treeview/dist/bootstrap-treeview.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/extra-libs/treeview/dist/bootstrap-treeview.init.js" type="text/javascript"></script>
                                        <script src="../../src/assets/extra-libs/treeview/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
                                        
                                    
quill
CSS Files
                                        
                                        <script src="../../src/assets/libs/quill/dist/quill.snow.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/quill/dist/quill.min.js" type="text/javascript"></script>
                                        
                                    
raphael
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/raphael/raphael.min.js" type="text/javascript"></script>
                                        
                                    
select2
CSS Files
                                        
                                        <script src="../../src/assets/libs/select2/dist/css/select2.min.cssquot; type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/select2/dist/js/select2.min.js" type="text/javascript"></script>
                                        
                                    
summernote
CSS Files
                                        
                                        <script src="../../src/assets/libs/summernote/dist/summernote.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/summernote/dist/summernote.min.js" type="text/javascript"></script>
                                        
                                    
sweetalert2
CSS Files
                                        
                                        <script src="../../src/assets/libs/sweetalert2/dist/sweetalert2.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/sweetalert2/sweet-alert.init.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
                                        
                                    
tablesaw
CSS Files
                                        
                                        <script src="../../src/assets/libs/tablesaw/dist/tablesaw.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/tablesaw/dist/tablesaw.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/tablesaw/dist/tablesaw-init.js" type="text/javascript"></script>
                                        
                                    
tinymce
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/tinymce/tinymce.min.js" type="text/javascript"></script>
                                        <script src="../../src/assets/libs/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
                                        
                                    
typeahead.js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../src/assets/libs/typeahead.js/dist/typeahead.jquery.min.js" type="text/javascript"></script>
                                        
                                    

Page Structure


Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

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

                                        <head>
                                            <meta charset="utf-8">
                                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                            <!-- Tell the browser to be responsive to screen width -->
                                            <meta name="viewport" content="width=device-width, initial-scale=1">
                                            <meta name="description" content="">
                                            <meta name="author" content="">
                                            <!-- Favicon icon -->
                                            <link rel="icon" type="image/png" sizes="16x16" href="../../src/assets/images/favicon.png">
                                            <title>Severny admin Template - The Ultimate Multipurpose admin template</title>
                                            <!-- Custom CSS -->
                                            <link href="dist/css/style.css" rel="stylesheet">
                                            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
                                            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                            <!--[if lt IE 9]>
                                            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                                            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
                                        <![endif]-->
                                        </head>
                                    
                                

Preloader (spinner)


This is for the loader when page load

                                    
                                        <!-- ============================================================== -->
                                        <!-- Preloader - style you can find in spinners.css -->
                                        <!-- ============================================================== -->
                                        <div class="preloader">
                                            <div class="lds-ripple">
                                                <div class="lds-pos"></div>
                                                <div class="lds-pos"></div>
                                            </div>
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- Preloader end -->
                                        <!-- ============================================================== -->              
                                    
                                

Logo


This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload

                                    
                                        <!-- ============================================================== -->
                                        <!-- Logo -->
                                        <!-- ============================================================== -->
                                        <a class="navbar-brand" href="index.html">
                                            <!-- Logo icon -->
                                            <b class="logo-icon">
                                                <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                                <!-- Dark Logo icon -->
                                                <img src="../../src/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                                                <!-- Light Logo icon -->
                                                <img src="../../src/assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                                            </b>
                                            <!--End Logo icon -->
                                            <!-- Logo text -->
                                            <span class="logo-text">
                                                 <!-- dark Logo text -->
                                                 <img src="../../src/assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                                                 <!-- Light Logo text -->    
                                                 <img src="../../src/assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
                                            </span>
                                        </a>
                                        <!-- ============================================================== -->
                                        <!-- End Logo -->
                                        <!-- ============================================================== -->                   
                                    
                                

Left Sidebar


We have created leftsidebar with the following code.

                                            
                                                <aside class="left-sidebar">
                                                    <div class="user-profile text-center pt-2">
                                                        <div class="d-flex align-items-center justify-content-center pb-3">
                                                            <div class="dropdown sub-dropdown">
                                                                <button class="btn profile-pic rounded-circle position-relative" type="button"
                                                                    id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <span class="badge rounded-circle badge-success profile-dd text-center"><i
                                                                            class="fas fa-angle-down"></i></span>
                                                                </button>
                                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                    <a class="dropdown-item" href="javascript:void(0)"><i
                                                                            class="fas fa-circle text-success font-12 mr-2"></i>Active</a>
                                                                    <a class="dropdown-item" href="javascript:void(0)"><i
                                                                            class="fas fa-circle text-warning font-12 mr-2"></i>Away</a>
                                                                    <a class="dropdown-item" href="javascript:void(0)"><i
                                                                            class="fas fa-circle text-danger font-12 mr-2"></i>Do
                                                                        not
                                                                        Disturb</a>
                                                                    <a class="dropdown-item" href="javascript:void(0)"><i
                                                                            class="fas fa-circle text-muted font-12 mr-2"></i>Invisible</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="profile-section">
                                                            <p class="font-weight-light mb-0 font-18">Sandra Phillip</p>
                                                            <span class="op-7 font-14">Marketing Head</span>
                                                            <div class="row border-top border-bottom mt-3 no-gutters">
                                                                <div class="col-4 border-right">
                                                                    <a class="p-3 d-block menubar-height dropdown-toggle" href="javascript:void(0)" id="bell"
                                                                        data-display="static" role="button" data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="false">
                                                                        <span><i data-feather="bell" class="svg-icon op-7"></i></span>
                                                                        <span class="badge badge-danger badge-no rounded-circle">5</span>
                                                                    </a>
                                                                    <div class="dropdown-menu mailbox pt-0">
                                                                        <ul class="list-style-none mb-0">
                                                                            <li>
                                                                                <div
                                                                                    class="drop-title bg-info text-white position-relative rounded-top px-3 pt-2 pb-3">
                                                                                    <h5 class="mb-0 mt-1 text-white">4 New</h5>
                                                                                    <span class="font-weight-light">Notifications</span>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="message-center notifications position-relative"
                                                                                    style="height:200px;">
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <div class="btn btn-danger rounded-circle btn-circle"><i
                                                                                                data-feather="airplay" class="text-white"></i></div>
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">Just see
                                                                                                the my new
                                                                                                admin!</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:30
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <span class="btn btn-success rounded-circle btn-circle"><i
                                                                                                data-feather="calendar" class="text-white"></i></span>
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Event today</h6>
                                                                                            <span
                                                                                                class="font-12 text-nowrap d-block text-muted text-truncate">Just
                                                                                                a reminder that you have event</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:10
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <span class="btn btn-info rounded-circle btn-circle"><i
                                                                                                data-feather="settings" class="text-white"></i></span>
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Settings</h6>
                                                                                            <span
                                                                                                class="font-12 text-nowrap d-block text-muted text-truncate">You
                                                                                                can customize this template
                                                                                                as you want</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:08
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <span class="btn btn-primary rounded-circle btn-circle"><i
                                                                                                data-feather="box" class="text-white"></i></span>
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
                                                                                                class="font-12 text-nowrap d-block text-muted">Just
                                                                                                see the my admin!</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:02
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <a class="nav-link pt-2 border-top text-center text-muted"
                                                                                    href="javascript:void(0);">
                                                                                    <strong>Check all notifications</strong>
                                                                                    <i class="fa fa-angle-right"></i>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4 border-right">
                                                                    <a class="p-3 d-block menubar-height" id="bottom-sidebar" href="javascript:void(0)"
                                                                        role="button">
                                                                        <span><i data-feather="settings" class="svg-icon op-7"></i></span>
                                                                    </a>
                                                                </div>
                                                                <div class="col-4">
                                                                    <a class="p-3 d-block menubar-height dropdown-toggle" href="javascript:void(0)"
                                                                        role="button" data-display="static" data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="false">
                                                                        <span><i data-feather="message-square" class="svg-icon op-7"></i></span>
                                                                    </a>
                                                                    <div class="dropdown-menu dropdown-menu-right mailbox pt-0">
                                                                        <ul class="list-style-none mb-0">
                                                                            <li>
                                                                                <div
                                                                                    class="drop-title bg-info text-white position-relative rounded-top px-3 pt-2 pb-3">
                                                                                    <h5 class="mb-0 mt-1 text-white">4 New</h5>
                                                                                    <span class="font-weight-light">Chats</span>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="message-center notifications position-relative"
                                                                                    style="height:200px;">
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <img class="img-fluid rounded-circle" width="40" style="height:40px"
                                                                                            src="../../assets/images/users/widget-table-pic1.jpg">
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">John Smith</h6>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">Just see
                                                                                                the my new
                                                                                                admin!</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:30
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <img class="img-fluid rounded-circle" width="40" style="height:40px"
                                                                                            src="../../assets/images/users/widget-table-pic2.jpg">
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Peter John</h6>
                                                                                            <span
                                                                                                class="font-12 text-nowrap d-block text-muted text-truncate">Just
                                                                                                a reminder that you have event</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:10
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <img class="img-fluid rounded-circle" width="40" style="height:40px"
                                                                                            src="../../assets/images/users/widget-table-pic3.jpg">
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">Steve Jobs</h6>
                                                                                            <span
                                                                                                class="font-12 text-nowrap d-block text-muted text-truncate">You
                                                                                                can customize this template
                                                                                                as you want</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:08
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                    <!-- Message -->
                                                                                    <a href="javascript:void(0)"
                                                                                        class="message-item d-flex align-items-center border-bottom px-3 py-2">
                                                                                        <img class="img-fluid rounded-circle" width="40" style="height:40px"
                                                                                            src="../../assets/images/users/widget-table-pic4.jpg">
                                                                                        <div class="w-75 d-inline-block v-middle pl-2">
                                                                                            <h6 class="message-title mb-0 mt-1">John Deo</h6> <span
                                                                                                class="font-12 text-nowrap d-block text-muted">Just
                                                                                                see the my admin!</span>
                                                                                            <span class="font-12 text-nowrap d-block text-muted">9:02
                                                                                                AM</span>
                                                                                        </div>
                                                                                    </a>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <a class="nav-link pt-2 border-top text-center text-muted"
                                                                                    href="javascript:void(0);">
                                                                                    <strong>Check all notifications</strong>
                                                                                    <i class="fa fa-angle-right"></i>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Sidebar scroll-->
                                                    <div class="scroll-sidebar">
                                                        <!-- Sidebar navigation-->
                                                        <nav class="sidebar-nav">
                                                            <ul id="sidebarnav">
                                                                <li class="nav-small-cap"><span class="hide-menu">Dashboards</span></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
                                                                        aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
                                                                            class="hide-menu">Multipurpose</span></a></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index2.html"
                                                                        aria-expanded="false"><i data-feather="bar-chart-2" class="feather-icon"></i><span
                                                                            class="hide-menu">Analytical <span
                                                                                class="badge badge-pill badge-success ml-2 font-weight-normal py-1 px-2">New</span>
                                                                        </span></a></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index3.html"
                                                                        aria-expanded="false"><i data-feather="shopping-bag" class="feather-icon"></i><span
                                                                            class="hide-menu">eCommerce</span></a></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index4.html"
                                                                        aria-expanded="false"><i data-feather="codepen" class="feather-icon"></i><span
                                                                            class="hide-menu">Modern</span></a></li>
                                                                <li class="list-divider"></li>
                                                                <li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="mail" class="feather-icon"></i><span
                                                                            class="hide-menu">Email Application </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="inbox-email.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Email
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="inbox-email-detail.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Email
                                                                                    Details
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="inbox-email-compose.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Email Compose </span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
                                                                            class="hide-menu">Ticket Application
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="ticket-list.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Ticket List
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="ticket-detail.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Ticket Details
                                                                                </span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chats.html"
                                                                        aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
                                                                            class="hide-menu">Chat App</span></a></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
                                                                        aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
                                                                            class="hide-menu">Calendar
                                                                            App <span
                                                                                class="badge badge-pill badge-primary ml-2 font-weight-normal py-1 px-2">Hot</span>
                                                                        </span></a></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-taskboard.html"
                                                                        aria-expanded="false"><i data-feather="clipboard" class="feather-icon"></i><span
                                                                            class="hide-menu">Taskboard</span></a></li>
                                        
                                                                <li class="list-divider"></li>
                                                                <li class="nav-small-cap"><span class="hide-menu">Components</span></li>
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
                                                                            class="hide-menu">Forms
                                                                            <span
                                                                                class="badge badge-pill badge-danger ml-2 font-weight-normal py-1 px-2">8</span>
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Elements</span></li>
                                                                        <li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Inputs
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-input-groups.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Groups
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Grids
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Checkboxes & Radios
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-bootstrap-touchspin.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Bootstrap Touchspin
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-bootstrap-switch.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Bootstrap Switch </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-select2.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Select2 </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-dual-listbox.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Dual Listbox </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Layouts</span></li>
                                                                        <li class="sidebar-item"><a href="form-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Basic </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-horizontal.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Horizontal </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-actions.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Actions </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-row-separator.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Row Separator </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-bordered.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Bordered </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-striped-row.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Striped Rows </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-detail.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Details </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Addons</span></li>
                                                                        <li class="sidebar-item"><a href="form-paginator.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Paginator</span></a></li>
                                                                        <li class="sidebar-item"><a href="form-img-cropper.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Image Cropper </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-dropzone.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Dropzone
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-mask.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Mask </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-typeahead.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Typeahead </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Validation</span></li>
                                                                        <li class="sidebar-item"><a href="form-bootstrap-validation.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Bootstrap Validation </span></a>
                                                                        </li>
                                                                        <li class="sidebar-item"><a href="form-custom-validation.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Custom Validation </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Pickers</span></li>
                                                                        <li class="sidebar-item"><a href="form-picker-colorpicker.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Form Colorpicker </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-picker-datetimepicker.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Form Datetimepicker </span></a>
                                                                        </li>
                                                                        <li class="sidebar-item"><a href="form-picker-bootstrap-rangepicker.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Form Bootstrap Rangepicker
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-picker-bootstrap-datepicker.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Form Bootstrap Datepicker
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-picker-material-datepicker.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Form Material Datepicker
                                                                                </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Form Editors</span></li>
                                                                        <li class="sidebar-item"><a href="form-editor-ckeditor.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Ckeditor </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-editor-quill.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Quill Editor </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-editor-summernote.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Summernote Editor </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-editor-tinymce.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Tinymce Editor </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Other Forms</span></li>
                                                                        <li class="sidebar-item"><a href="form-wizard.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Wizard </span></a></li>
                                                                        <li class="sidebar-item"><a href="form-repeater.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Form Repeater </span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
                                                                            class="hide-menu">Tables
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="nav-small-cap"><span class="hide-menu">Bootstrap Tables</span></li>
                                                                        <li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Basic Table
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Dark Basic Table
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Sizing Table
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Coloured Table Layout
                                                                                </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">DataTables</span></li>
                                                                        <li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Basic Datatables
                                                                                    Layout </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-datatable-api.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> API </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-datatable-advanced.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Advanced Datatables </span></a>
                                                                        </li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Other tables</span></li>
                                                                        <li class="sidebar-item"><a href="table-jsgrid.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Table Jsgrid </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-responsive.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Table Responsive </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-footable.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Table Footable </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-editable.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Table Editable </span></a></li>
                                                                        <li class="sidebar-item"><a href="table-bootstrap.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Table Bootstrap </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="sliders" class="feather-icon"></i><span
                                                                            class="hide-menu">Widgets
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="widget-apps.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Apps Widget </span></a></li>
                                                                        <li class="sidebar-item"><a href="widget-charts.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Charts Widget </span></a></li>
                                                                        <li class="sidebar-item"><a href="widgets-data.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Data Widget </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
                                                                            class="hide-menu">Charts
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="nav-small-cap"><span class="hide-menu">C3 Charts</span></li>
                                                                        <li class="sidebar-item"><a href="chart-c3-axis.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> C3 Axis Chart </span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-c3-bar.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> C3 Bar Chart </span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-c3-data.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> C3 Data Chart </span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-c3-line.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> C3 Line Chart </span></a></li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Echarts</span></li>
                                                                        <li class="sidebar-item"><a href="chart-echart-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Basic Echarts</span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-echart-bar.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Bar Echarts</span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-echart-pie-doughnut.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Pie & Doughnut Echarts </span></a>
                                                                        </li>
                                                                        <li class="nav-small-cap"><span class="hide-menu">Other Charts</span></li>
                                                                        <li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Morris Chart</span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> ChartJs</span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-sparkline.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Sparkline Chart</span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-chartist.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Chartist Chart </span></a></li>
                                                                        <li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Knob Chart </span></a></li>
                                        
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
                                                                            class="hide-menu">UI Elements
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Buttons
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Modals </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Tabs </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Tooltip & Popover</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Notification</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Progressbar</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Typography</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Bootstrap UI</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Breadcrumb</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
                                                                                    class="hide-menu">List Media</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Grid </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Carousel</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Scrollspy</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Toasts</span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Spinner </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
                                                                            class="hide-menu">Cards
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="ui-cards.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Basic Cards
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-card-customs.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Custom Cards </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-card-weather.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Weather Cards </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-card-draggable.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Draggable Cards </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="package" class="feather-icon"></i><span
                                                                            class="hide-menu">Components
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="component-sweetalert.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Sweetalert
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="component-nestable.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Nestable </span></a></li>
                                                                        <li class="sidebar-item"><a href="component-noui-slider.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Noui Slider </span></a></li>
                                                                        <li class="sidebar-item"><a href="component-rating.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Rating</span></a></li>
                                                                        <li class="sidebar-item"><a href="component-toastr.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Toastr </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="shopping-cart" class="feather-icon"></i><span
                                                                            class="hide-menu">Ecommerce Pages
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="eco-products.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Products </span></a></li>
                                                                        <li class="sidebar-item"><a href="eco-products-cart.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Products Cart </span></a></li>
                                                                        <li class="sidebar-item"><a href="eco-products-edit.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Products Edit </span></a></li>
                                                                        <li class="sidebar-item"><a href="eco-products-detail.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Products Details</span></a></li>
                                                                        <li class="sidebar-item"><a href="eco-products-orders.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Products Orders</span></a></li>
                                                                        <li class="sidebar-item"><a href="eco-products-checkout.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Products Checkout </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="check-square" class="feather-icon"></i><span
                                                                            class="hide-menu">Sample Pages
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="starter-kit.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Starter Kit
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-utility-classes.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Helper Classes </span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-animation.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Animation </span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-search-result.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Search Result</span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-gallery.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Gallery</span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-treeview.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Treeview</span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-block-ui.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Block UI</span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-session-timeout.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Session Timeout</span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-session-idle-timeout.html"
                                                                                class="sidebar-link"><span class="hide-menu">Session Idle Timeout</span></a>
                                                                        </li>
                                                                        <li class="sidebar-item"><a href="pages-maintenance.html" class="sidebar-link"><span
                                                                                    class="hide-menu">Maintenance Page</span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
                                                                            class="hide-menu">Authentication
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="authentication-login1.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Login
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="authentication-login2.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Login 2 </span></a></li>
                                                                        <li class="sidebar-item"><a href="authentication-register1.html"
                                                                                class="sidebar-link"><span class="hide-menu"> Register </span></a></li>
                                                                        <li class="sidebar-item"><a href="authentication-register2.html"
                                                                                class="sidebar-link"><span class="hide-menu">Register 2</span></a></li>
                                                                        <li class="sidebar-item"><a href="authentication-lockscreen.html"
                                                                                class="sidebar-link"><span class="hide-menu">Lock Screen
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="authentication-recover-password.html"
                                                                                class="sidebar-link"><span class="hide-menu">Recover Password
                                                                                </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="users" class="feather-icon"></i><span
                                                                            class="hide-menu">Users
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="ui-user-card.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    User Cards
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="ui-user-contacts.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    User Contact </span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-profile.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    User Profile </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
                                                                            class="hide-menu">Icons
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Fontawesome Icons </span></a></li>
                                                                        <li class="sidebar-item"><a href="icon-material.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Material Icons </span></a></li>
                                                                        <li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Simple Line Icons </span></a></li>
                                                                        <li class="sidebar-item"><a href="icon-themify.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Themify Icons </span></a></li>
                                                                        <li class="sidebar-item"><a href="icon-weather.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Weather Icons </span></a></li>
                                                                        <li class="sidebar-item"><a href="icon-flag.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Flag Icons </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="paperclip" class="feather-icon"></i><span
                                                                            class="hide-menu">Invoice
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="pages-invoice.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Invoice Layout
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="pages-invoice-list.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Invoice List </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="map-pin" class="feather-icon"></i><span
                                                                            class="hide-menu">Maps
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="map-google.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Google Map
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="map-vector.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Vector Map </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="activity" class="feather-icon"></i><span
                                                                            class="hide-menu">Timelines
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="timeline-center.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Center Timeline
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="timeline-horizontal.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Horizontal Timeline </span></a></li>
                                                                        <li class="sidebar-item"><a href="timeline-left.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Left Timeline </span></a></li>
                                                                        <li class="sidebar-item"><a href="timeline-right.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Right Timeline </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="mail" class="feather-icon"></i><span
                                                                            class="hide-menu">Email Templates
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="email-templete-alert.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Alert
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="email-templete-basic.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Basic </span></a></li>
                                                                        <li class="sidebar-item"><a href="email-templete-billing.html"
                                                                                class="sidebar-link"><span class="hide-menu">
                                                                                    Billing </span></a></li>
                                                                        <li class="sidebar-item"><a href="email-templete-password-reset.html"
                                                                                class="sidebar-link"><span class="hide-menu">
                                                                                    Password Reset </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i data-feather="user-x" class="feather-icon"></i><span
                                                                            class="hide-menu">Error Pages
                                                                        </span></a>
                                                                    <ul aria-expanded="false" class="collapse  first-level base-level-line">
                                                                        <li class="sidebar-item"><a href="error-400.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Error 400
                                                                                </span></a></li>
                                                                        <li class="sidebar-item"><a href="error-403.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Error 403 </span></a></li>
                                                                        <li class="sidebar-item"><a href="error-404.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Error 404 </span></a></li>
                                                                        <li class="sidebar-item"><a href="error-500.html" class="sidebar-link"><span
                                                                                    class="hide-menu"> Error 500 </span></a></li>
                                                                        <li class="sidebar-item"><a href="error-503.html" class="sidebar-link"><span
                                                                                    class="hide-menu">
                                                                                    Error 503 </span></a></li>
                                                                    </ul>
                                                                </li>
                                        
                                                                <li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
                                                                        aria-expanded="false"><i class="mdi mdi-notification-clear-all"></i><span
                                                                            class="hide-menu">Multi level
                                                                            dd</span></a>
                                                                    <ul aria-expanded="false" class="collapse first-level">
                                                                        <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                    class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.1</span></a>
                                                                        </li>
                                                                        <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                    class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.2</span></a>
                                                                        </li>
                                                                        <li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
                                                                                aria-expanded="false"><i class="mdi mdi-playlist-plus"></i> <span
                                                                                    class="hide-menu">Menu 1.3</span></a>
                                                                            <ul aria-expanded="false" class="collapse second-level">
                                                                                <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                            class="mdi mdi-octagram"></i><span class="hide-menu"> item
                                                                                            1.3.1</span></a></li>
                                                                                <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                            class="mdi mdi-octagram"></i><span class="hide-menu"> item
                                                                                            1.3.2</span></a></li>
                                                                                <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                            class="mdi mdi-octagram"></i><span class="hide-menu"> item
                                                                                            1.3.3</span></a></li>
                                                                                <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                            class="mdi mdi-octagram"></i><span class="hide-menu"> item
                                                                                            1.3.4</span></a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i
                                                                                    class="mdi mdi-playlist-check"></i><span class="hide-menu"> item
                                                                                    1.4</span></a></li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                        <!-- End Sidebar navigation -->
                                                    </div>
                                                    <!-- End Sidebar scroll-->
                                                </aside>
                                            
                                        

Page Content, Right Sidebar and Footer


Below is the code for the page content wrapper, you can start your content here

                                    
                                        <!-- ============================================================== -->
                                        <!-- Page wrapper  -->
                                        <!-- ============================================================== -->
                                        <div class="page-wrapper">
                                            <!-- ============================================================== -->
                                            <!-- Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <div class="page-breadcrumb">
                                                <div class="row">
                                                    <div class="col-7 align-self-center">
                                                        <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Starter Page</h4>
                                                        <div class="d-flex align-items-center">
                                                            <nav aria-label="breadcrumb">
                                                                <ol class="breadcrumb m-0 p-0">
                                                                    <li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
                                                                    <li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
                                                                </ol>
                                                            </nav>
                                                        </div>
                                                    </div>
                                                    <div class="col-5 align-self-center">
                                                        <div class="customize-input float-right">
                                                            <select class="custom-select form-control">
                                                                <option selected>June 19</option>
                                                                <option value="1">July 19</option>
                                                                <option value="2">Aug 19</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- Container fluid  -->
                                            <!-- ============================================================== -->
                                            <div class="container-fluid">
                                                <!-- ============================================================== -->
                                                <!-- Start Page Content -->
                                                <!-- ============================================================== -->
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                This is some text within a card block.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- ============================================================== -->
                                                <!-- End Page Content -->
                                                <!-- ============================================================== -->
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Container fluid  -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- footer -->
                                            <!-- ============================================================== -->
                                            <footer class="footer text-center text-muted">
                                                Copyright 2019. All Rights Reserved by Severny Admin
                                            </footer>
                                            <!-- ============================================================== -->
                                            <!-- End footer -->
                                            <!-- ============================================================== -->
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- End Page wrapper  -->
                                        <!-- ============================================================== -->                                                       
                                    
                                

Settings in custom js


Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.

                                    
                                        // this is for close icon when navigation open in mobile view
                                        $(".nav-toggler").on('click', function() {
                                            $("#main-wrapper").toggleClass("show-sidebar");
                                            $(".nav-toggler i").toggleClass("ti-menu");
                                        });
                                        // ============================================================== 
                                        // Right sidebar options
                                        // ==============================================================
                                        $(function() {
                                            $(".service-panel-toggle").on('click', function() {
                                               $(".customizer").toggleClass('show-service-panel');

                                            });
                                            $('.page-wrapper').on('click', function() {
                                                $(".customizer").removeClass('show-service-panel');
                                            });
                                        });    
                                    
                                

How to change Font Family


You can change fonts globally as per your requirements, for that need to change in variable.scss file. you will find these file from here:

                                    
                                        src/scss/variable.scss
                                    
                                

We have used google fonts for the template you can change whatever font you wish

                                    
                                        // Variables
                                        @import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap');
                                        $font-family-sans-serif: 		'Rubik', sans-serif !default;
                                    
                                

scss & css


Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it

                                    
                                    // (Required file)
                                    @import 'bootstrap/functions';
                                    @import 'config/default/variables';
                                    @import 'config/default/custom-variables';
                                    
                                    // Import Bootstrap source files (Required file)
                                    @import 'bootstrap/bootstrap';
                                    
                                    // Structure
                                    @import 'custom/structure/layout';
                                    @import 'custom/structure/preloader';
                                    @import 'custom/structure/navbar';
                                    @import 'custom/structure/sidebar';
                                    @import 'custom/structure/customizer';
                                    
                                    // Settings
                                    @import 'custom/structure/horizontal/horizontal';
                                    @import 'custom/structure/rtl/rtl';
                                    
                                    // Theme Colors
                                    @import 'custom/theme-colors/dark-theme';
                                    @import 'custom/theme-colors/theme-colors';
                                    
                                    // Components
                                    @import 'custom/components/tables';
                                    @import 'custom/components/breadcrumb';
                                    @import 'custom/components/buttons';
                                    @import 'custom/components/reboot';
                                    @import 'custom/components/badge';
                                    @import 'custom/components/card';
                                    @import 'custom/components/forms';
                                    @import 'custom/components/dropdown';
                                    @import 'custom/components/carousel';
                                    @import 'custom/components/popover';
                                    
                                    // Pages
                                    @import 'custom/pages/authentication';
                                    @import 'custom/pages/emails';
                                    @import 'custom/pages/taskboard';
                                    @import 'custom/pages/typeahead';
                                    @import 'custom/pages/gallery-card';
                                    @import 'custom/pages/google-vector';
                                    @import 'custom/pages/timeline';
                                    @import 'custom/pages/nestable';
                                    @import 'custom/pages/charts';
                                    @import 'custom/pages/errors';
                                    
                                    // Widgets
                                    @import 'custom/widgets/chat';
                                    @import 'custom/widgets/task';
                                    @import 'custom/widgets/profile-timeline';
                                    @import 'custom/widgets/activity';
                                    
                                    // Plugins
                                    @import 'custom/plugins/animation';
                                    @import 'custom/plugins/perfect-scrollbar';
                                    @import 'custom/plugins/extra';
                                    @import 'custom/plugins/datepicker';
                                    @import 'custom/plugins/footable';
                                    @import 'custom/plugins/select2';
                                    @import 'custom/plugins/nestable';
                                    
                                    // Icons
                                    @import 'icons/icons';
                                    
                                
Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Severny admin comes it does not affect your code.

Grid Options


See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Card


Below is the basic card structure.

                                    
                                        <div class="card">
                                            <div class="card-header">
                                                Title
                                                <div class="card-actions">
                                                    <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                                                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                                                    <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                                                </div>
                                            </div>
                                            <div class="card-body collapse show">
                                                <h4 class="card-title">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            </div>
                                        </div>
                                    
                                

Icons


Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Material Icons <i class="mdi mdi-icon-name"></i>
Simple Line Icons <i class="icon-name_of_icon"></i>
Themify Icons <i class="ti-icon-name"></i>
Weather Icons <i class="wi wi-icon-name"></i>
Flag Icons <i class="flag-icon flsg-icon-country-name"></i>

Buttons


Below is the general buttons.

                                    
                                        <div class="button-group">
                                            <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
                                            <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
                                            <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
                                            <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
                                            <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
                                            <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
                                        </div>
                                    
                                

Charts


Below is the table of pages which includes charts and where you can find the script related to it.

Page Where to find it's JS Where to find it's CSS
chart-morris.html ../../src/assets/libs/morris.js/morris.min.js ../../src/assets/libs/morris.js/morris.css
chart-chart-js.html ../../src/assets/libs/Chart.js/dist/Chart.min.js No CSS Available
chart-sparkline.html ../../src/assets/extra-libs/sparkline/sparkline.js No CSS Available
chart-chartist.html ../../src/assets/libs/chartist/dist/chartist.min.js ../../src/assets/libs/chartist/dist/chartist.min.css
chart-knob.html ../../src/assets/extra-libs/knob/jquery.knob.min.js No CSS Available
c3-chart-axis.html ../../src/assets/extra-libs/c3/c3.min.js ../../src/assets/extra-libs/c3/c3.min.css
c3-chart-bar.html ../../src/assets/extra-libs/c3/c3.min.js ../../src/assets/extra-libs/c3/c3.min.css
c3-chart-line.html ../../src/assets/extra-libs/c3/c3.min.js ../../src/assets/extra-libs/c3/c3.min.css
c3-chart-data.html ../../src/assets/extra-libs/c3/c3.min.js ../../src/assets/extra-libs/c3/c3.min.css
chart-echart-basic.html ../../src/assets/libs/echarts/dist/echarts-en.min.js No CSS Available
chart-echart-bar.html ../../src/assets/libs/echarts/dist/echarts-en.min.js No CSS Available
chart-echart-pie-doughnut.html ../../src/assets/libs/echarts/dist/echarts-en.min.js No CSS Available

Form


Below is the basic form structure.

                                    
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">User Name</label>
                                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
                                            </div>
                                            <div class="form-group">
                                                <div class="checkbox checkbox-success">
                                                    <input id="checkbox1" type="checkbox">
                                                    <label for="checkbox1"> Remember me </label>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
                                            <button type="submit" class="btn btn-dark waves-effect waves-light">Cancel</button>
                                        </form>
                                    
                                

Table


Below is the basic table structure.

                                    
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                    <th>Role</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>Deshmukh</td>
                                                    <td>Prohaska</td>
                                                    <td>@Genelia</td>
                                                    <td><span class="label label-danger">admin</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>Deshmukh</td>
                                                    <td>Gaylord</td>
                                                    <td>@Ritesh</td>
                                                    <td><span class="label label-info">member</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>Sanghani</td>
                                                    <td>Gusikowski</td>
                                                    <td>@Govinda</td>
                                                    <td><span class="label label-warning">developer</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>Roshan</td>
                                                    <td>Rogahn</td>
                                                    <td>@Hritik</td>
                                                    <td><span class="label label-success">supporter</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>Joshi</td>
                                                    <td>Hickle</td>
                                                    <td>@Maruti</td>
                                                    <td><span class="label label-info">member</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>6</td>
                                                    <td>Nigam</td>
                                                    <td>Eichmann</td>
                                                    <td>@Sonu</td>
                                                    <td><span class="label label-success">supporter</span> </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    
                                

Js Files


File Description
custom.js, custom.min.js This is a main function js file. it contain sidebar and other basic js
sidebarmenu.js This file contains sidebarnavigation js
app.js This is for setting plugin for the theme customizer.
app.init.js You can modify the settings though this.
app-style-switcher.js It contains the customizer functions apply to the theme by clicking on customizer panel.
app.init.horizontal.js You can modify the settings of horizontal demo.
app-style-switcher.horizontal.js It contains the customizer functions apply to the horizontal theme by clicking on customizer panel.
feather.min.js This is for feather icons which we have use in header and other widgets
perfect-scrollbar.jquery.min.js This is for scroll.
dashboard1.js to dashboard4.js This is for all dashboards setting.

How to Enable Right Click?


  • If you are using Gulp:

    open ../../src/dist/js/custom.js file, find below code and remove it. Right click will work as it should.

  • If you are not using Gulp:

    open ../../src/dist/js/custom.min.js file, find above code and remove it. Right click will work as it should.

Free support


If you have any type of query or support needed, please open a support ticket here: wrappixel.com/support/

Thank you
© 2019 Severny admin by wrappixel.com