apply bootstrap theme

resource/styles/agile-admin/inverse/colors/blue-dark.scss

@@ -0,0 +1,152 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#008efa;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#008efa;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+.logo b{
+   
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+ .content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}  
+@media(min-width:768px) {
+  .content-wrapper { 
+        #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+
+   }     
+}
+
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: #707cd2 !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/blue.scss

@@ -0,0 +1,138 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#008efa;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#008efa;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: #707cd2 !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/default-dark.scss

@@ -0,0 +1,151 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#4F5467;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#f75b36;
+$dark-themecolor:#4F5467;
+
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+.logo b{
+   
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+.content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}   
+@media(min-width:768px) {
+  .content-wrapper { 
+       #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+    }     
+}
+
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $megna !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/default.scss

@@ -0,0 +1,143 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#4F5467;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#f75b36;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+/*
+.notify .heartbit{
+    border-color:$white;
+}
+.notify .point{
+  background-color:$danger;
+}*/
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $megna !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/gray-dark.scss

@@ -0,0 +1,148 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#a0aec4;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#a0aec4;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+.content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}   
+@media(min-width:768px) {
+  .content-wrapper { 
+        #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+   }     
+}
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $megna !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/gray.scss

@@ -0,0 +1,138 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#a0aec4;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#a0aec4;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $megna !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/green-dark.scss

@@ -0,0 +1,149 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#00c292;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#00c292;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+.logo b{
+   
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+.content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}   
+@media(min-width:768px) {
+  .content-wrapper { 
+        #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+   }     
+}
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: #6e8680 !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/green.scss

@@ -0,0 +1,139 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#00c292;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#00c292;
+$dark-themecolor:#4F5467;
+
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: #6e8680 !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/megna-dark.scss

@@ -0,0 +1,150 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#00b5c2;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#00b5c2;
+$dark-themecolor:#4F5467;
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+.logo b{
+   
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+.content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}   
+@media(min-width:768px) {
+  .content-wrapper { 
+        #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+   }     
+}
+
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/megna.scss

@@ -0,0 +1,139 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#00b5c2;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#00b5c2;
+$dark-themecolor:#4F5467;
+
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: $danger !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/purple-dark.scss

@@ -0,0 +1,153 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#2c5ca9;
+$sidebar:#4F5467;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#a6acbc;
+$themecolor:#2c5ca9;
+$dark-themecolor:#4F5467;
+
+
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+.top-left-part{
+  background:$sidebar;
+}
+.logo b{
+   
+}
+.logo i{ color:$white;}
+
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.07);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$white;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$white;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+.content-wrapper .sidebar .nav-second-level{
+  li{
+    background:#444859;
+  }
+}   
+@media(min-width:768px) {
+  .content-wrapper { 
+        #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
+              background:#444859;
+         }
+
+   }     
+}
+
+.user-profile .user-pro-body .u-dropdown{
+  color:$sidebar-text;
+}
+/*themecolor*/
+
+.bg-theme {
+  background-color: $info !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/colors/purple.scss

@@ -0,0 +1,139 @@
+@import "../variables.scss";
+
+/*Just change your choise color here its theme Colors*/
+
+$topbar:#2c5ca9;
+$sidebar:#fff;
+$bodycolor:#f1f2f7;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#2c5ca9;
+$dark-themecolor:#4F5467;
+
+
+
+body{
+  background:$sidebar;
+}
+
+/*Top Header Part*/
+
+.logo i{ color:$white;}
+.top-left-part{ 
+  .light-logo{
+    display:inline-block;
+  }
+  .dark-logo{
+    display:none;
+  }
+}
+.navbar-header{ 
+     background:$topbar;
+}
+.navbar-top-links > li > a{
+    color:$white;
+}
+
+
+
+/*Right panel*/
+.right-sidebar .rpanel-title{
+  background:$themecolor;
+}
+
+/*Bread Crumb*/
+.bg-title .breadcrumb .active{
+    color:$themecolor;
+}
+.bg-title{
+  
+}
+
+/*Sidebar*/
+
+.sidebar {
+    background:$sidebar;
+    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom{
+      background:$megna;
+  }  
+}
+#side-menu li a{
+    color:$sidebar-text;
+}
+#side-menu li a{
+    color:$sidebar-text;
+  border-left:0px solid $sidebar;
+}
+
+#side-menu > li > a {
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.03);
+    }
+   &.active {
+            border-left:3px solid $themecolor;
+            color:$dark;
+            
+            font-weight:500;
+        i{
+          color:$themecolor;
+        }
+        }
+
+}
+#side-menu ul > li > a {
+    &:hover{
+        color:$themecolor;
+        
+    }
+    &.active{
+     color:$dark;
+     font-weight:500;
+    }
+}
+.sidebar #side-menu .user-pro{
+  .nav-second-level a:hover{
+          color:$themecolor;
+        }
+  }
+
+/*themecolor*/
+
+.bg-theme {
+  background-color: $info !important;
+}
+.bg-theme-dark {
+  background-color: $themecolor !important;
+}
+
+/*Chat widget*/
+.chat-list .odd .chat-text{
+    background:$themecolor;
+}
+/*Button*/
+.btn-custom{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+}
+/*Custom tab*/
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+ border-bottom:2px solid $themecolor;
+ color:$themecolor;
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border-right:2px solid $themecolor;
+}
+/*Nav-pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -0,0 +1,2535 @@
+@import "variables.scss";
+
+// Global Styles
+
+* {
+  outline:none !important;
+}
+
+body {
+  background: $sidebar;
+  font-family: $basefont1;
+  margin: 0;
+  overflow-x: hidden;
+  color: $bodytext;
+  font-weight:300;
+}
+html {
+    position: relative;
+    min-height: 100%;
+    background: $white;
+}
+h1, h2, h3, h4, h5, h6 {
+  color: $headingtext;
+  font-family: $basefont2;
+  margin: 10px 0;
+  font-weight:300;
+}
+h1 {
+  line-height: 48px;
+  font-size:36px
+}
+
+h2 {
+  line-height: 36px;
+  font-size:24px
+}
+
+h3 {
+  line-height: 30px;
+  font-size:21px
+
+}
+
+h4 {
+  line-height: 22px;
+  font-size:18px
+
+}
+
+h5 {
+  font-size: 18px;
+  font-size:16px
+}
+h5 {
+  font-size: 16px;
+  font-size:14px
+}
+.dn{ display:none;}
+.db{ display:block;}
+.light_op_text{ color:rgba(255, 255, 255, 0.5);}
+blockquote {
+    border-left:5px solid $themecolor!important;
+  border:1px solid $border;
+}
+
+p {
+  line-height:1.6;
+}
+
+b {
+  font-weight:$font-bold;
+}
+a {
+
+  &:hover {
+    outline: 0;
+    text-decoration: none;
+  }
+  &:active {
+    outline: 0;
+    text-decoration: none;
+  }
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+}
+.clear{ clear:both;}
+.font-12{font-size:12px;}
+.font-18{font-size:18px;}
+.font-21{font-size:21px;}
+hr{ border-color: $border;}
+.b-t {
+    border-top: 1px solid $border;
+}
+.b-b {
+    border-bottom: 1px solid $border;
+}
+.b-l {
+    border-left: 1px solid $border;
+}
+.b-r {
+    border-right: 1px solid $border;
+}
+
+.b-all {
+  border:1px solid $border;
+  }
+.b-none{
+  border:0px!important;
+}
+.max-height{
+  height:310px;
+  overflow:auto;
+}
+.p-0 {
+  padding:0px !important;
+}
+.p-10 {
+  padding:10px !important;
+}
+.p-20 {
+  padding:20px !important;
+}
+.p-30 {
+  padding:30px !important;
+}
+
+.p-l-0 {
+  padding-left:0px !important;
+}
+.p-l-10 {
+  padding-left:10px !important;
+}
+.p-l-20 {
+  padding-left:20px !important;
+}
+
+.p-r-0 {
+  padding-right:0px !important;
+}
+.p-r-10{
+  padding-right:10px !important;
+}
+.p-r-20{
+  padding-right:20px !important;
+}
+.p-r-30{
+  padding-right:30px !important;
+}
+.p-r-40{
+  padding-right:40px !important;
+}
+.p-t-0 {
+  padding-top:0px !important;
+}
+.p-t-10 {
+  padding-top:10px !important;
+}
+.p-t-20 {
+  padding-top:20px !important;
+}
+
+
+.p-b-0 {
+  padding-bottom:0px !important;
+}
+.p-b-10 {
+  padding-bottom:10px !important;
+}
+.p-b-20 {
+  padding-bottom:20px !important;
+}
+.p-b-30 {
+  padding-bottom:30px !important;
+}
+.p-b-40 {
+  padding-bottom:40px !important;
+}
+
+.m-0 {
+  margin:0px !important;
+}
+
+
+
+.m-l-5 {
+  margin-left:5px !important;
+}
+.m-l-10 {
+  margin-left:10px !important;
+}
+.m-l-15 {
+  margin-left:15px !important;
+}
+.m-l-20 {
+  margin-left:20px !important;
+}
+.m-l-30 {
+  margin-left:30px !important;
+}
+.m-l-40 {
+  margin-left:40px !important;
+}
+
+.m-r-5 {
+  margin-right:5px !important;
+}
+.m-r-10 {
+  margin-right:10px !important;
+}
+.m-r-15 {
+  margin-right:15px !important;
+}
+.m-r-20 {
+  margin-right:20px !important;
+}
+.m-r-30 {
+  margin-right:30px !important;
+}
+.m-r-40 {
+  margin-right:40px !important;
+}
+
+.m-t-5 {
+  margin-top:5px !important;
+}
+.m-t-0 {
+  margin-top:0px !important;
+}
+.m-t-10 {
+  margin-top:10px !important;
+}
+.m-t-15 {
+  margin-top:15px !important;
+}
+.m-t-20 {
+  margin-top:20px !important;
+}
+.m-t-30 {
+  margin-top:30px !important;
+}
+.m-t-40 {
+  margin-top:40px !important;
+}
+
+.m-b-0 {
+  margin-bottom:0px !important;
+}
+.m-b-5 {
+  margin-bottom:5px !important;
+}
+.m-b-10 {
+  margin-bottom:10px !important;
+}
+.m-b-15 {
+  margin-bottom:15px !important;
+}
+.m-b-20 {
+  margin-bottom:20px !important;
+}
+.m-b-30 {
+  margin-bottom:30px !important;
+}
+.m-b-40 {
+  margin-bottom:40px !important;
+}
+.vt{
+   vertical-align:top;
+}
+.vb{
+  vertical-align:bottom;
+}
+.font-bold, b, strong {
+  font-weight: $font-bold;
+}
+
+.font-normal {
+  font-weight: normal;
+}
+.font-light {
+  font-weight: 300;
+}
+
+.pull-in {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.b-0 {
+  border: none !important;
+}
+.vertical-middle {
+  vertical-align: middle;
+}
+.bx-shadow {
+  -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
+  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
+  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
+}
+.mx-box {
+  max-height: 380px;
+  min-height: 380px;
+}
+.thumb-sm {
+  height: 32px;
+  width: 32px;
+}
+.thumb-md {
+  height: 48px;
+  width: 48px;
+}
+.thumb-lg {
+  height: 88px;
+  width: 88px;
+}
+.txt-oflo{
+      text-overflow: ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+}
+.get-code{
+  color:$dark;
+  cursor:pointer;
+  border-radius:100%;
+  background:$white;
+  padding:4px 5px;
+  font-size:10px;
+  margin:0 5px;
+  vertical-align:middle;
+}
+/* Badge */
+.badge {
+  text-transform: uppercase;
+  font-weight:$font-bold;
+  padding: 3px 5px;
+  font-size: 12px;
+  margin-top: 1px;
+  background-color: $warning;
+}
+
+.badge-xs {
+  font-size: 9px;
+}
+
+.badge-xs, .badge-sm {
+  -webkit-transform: translate(0, -2px);
+  -ms-transform: translate(0, -2px);
+  -o-transform: translate(0, -2px);
+  transform: translate(0, -2px);
+}
+
+.badge-success {
+  background-color: $success;
+}
+
+.badge-info {
+  background-color: $info;
+}
+
+.badge-warning {
+  background-color: $warning;
+}
+
+.badge-danger {
+  background-color: $danger;
+}
+
+.badge-purple {
+  background-color: $purple;
+}
+
+.badge-red {
+  background-color: $red;
+}
+
+.badge-inverse {
+  background-color: $inverse;
+}
+
+/*notify*/
+.notify{
+  position:relative;
+  margin-top:-30px;
+
+  .heartbit{
+    position: absolute;
+    top: -20px;
+    right:-16px;
+    height: 25px;
+    width: 25px;
+    z-index: 10;
+    border:5px solid $danger;
+    border-radius:70px;
+    -moz-animation: heartbit 1s ease-out;
+    -moz-animation-iteration-count: infinite;
+    -o-animation: heartbit 1s ease-out;
+    -o-animation-iteration-count: infinite;
+    -webkit-animation: heartbit 1s ease-out;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+  }
+ .point{
+    width: 6px;
+    height: 6px;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    background-color: $danger;
+
+    position: absolute;
+    right: -6px;
+    top:-10px;
+ }
+}
+@-moz-keyframes heartbit {
+  0% {
+    -moz-transform: scale(0);
+    opacity: 0.0;
+  }
+  25% {
+    -moz-transform: scale(0.1);
+    opacity: 0.1;
+  }
+  50% {
+    -moz-transform: scale(0.5);
+    opacity: 0.3;
+  }
+  75% {
+    -moz-transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    -moz-transform: scale(1);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes heartbit {
+  0% {
+    -webkit-transform: scale(0);
+    opacity: 0.0;
+  }
+  25% {
+    -webkit-transform: scale(0.1);
+    opacity: 0.1;
+  }
+  50% {
+    -webkit-transform: scale(0.5);
+    opacity: 0.3;
+  }
+  75% {
+    -webkit-transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0.0;
+  }
+}
+
+/* Text colors */
+
+.text-white {
+  color: $white;
+}
+
+.text-danger {
+  color: $danger;
+}
+
+.text-muted {
+  color: #8d9ea7;
+}
+
+.text-warning {
+  color: $warning;
+}
+
+.text-success {
+  color: $success;
+}
+
+.text-info {
+  color: $info;
+}
+
+.text-inverse {
+  color: $inverse;
+}
+
+.text-blue {
+  color: $blue;
+}
+
+.text-purple {
+  color: $purple;
+}
+.text-primary {
+  color: $primary;
+}
+.text-megna {
+  color: $megna;
+}
+.text-dark {
+  color: $bodytext !important;
+}
+
+/* Background colors */
+
+
+.bg-primary {
+  background-color: $primary !important;
+}
+
+.bg-success {
+  background-color: $success !important;
+}
+
+.bg-info {
+  background-color: $info !important;
+}
+
+.bg-warning {
+  background-color: $warning !important;
+}
+
+.bg-danger {
+  background-color: $danger !important;
+}
+.bg-theme {
+  background-color: $themecolor !important;
+}
+.bg-theme-dark {
+  background-color: $dark-themecolor !important;
+}
+.bg-gray{
+    background-color:#e6eaef !important;
+}
+.bg-inverse {
+  background-color: $inverse !important;
+}
+.bg-extlgt {
+  background-color: $extralight !important;
+}
+.bg-purple {
+  background-color: $purple !important;
+}
+.bg-dark{
+    background-color:$dark !important;
+}
+.bg-white {
+  background-color: $white !important;
+}
+.bg-megna {
+  background-color: $megna !important;
+}
+/* Labels */
+
+.label {
+  letter-spacing: 0.05em;
+  border-radius: 60px;
+  padding: 4px 12px 3px;
+  font-weight:$font-bold;
+
+}
+.label-rounded, .label-rouded  {
+  border-radius: 60px;
+  padding: 4px 12px 3px;
+  font-weight:$font-bold;
+}
+.label-custom {
+  background-color: $megna;
+}
+.label-success {
+  background-color: $success;
+}
+
+.label-info {
+  background-color: $info;
+}
+
+.label-warning {
+  background-color: $warning;
+}
+
+.label-danger {
+  background-color: $danger;
+}
+.label-megna {
+  background-color: $megna;
+}
+.label-primary {
+  background-color: $primary;
+}
+
+
+.label-purple {
+  background-color: $purple;
+}
+
+.label-red {
+  background-color: $red;
+}
+
+.label-inverse {
+  background-color: $inverse;
+}
+
+
+
+/*Bootstrap overight*/
+
+.dropdown-menu{ border:1px solid $border; border-radius:$radius; box-shadow:0 3px 12px rgba(0,0,0,.05)!important; -webkit-box-shadow:0px!important; -moz-box-shadow:0px!important; padding-bottom:8px; margin-top:0px;}
+.dropdown-menu > li > a{ padding:9px 20px;}
+.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
+  background:$extralight;
+}
+.navbar-top-links .progress{
+  margin-bottom:6px;
+}
+label{
+  font-weight:$font-bold;
+}
+.btn{
+  border-radius:$radius;
+
+}
+.form-control{
+  background-color: #ffffff;
+    border: 1px solid $light;
+    border-radius: $radius;
+    box-shadow: none;
+    color: #565656;
+    height: 38px;
+    max-width: 100%;
+    padding: 7px 12px;
+    transition: all 300ms linear 0s;
+    &:focus{
+      box-shadow:none;
+      border-color:$dark;
+    }
+}
+.input-sm {
+    height: 30px;
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+
+}
+.input-lg {
+    height: 44px;
+    padding: 5px 10px;
+    font-size: 18px;
+
+
+}
+.bootstrap-tagsinput{
+    border: 1px solid $light;
+    border-radius: $radius;
+    box-shadow: none;
+    display:block;
+    padding: 7px 12px;
+    }
+ .bootstrap-touchspin .input-group-btn-vertical>.btn{ padding:9px 10px;}
+ .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up, .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{ border-radius:$radius;}
+.input-group-btn .btn {
+    padding: 8px 12px;
+}
+.form-horizontal .form-group{ margin-left:-7.5px; margin-right:-7.5px; margin-bottom:25px;}
+.form-group{ margin-bottom:25px;}
+
+.select2-container-multi .select2-choices{ border: 1px solid $light;
+}
+.list-group-item, .list-group-item:first-child, .list-group-item:last-child{ border-radius:$radius; border-color:$border;}
+.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{background:$info; border-color:$info;}
+.list-task .list-group-item, .list-task .list-group-item:first-child{ border-radius:$radius; border:0px;}
+.list-task .list-group-item:last-child{ border-radius:0px; border:0px}
+.media{
+  border:1px solid $border;
+  margin-bottom:10px;
+  padding:15px;
+  .media-heading{
+      font-weight:$font-bold;
+  }
+}
+.well, pre{
+  background:$white;
+  border-radius:$radius;
+}
+
+.nav-tabs > li > a {
+  border-radius:$radius;
+  color:$dark;
+  &:hover, &:focus{
+    background:$white;
+
+    }
+  }
+
+.modal-content{
+  border-radius:$radius;
+  box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);
+}
+.alert{
+  border-radius:$radius;
+}
+.carousel-control {
+  width: 8%;
+  span{
+    position: absolute;
+    top: 50%; /* pushes the icon in the middle of the height */
+    z-index: 5;
+    display: inline-block;
+    font-size: 30px;
+  }
+}
+.popover{
+  border-radius:$radius;
+}
+.popover-title{
+  padding:5px 14px;
+}
+
+
+
+.container-fluid{
+  padding-left:25px;
+  padding-right:25px;
+  padding-bottom:15px;
+}
+
+.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
+  padding-left:7.5px;
+  padding-right:7.5px;
+}
+.row {
+    margin-right: -7.5px;
+    margin-left: -7.5px;
+}
+.btn-group-vertical>.btn:first-child:not(:last-child), .btn-group-vertical>.btn:last-child:not(:first-child){
+  border-radius:$radius;
+}
+
+.table-responsive{ overflow-y:hidden;}
+
+
+/* Pagination/ Pager */
+
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+   border-bottom-left-radius: $radius;
+   border-top-left-radius: $radius;
+}
+
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+   border-bottom-right-radius: $radius;
+   border-top-right-radius: $radius;
+}
+
+.pagination > li > a,
+.pagination > li > span {
+   color: $dark;
+}
+
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+   background-color: $light;
+}
+
+.pagination-split li {
+   margin-left: 5px;
+   display: inline-block;
+   float: left;
+}
+
+.pagination-split li:first-child {
+   margin-left: 0;
+}
+
+.pagination-split li a {
+   -moz-border-radius: $radius;
+   -webkit-border-radius: $radius;
+   border-radius: $radius;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+   background-color: $themecolor;
+   border-color: $themecolor;
+}
+
+.pager li > a, .pager li > span {
+   -moz-border-radius: $radius;
+   -webkit-border-radius: $radius;
+   border-radius: $radius;
+   color: $dark;
+}
+
+// table-cell
+.table-box{
+    display:table;
+    width:100%;
+}
+.cell{
+    display:table-cell;
+    vertical-align:middle;
+}
+ .jqstooltip{
+      width: auto !important;
+  height: auto !important;
+    }
+
+// text-align
+
+
+// Wrappers
+
+#wrapper {
+    width: 100%;
+
+}
+
+#page-wrapper {
+    padding: 0px;
+    min-height: 568px;
+    background:$bodycolor;
+    padding-bottom:60px;
+}
+
+.footer{
+    bottom: 0;
+    color: #58666e;
+    left: 0px;
+    padding: 20px 30px;
+    position:absolute;
+    background: $white;
+    right: 0;
+
+}
+
+// Page title
+
+.bg-title{
+  background:$white;
+  overflow:hidden;
+  padding:15px 15px 10px;
+  margin-bottom:25px;
+  margin-left:-25.5px;
+  margin-right:-25.5px;
+
+  h4{ color:rgba(0, 0, 0, 0.5); font-weight:$font-bold; margin-top:6px;}
+  .breadcrumb{
+    background:none;
+    margin-bottom:0px;
+    float:right;
+    padding:0;
+    margin-top:8px;
+    a{
+      color:rgba(0, 0, 0, 0.5);
+     &:hover{
+      color:rgba(0, 0, 0, 1);
+     }
+
+    }
+    .active{ color:$themecolor;}
+  }
+}
+
+// Navigation
+
+// --Topbar
+.logo b{
+   /*background:$themecolor;*/
+   height: 60px;
+   display: inline-block;
+   width:60px;
+   line-height:60px;
+   text-align:center;
+
+}
+.logo i{ color:$white;}
+.top-left-part{
+    width:220px;
+    float:left;
+    background:$white;
+    a{
+    color: $white;
+    font-size: 18px;
+    padding-left:0px;
+    text-transform: uppercase;
+        }
+    .light-logo{ display:none;}
+    }
+.navbar-header{
+    width:100%;
+    background:$topbar;
+    border:0px;
+}
+
+.navbar-default{
+    border:0px;
+
+}
+.navbar-top-links {
+    margin-right: 0;
+}
+.navbar-top-links .badge {
+    position: absolute;
+    right: 6px;
+    top: 15px;
+}
+.navbar-top-links > li {
+    float: left;
+}
+
+
+
+
+.navbar-top-links > li > a{
+    color:$white;
+    padding: 0 14px;
+    line-height:60px;
+    min-height: 60px;
+    &:hover{
+        background:rgba(0, 0, 0, 0.1)
+    }
+    &:focus{
+    background:rgba(0, 0, 0, 0.0);
+    }
+}
+.nav .open > a, .nav .open > a:focus, .nav .open > a:hover{
+        background:rgba(255, 255, 255, 0.2)
+    }
+.navbar-top-links .dropdown-menu li {
+    display: block;
+}
+
+.navbar-top-links .dropdown-menu li:last-child {
+    margin-right: 0;
+}
+.navbar-top-links .dropdown-menu li a div {
+    white-space: normal;
+}
+
+.navbar-top-links .dropdown-messages,
+.navbar-top-links .dropdown-tasks,
+.navbar-top-links .dropdown-alerts {
+    width: 310px;
+    min-width: 0;
+}
+
+.navbar-top-links .dropdown-messages {
+    margin-left: 5px;
+}
+
+.navbar-top-links .dropdown-tasks {
+    margin-left: -59px;
+}
+
+.navbar-top-links .dropdown-alerts {
+    margin-left: -123px;
+}
+
+.navbar-top-links .dropdown-user {
+    right: 0;
+    left: auto;
+}
+
+.navbar-header .navbar-toggle {
+    float:none;
+    padding:0 15px;
+    line-height:60px;
+    border:0px;
+    color:rgba(255, 255, 255, 0.5);
+    margin:0px;
+    display:inline-block;
+    border-radius:0px;
+    &:hover, &:focus{
+        background:rgba(0, 0, 0, 0.3);
+        color:rgba(255, 255, 255, 1);
+    }
+}
+
+// Search
+
+/*Search*/
+.app-search {
+  position: relative;
+  margin: 0px;
+
+}
+.app-search a {
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  color: $inverse;
+
+}
+
+.app-search .form-control,
+.app-search .form-control:focus {
+  border: none;
+  font-size: 13px;
+  color: $inverse;
+  padding-left: 20px;
+  padding-right: 40px;
+  background: rgba(255,255,255,0.9);
+  box-shadow: none;
+  height: 30px;
+  font-weight: $font-bold;
+  width: 180px;
+  display:inline-block;
+  line-height:30px;
+  margin-top:15px;
+  border-radius:40px;
+  transition:0.5s ease-out;
+}
+
+
+.app-search .form-control::-moz-placeholder{
+  color:$inverse;
+  opacity:0.5;
+}
+.app-search  .form-control::-webkit-input-placeholder { color:$inverse;
+  opacity:0.5; }
+.app-search  .form-control::-ms-placeholder { color:$inverse;
+  opacity:0.5; }
+
+.nav-small-cap {
+    color: #a6afbb;
+    cursor: default;
+    font-weight:$font-bold;
+    text-transform:uppercase;
+    font-size: 13px;
+    letter-spacing: 0.035em;
+    padding: 12px 15px !important;
+    pointer-events: none;
+    margin:20px 0 0 -15px;
+
+}
+
+.profile-pic{
+      padding:0px 20px;
+      line-height:50px;
+      img{
+        margin-right:10px;
+      }
+   }
+ .drop-title{
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color:$dark;
+  font-size: 15px;
+  font-weight: $font-bold;
+  padding: 11px 20px 15px;
+}
+
+
+
+// Buttons
+
+.btn-outline {
+    color: inherit;
+    background-color: transparent;
+    transition: all .5s;
+}
+.btn-rounded {
+  border-radius:60px;
+
+}
+.btn-custom, .btn-custom.disabled{
+  background:$themecolor;
+  border:1px solid $themecolor;
+  color:$white;
+  &:hover, &:focus, &.focus{
+    background:$themecolor;
+    opacity:0.8;
+    color:$white;
+    border:1px solid $themecolor;
+  }
+
+}
+.btn-primary, .btn-primary.disabled{
+  background:$primary;
+  border:1px solid $primary;
+   &:hover, &:focus, &.focus{
+    background:$primary;
+    opacity:0.8;
+    border:1px solid $primary;
+  }
+
+}
+.btn-success, .btn-success.disabled{
+  background:$success;
+  border:1px solid $success;
+   &:hover, &:focus, &.focus{
+    background:$success;
+    opacity:0.8;
+    border:1px solid $success;
+  }
+
+}
+.btn-info, .btn-info.disabled{
+  background:$info;
+  border:1px solid $info;
+   &:hover, &:focus, &.focus{
+    background:$info;
+    opacity:0.8;
+    border:1px solid $info;
+  }
+
+}
+.btn-warning, .btn-warning.disabled{
+  background:$warning;
+  border:1px solid $warning;
+   &:hover, &:focus, &.focus{
+    background:$warning;
+    opacity:0.8;
+    border:1px solid $warning;
+  }
+
+}
+.btn-danger, .btn-danger.disabled{
+  background:$danger;
+  border:1px solid $danger;
+   &:hover, &:focus, &.focus{
+    background:$danger;
+    opacity:0.8;
+    border:1px solid $danger;
+  }
+
+}
+.btn-default, .btn-default.disabled{
+  background:$light;
+  border:1px solid $light;
+   &:hover, &:focus, &.focus{
+    opacity:0.8;
+    border:1px solid $light;
+    background:$light;
+  }
+
+}
+
+.btn-default.btn-outline {
+    background-color:$white;
+    &:hover, &:focus, &.focus{
+    background:$light;
+
+    }
+}
+.btn-primary.btn-outline {
+    color: $primary;
+    background-color:$white;
+     &:hover, &:focus, &.focus{
+    background:$primary;
+    color:$white;
+    }
+}
+
+.btn-success.btn-outline {
+    color: $success;
+    background-color: transparent;
+     &:hover, &:focus, &.focus{
+    background:$success;
+    color:$white;
+    }
+}
+
+.btn-info.btn-outline {
+    color: $info;
+    background-color: transparent;
+     &:hover, &:focus, &.focus{
+    background:$info;
+    color:$white;
+    }
+}
+
+.btn-warning.btn-outline {
+    color: $warning;
+    background-color: transparent;
+     &:hover, &:focus, &.focus{
+    background:$warning;
+    color:$white;
+    }
+}
+
+.btn-danger.btn-outline {
+    color: $danger;
+    background-color: transparent;
+     &:hover, &:focus, &.focus{
+    background:$danger;
+    color:$white;
+    }
+}
+.button-box .btn{ margin:0 8px 8px 0px;}
+.btn-primary.btn-outline:hover,
+.btn-success.btn-outline:hover,
+.btn-info.btn-outline:hover,
+.btn-warning.btn-outline:hover,
+.btn-danger.btn-outline:hover {
+    color: white;
+}
+.btn-label {
+    background: rgba(0, 0, 0, 0.05);
+    display: inline-block;
+    margin:-6px 12px -6px -14px;
+    padding: 7px 15px;
+}
+
+.btn-facebook {
+    color: $white !important;
+    background-color: #3b5998 !important;
+}
+.btn-twitter {
+    color: $white !important;
+    background-color: #55acee !important;
+}
+.btn-linkedin {
+    color: $white !important;
+    background-color: #007bb6 !important;
+}
+.btn-dribbble {
+    color: $white !important;
+    background-color: #ea4c89 !important;
+}
+.btn-googleplus {
+    color: $white !important;
+    background-color: #dd4b39 !important;
+}
+.btn-instagram  {
+    color: $white !important;
+    background-color: #3f729b !important;
+}
+.btn-pinterest  {
+    color: $white !important;
+    background-color: #cb2027 !important;
+}
+.btn-dropbox  {
+    color: $white !important;
+    background-color: #007ee5 !important;
+}
+.btn-flickr  {
+    color: $white !important;
+    background-color: #ff0084 !important;
+}
+.btn-tumblr  {
+    color: $white !important;
+    background-color: #32506d !important;
+}
+.btn-skype {
+    color: $white !important;
+    background-color: #00aff0 !important;
+}
+.btn-youtube  {
+    color: $white !important;
+    background-color: #bb0000 !important;
+}
+.btn-github  {
+    color: $white !important;
+    background-color: #171515 !important;
+}
+.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover, .btn-primary.focus, .btn-primary:focus {
+  background-color: $primary ;
+  border: 1px solid $primary;
+}
+
+.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus:active, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover, .btn-success.focus, .btn-success:focus {
+  background-color: $success;
+  border: 1px solid $success;
+}
+
+.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info.focus:active, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover, .btn-info.focus, .btn-info:focus {
+  background-color: $info;
+  border: 1px solid $info;
+}
+
+.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning.focus:active, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover, .btn-warning.focus, .btn-warning:focus {
+  background-color: $warning;
+  border: 1px solid $warning;
+}
+
+.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger.focus:active, .btn-danger:active:focus, .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover, .btn-danger.focus, .btn-danger:focus {
+  background-color: $danger;
+  border: 1px solid $danger;
+}
+
+.btn-inverse, .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.focus, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .open > .dropdown-toggle.btn-inverse {
+  background-color: $inverse;
+  border: 1px solid $inverse;
+  color: $white;
+}
+
+// Chat Widget
+
+.chat {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.chat li {
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 1px dotted $border;
+}
+
+.chat li.left .chat-body {
+    margin-left: 60px;
+}
+
+.chat li.right .chat-body {
+    margin-right: 60px;
+}
+
+.chat li .chat-body p {
+    margin: 0;
+}
+
+.panel .slidedown .glyphicon,
+.chat .glyphicon {
+    margin-right: 5px;
+}
+
+.chat-panel .panel-body {
+    height: 350px;
+    overflow-y: scroll;
+}
+
+// Login Page
+
+.login-panel {
+    margin-top: 25%;
+}
+
+// Flot Charts Containers
+
+.flot-chart {
+    display: block;
+    height: 400px;
+}
+
+.flot-chart-content {
+    width: 100%;
+    height: 100%;
+}
+
+// DataTables Overrides
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting_asc_disabled,
+table.dataTable thead .sorting_desc_disabled {
+    background: transparent;
+}
+
+table.dataTable thead .sorting_asc:after {
+    content: "\f0de";
+    float: right;
+    font-family: fontawesome;
+}
+
+table.dataTable thead .sorting_desc:after {
+    content: "\f0dd";
+    float: right;
+    font-family: fontawesome;
+}
+
+table.dataTable thead .sorting:after {
+    content: "\f0dc";
+    float: right;
+    font-family: fontawesome;
+    color: rgba(50,50,50,.5);
+}
+
+// Circle Buttons
+
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.428571429;
+}
+
+.btn-circle.btn-lg {
+    width: 50px;
+    height: 50px;
+    padding: 10px 16px;
+    border-radius: 25px;
+    font-size: 18px;
+    line-height: 1.33;
+}
+
+.btn-circle.btn-xl {
+    width: 70px;
+    height: 70px;
+    padding: 10px 16px;
+    border-radius: 35px;
+    font-size: 24px;
+    line-height: 1.33;
+}
+
+// Grid Demo Elements
+
+.show-grid [class^="col-"] {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border: 1px solid $border;
+    background-color: $extralight;
+}
+
+.show-grid {
+    margin: 15px 0;
+}
+
+// Custom Colored Panels
+
+.huge {
+    font-size: 40px;
+}
+.white-box{
+    background:$white;
+    padding:25px;
+
+    margin-bottom:15px;
+    .box-title{
+      margin:0px 0px 12px;
+      font-weight:$font-bold;
+      text-transform:uppercase;
+      font-size:14px;
+    }
+}
+.panel{
+  border-radius:$radius;
+  margin-bottom:15px;
+  border:0px;
+  .panel-heading{
+    border-radius:$radius;
+    font-weight:$font-bold;
+    text-transform:uppercase;
+    padding:20px 25px;
+    .panel-title{
+        font-size:14px;
+        color:$dark;
+      }
+    a{
+      i{
+         font-size:12px;
+          margin-left:8px;
+        }
+    }
+  }
+  .panel-action{float:$rgt;
+
+    a{ opacity:0.5;
+    &:hover{
+      opacity:1;
+    }
+  }
+  }
+  .panel-body{ padding:25px;
+    &:first-child h3{
+      margin-top:0px;
+      font-weight:$font-bold;
+      font-family:$basefont1;
+      font-size:14px;
+      text-transform:uppercase;
+    }
+  }
+  .panel-footer{
+    background:$white;
+    border-radius:$radius;
+    padding:20px 25px;
+  }
+}
+.panel-green, .panel-success{
+    border-color: $success;
+    .panel-heading {
+        border-color: $success;
+        color: white;
+        background-color: $success;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $success;
+        &:hover {
+            color: darken($success, 15%);
+        }
+    }
+}
+.panel-black, .panel-inverse{
+    border-color: $inverse;
+    .panel-heading {
+        border-color: $inverse;
+        color: white;
+        background-color: $inverse;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $inverse;
+        &:hover {
+            color: darken($inverse, 15%);
+        }
+    }
+}
+.panel-darkblue, .panel-primary{
+    border-color: $primary;
+    .panel-heading {
+        border-color: $primary;
+        color: white;
+        background-color: $primary;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $primary;
+        &:hover {
+            color: darken($primary, 15%);
+        }
+    }
+}
+.panel-blue, .panel-info{
+    border-color: $info;
+    .panel-heading {
+        border-color: $info;
+        color: white;
+        background-color: $info;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $info;
+        &:hover {
+            color: darken($info, 15%);
+        }
+    }
+}
+
+.panel-red, .panel-danger {
+    border-color: $danger;
+    .panel-heading {
+        border-color: $danger;
+        color: white;
+        background-color: $danger;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $danger;
+        &:hover {
+            color: darken($danger, 15%);
+        }
+    }
+}
+
+.panel-yellow, .panel-warning {
+    border-color: $warning;
+    .panel-heading {
+        border-color: $warning;
+        color: white;
+        background-color: $warning;
+        a {
+            color:$white;
+           &:hover{
+                color:rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    a {
+        color: $warning;
+        &:hover {
+            color: darken($warning, 15%);
+        }
+    }
+}
+.panel-white, .panel-default{
+    border-color: $border;
+    .panel-heading {
+        color: $dark;
+        background-color: $white;
+        border-bottom:1px solid $border;
+
+    }
+    .panel-body{
+     color:$dark;
+    }
+    .panel-action a{ color:$dark; opacity:0.5;
+      &:hover{
+        opacity:1;
+        color:$dark;
+      }
+    }
+    .panel-footer{
+      background:$white;
+      color:$dark;
+      border-top:1px solid $border;
+    }
+
+}
+.full-panel-info{
+    border-color: $info;
+    .panel-heading {
+        border-color: $info;
+        color: white;
+        background-color: $info;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$info;
+      color:$white;
+    }
+    .panel-footer{
+      background:$info;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $info;
+        &:hover {
+            color: darken($info, 15%);
+        }
+    }
+}
+.full-panel-warning{
+    border-color: $warning;
+    .panel-heading {
+        border-color: $warning;
+        color: white;
+        background-color: $warning;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$warning;
+      color:$white;
+    }
+    .panel-footer{
+      background:$warning;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $warning;
+        &:hover {
+            color: darken($warning, 15%);
+        }
+    }
+}
+
+.full-panel-success{
+    border-color: $success;
+    .panel-heading {
+        border-color: $success;
+        color: white;
+        background-color: $success;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$success;
+      color:$white;
+    }
+    .panel-footer{
+      background:$success;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $success;
+        &:hover {
+            color: darken($success, 15%);
+        }
+    }
+}
+
+.full-panel-purple{
+    border-color: $purple;
+    .panel-heading {
+        color: white;
+        background-color: $purple;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$purple;
+      color:$white;
+    }
+    .panel-footer{
+      background:$purple;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $purple;
+        &:hover {
+            color: darken($purple, 15%);
+        }
+    }
+}
+
+.full-panel-danger{
+    border-color: $danger;
+    .panel-heading {
+        border-color: $danger;
+        color: white;
+        background-color: $danger;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$danger;
+      color:$white;
+    }
+    .panel-footer{
+      background:$danger;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $danger;
+        &:hover {
+            color: darken($danger, 15%);
+        }
+    }
+}
+.full-panel-inverse{
+    border-color: $inverse;
+    .panel-heading {
+        border-color: $inverse;
+        color: white;
+        background-color: $inverse;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+      background:$inverse;
+      color:$white;
+    }
+    .panel-footer{
+      background:$inverse;
+      color:$white;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $inverse;
+        &:hover {
+            color: darken($inverse, 15%);
+        }
+    }
+}
+
+.full-panel-default{
+    border-color: $border;
+    .panel-heading {
+        color: $dark;
+        background-color: $white;
+        border-bottom:1px solid $border;
+    }
+    .panel-body{
+
+      color:$dark;
+    }
+    .panel-footer{
+      background:$white;
+      color:$dark;
+      border-top:1px solid $border;
+    }
+    a {
+        color: $dark;
+        &:hover {
+            color: darken($inverse, 15%);
+        }
+    }
+}
+.panel-opcl{
+  float:right;
+  i{
+    margin-left:8px;
+    font-size:10px;
+    cursor:pointer;
+  }
+}
+.fa-fw{
+  width:20px!important;
+  display:inline-block !important;
+  text-align:left !important;
+}
+
+/*Wave Effeects*/
+@mixin waves-transition($transition) {
+    -webkit-transition: $transition;
+    -moz-transition: $transition;
+    -o-transition: $transition;
+    transition: $transition;
+}
+
+@mixin waves-transform($string) {
+    -webkit-transform: $string;
+    -moz-transform: $string;
+    -ms-transform: $string;
+    -o-transform: $string;
+    transform: $string;
+}
+
+@mixin waves-box-shadow($shadow) {
+    -webkit-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+.waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    .waves-ripple {
+        position: absolute;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        margin-top:-10px;
+        margin-left:-10px;
+        opacity: 0;
+        background: rgba(0,0,0,0.08);
+        @include waves-transition(all 0.5s ease-out);
+        -webkit-transition-property: -webkit-transform, opacity;
+        -moz-transition-property: -moz-transform, opacity;
+        -o-transition-property: -o-transform, opacity;
+        transition-property: transform, opacity;
+        @include waves-transform(scale(0) translate(0,0));
+        -webkit-transform: scale(0);
+        -moz-transform: scale(0);
+        -ms-transform: scale(0);
+        -o-transform: scale(0);
+        transform: scale(0);
+        pointer-events: none;
+    }
+
+    &.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+        $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient($gradient);
+        background: -o-radial-gradient($gradient);
+        background: -moz-radial-gradient($gradient);
+        background: radial-gradient($gradient);
+    }
+
+    &.waves-classic .waves-ripple {
+        background: rgba(0,0,0,0.2);
+    }
+
+    &.waves-classic.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+    }
+}
+
+.waves-notransition {
+    @include waves-transition(none '!important');
+}
+
+.waves-button,
+.waves-circle {
+    @include waves-transform(translateZ(0));
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 1em;
+    line-height:1em;
+    text-align: center;
+    text-decoration: none;
+    z-index: 1;
+}
+
+.waves-button {
+    padding: 0.85em 1.1em;
+    border-radius: 0.2em;
+}
+
+.waves-button-input {
+    margin: 0;
+    padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+
+    &.waves-button {
+        padding: 0;
+    }
+
+    .waves-button-input {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+}
+
+.waves-float {
+    -webkit-mask-image: none;
+    @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+    @include waves-transition(all 300ms);
+
+    &:active {
+        @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+    }
+}
+
+.waves-block {
+    display: block;
+}
+
+
+/* =============
+   Checkbox and Radios
+============= */
+
+.checkbox {
+  padding-left: 20px;
+  label {
+    display: inline-block;
+    padding-left: 5px;
+    position: relative;
+    &::before {
+      -o-transition: 0.3s ease-in-out;
+      -webkit-transition: 0.3s ease-in-out;
+      background-color: $white;
+      border-radius: 1px;
+      border: 1px solid $border;
+      content: "";
+      display: inline-block;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      position: absolute;
+      transition: 0.3s ease-in-out;
+      width: 17px;
+      outline: none !important;
+    }
+    &::after {
+      color: $dark;
+      display: inline-block;
+      font-size: 11px;
+      height: 16px;
+      left: 0;
+      margin-left: -20px;
+      padding-left: 3px;
+      padding-top: 1px;
+      position: absolute;
+      top: 0;
+      width: 16px;
+    }
+  }
+  input[type="checkbox"] {
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+    outline: none !important;
+
+    &:disabled + label {
+      opacity: 0.65;
+    }
+  }
+  input[type="checkbox"]:focus + label {
+    &::before {
+      outline-offset: -2px;
+      outline: none;
+      outline: thin dotted;
+    }
+  }
+  input[type="checkbox"]:checked + label {
+    &::after {
+      content: "\f00c";
+      font-family: 'FontAwesome';
+    }
+  }
+  input[type="checkbox"]:disabled + label {
+    &::before {
+      background-color: $light;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.checkbox.checkbox-circle {
+  label {
+    &::before {
+      border-radius: 50%;
+    }
+  }
+}
+
+.checkbox.checkbox-inline {
+  margin-top: 0;
+}
+
+.checkbox.checkbox-single {
+  label {
+    height: 17px;
+  }
+}
+
+
+
+.checkbox-primary {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $primary;
+      border-color: $primary;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-danger {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $danger;
+      border-color: $danger;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-info {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $info;
+      border-color: $info;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-warning {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $warning;
+      border-color: $warning;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-success {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $success;
+      border-color: $success;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-purple {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $purple;
+      border-color: $purple;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-red {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $danger;
+      border-color: $danger;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+.checkbox-inverse {
+  input[type="checkbox"]:checked + label {
+    &::before {
+      background-color: $inverse;
+      border-color: $inverse;
+    }
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+/* Radios */
+
+.radio {
+  padding-left: 20px;
+  label {
+    display: inline-block;
+    padding-left: 5px;
+    position: relative;
+    &::before {
+      -o-transition: border 0.5s ease-in-out;
+      -webkit-transition: border 0.5s ease-in-out;
+      background-color: $white;
+      border-radius: 50%;
+      border: 1px solid $border;
+      content: "";
+      display: inline-block;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      outline: none !important;
+      position: absolute;
+      transition: border 0.5s ease-in-out;
+      width: 17px;
+      outline: none !important;
+    }
+    &::after {
+      -moz-transition: -moz-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      -ms-transform: scale(0, 0);
+      -o-transform: scale(0, 0);
+      -o-transition: -o-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      -webkit-transform: scale(0, 0);
+      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      background-color: $dark;
+      border-radius: 50%;
+      content: " ";
+      display: inline-block;
+      height: 7px;
+      left: 5px;
+      margin-left: -20px;
+      position: absolute;
+      top: 5px;
+      transform: scale(0, 0);
+      transition: transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      width: 7px;
+    }
+  }
+  input[type="radio"] {
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+    outline: none !important;
+    &:disabled + label {
+      opacity: 0.65;
+    }
+  }
+  input[type="radio"]:focus + label {
+    &::before {
+      outline-offset: -2px;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline: thin dotted;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::after {
+      -ms-transform: scale(1, 1);
+      -o-transform: scale(1, 1);
+      -webkit-transform: scale(1, 1);
+      transform: scale(1, 1);
+    }
+  }
+  input[type="radio"]:disabled + label {
+    &::before {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.radio.radio-inline {
+  margin-top: 0;
+}
+
+.radio.radio-single {
+  label {
+    height: 17px;
+  }
+}
+
+
+
+
+.radio-primary {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $primary;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $primary;
+    }
+    &::after {
+      background-color: $primary;
+    }
+  }
+}
+
+.radio-danger {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $danger;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $danger;
+    }
+    &::after {
+      background-color: $danger;
+    }
+  }
+}
+
+.radio-info {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $info;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $info;
+    }
+    &::after {
+      background-color: $info;
+    }
+  }
+}
+
+.radio-warning {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $warning;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $warning;
+    }
+    &::after {
+      background-color: $warning;
+    }
+  }
+}
+
+.radio-success {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $success;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $success;
+    }
+    &::after {
+      background-color: $success;
+    }
+  }
+}
+
+.radio-purple {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $purple;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $purple;
+    }
+    &::after {
+      background-color: $purple;
+    }
+  }
+}
+
+.radio-red {
+  input[type="radio"] + label {
+    &::after {
+      background-color: $danger;
+    }
+  }
+  input[type="radio"]:checked + label {
+    &::before {
+      border-color: $danger;
+    }
+    &::after {
+      background-color: $danger;
+    }
+  }
+}
+
+
+
+/* File Upload */
+
+.fileupload {
+  overflow: hidden;
+  position: relative;
+  input.upload {
+    cursor: pointer;
+    filter: alpha(opacity=0);
+    font-size: 20px;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+
+
+/**
+Models
+**/
+
+.model_img {
+  cursor:pointer;
+}
+
+/*Nestable*/
+.myadmin-dd {
+  .dd-list {
+    .dd-item {
+      .dd-handle {
+        background: $white;
+        border: 1px solid $border;
+        padding: 8px 16px;
+        height: auto;
+        font-weight:$font-bold;
+        border-radius:$radius;
+
+        &:hover {
+          color: $info;
+        }
+      }
+
+      button {
+        height: auto;
+        font-size: 17px;
+        margin: 8px auto;
+        color: $dark;
+        width: 30px;
+      }
+    }
+  }
+}
+
+.myadmin-dd-empty {
+  .dd-list {
+    .dd3-handle {
+      border: 1px solid $border;
+      border-bottom:0px;
+      background: $white;
+      height: 36px;
+      width: 36px;
+
+      &:before {
+        color: inherit;
+        top: 7px;
+      }
+
+      &:hover {
+        color: $info;
+      }
+    }
+    .dd3-content {
+      height: auto;
+      border: 1px solid $border;
+      padding: 8px 16px 8px 46px;
+      background: $white;
+      font-weight: $font-bold;
+
+      &:hover {
+        color: $info;
+      }
+    }
+    button {
+      width: 26px;
+      height: 26px;
+      font-size: 16px;
+      font-weight: $font-bold;
+    }
+  }
+}
+/*Setting box*/
+.settings_box{
+  position:absolute;
+  top:75px;
+
+  right:0px;
+  z-index:100;
+  a {
+    background:$white;
+    padding:15px;
+    display:inline-block;
+    vertical-align:top;
+  i {
+  display:block;
+  -webkit-animation-name: rotate;
+  -webkit-animation-duration: 2s;
+   -moz-animation-name: rotate;
+    -moz-animation-duration: 2s;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    animation-name: rotate;
+    font-size:16px;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    }
+    }
+}
+@-webkit-keyframes rotate {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@-moz-keyframes rotate {
+    from {-moz-transform: rotate(0deg);}
+    to {-moz-transform: rotate(360deg);}
+}
+
+@keyframes rotate {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(360deg);}
+}
+
+.theme_color{
+  margin:0px;
+  padding:0px;
+  display:inline-block;
+  overflow:hidden;
+  width:0px;
+  transition:0.5s ease-out;
+
+  background:$white;
+  li{
+    list-style:none;
+    width:30%;
+    float:left;
+    margin:0 1.5%;
+    a{
+      padding:5px;
+      height:50px;
+      display:block;
+    }
+    a.theme-green{ background:$success}
+     a.theme-red{ background:$danger}
+      a.theme-dark{ background:$inverse}
+  }
+}
+.theme_block{
+  width:200px;
+  padding:30px;
+}
+
+/*Common Ul*/
+ul.common li {
+    display: inline-block;
+    line-height: 40px;
+    list-style: outside none none;
+    width: 48%;
+     a {
+    color: $bodytext;
+     &:hover {
+          color: $info;
+        }
+  }
+}

resource/styles/agile-admin/inverse/pages.scss

@@ -0,0 +1,2262 @@
+/*------------------ Style tabs ------------------*/
+
+.sttabs {
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    width: 100%;
+    font-weight: 300;
+}
+
+.sticon::before {
+    display: inline-block;
+    margin: 0 0.4em 0 0;
+    vertical-align: middle;
+    font-size: 20px;
+    speak: none;
+    -webkit-backface-visibility: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.sttabs nav {
+    text-align: center;
+    ul {
+        position: relative;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: -moz-flex;
+        display: -ms-flex;
+        display: flex;
+        margin: 0 auto;
+        padding: 0;
+        font-family: 'Poppins', sans-serif;
+        list-style: none;
+        -ms-box-orient: horizontal;
+        -ms-box-pack: center;
+        -webkit-flex-flow: row wrap;
+        -moz-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -webkit-justify-content: center;
+        -moz-justify-content: center;
+        -ms-justify-content: center;
+        justify-content: center;
+        li {
+            position: relative;
+            z-index: 1;
+            display: block;
+            margin: 0;
+            text-align: center;
+            -webkit-flex: 1;
+            -moz-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+        }
+    }
+    a {
+        position: relative;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 2.5;
+        span {
+            vertical-align: middle;
+            font-weight: 500;
+            font-size: 14px;
+            font-family: $basefont1;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+.sttabs nav li.tab-current a {
+    color: $danger;
+}
+
+
+/* Individual tab styles */
+
+
+/*****************************/
+
+
+/* Bar */
+
+
+/*****************************/
+
+.tabs-style-bar nav ul li a {
+    margin: 0 2px;
+    background-color: #f7fafc;
+    color: #686868;
+    padding: 5px 0;
+    transition: background-color 0.2s, color 0.2s;
+    &:hover,
+    &:focus {
+        color: $danger;
+    }
+    span {
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 14px;
+        font-family: 'Poppins', sans-serif;
+    }
+}
+
+.tabs-style-bar nav ul li.tab-current a {
+    background: #fb9678;
+    color: #fff;
+}
+
+
+/*****************************/
+
+
+/* Icon box */
+
+
+/*****************************/
+
+.tabs-style-iconbox nav {
+    background: $extralight;
+    ul li a {
+        overflow: visible;
+        padding: 35px 0;
+        line-height: 1;
+        -webkit-transition: color 0.2s;
+        transition: color 0.2s;
+        color: $dark;
+    }
+}
+
+.tabs-style-iconbox nav ul li.tab-current {
+    z-index: 1;
+    a {
+        background: $danger;
+        color: $white;
+        box-shadow: -1px 0 0 $white;
+    }
+    a::after {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -10px;
+        width: 0;
+        height: 0;
+        border: solid transparent;
+        border-width: 10px;
+        border-top-color: #fb9678;
+        content: '';
+        pointer-events: none;
+    }
+}
+
+.tabs-style-iconbox nav ul li:first-child::before,
+.tabs-style-iconbox nav ul li::after {
+    position: absolute;
+    top: 20%;
+    right: 0;
+    z-index: -1;
+    width: 1px;
+    height: 60%;
+    content: '';
+}
+
+.tabs-style-iconbox nav ul li:first-child::before {
+    right: auto;
+    left: 0;
+}
+
+.tabs-style-iconbox .sticon::before {
+    display: block;
+    margin: 0 0 0.25em 0;
+}
+
+
+/*****************************/
+
+
+/* Underline */
+
+
+/*****************************/
+
+.tabs-style-underline nav {
+    border: 1px solid $border;
+    a {
+        padding: 20px 0;
+        border-left: 1px solid $border;
+        -webkit-transition: color 0.2s;
+        transition: color 0.2s;
+        color: $dark;
+    }
+    li:last-child a {
+        border-right: 1px solid $border;
+    }
+    li a::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        background: #fb9678;
+        content: '';
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        -webkit-transform: translate3d(0, 150%, 0);
+        transform: translate3d(0, 150%, 0);
+    }
+    li.tab-current a::after {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+
+/*****************************/
+
+
+/* Triangle and line */
+
+
+/*****************************/
+
+.tabs-style-linetriangle nav a {
+    overflow: visible;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
+    span {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+        padding: 15px 0;
+        color: $dark;
+    }
+}
+
+.tabs-style-linetriangle nav li.tab-current {
+    a:after,
+    a:before {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        border: solid transparent;
+        content: '';
+        pointer-events: none;
+    }
+}
+
+.tabs-style-linetriangle nav li.tab-current a:after {
+    margin-left: -10px;
+    border-width: 10px;
+    border-top-color: $white;
+}
+
+.tabs-style-linetriangle nav li.tab-current a span {
+    color: $danger;
+}
+
+.tabs-style-linetriangle nav li.tab-current a:before {
+    margin-left: -11px;
+    border-width: 11px;
+    border-top-color: rgba(0, 0, 0, 0.2);
+}
+
+
+/*****************************/
+
+
+/* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */
+
+
+/*****************************/
+
+.tabs-style-iconfall {
+    overflow: visible;
+    nav {
+        max-width: 1200px;
+        margin: 0 auto;
+        a {
+            display: inline-block;
+            overflow: visible;
+            padding: 1em 0 2em;
+            color: $dark;
+            line-height: 1;
+            -webkit-transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+            transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+            &:hover,
+            &:focus {
+                color: $danger;
+            }
+        }
+        li.tab-current a {
+            color: $danger;
+        }
+        li::before {
+            position: absolute;
+            bottom: 1em;
+            left: 50%;
+            margin-left: -20px;
+            width: 40px;
+            height: 4px;
+            background: $danger;
+            content: '';
+            opacity: 0;
+            -webkit-transition: -webkit-transform 0.2s ease-in;
+            transition: transform 0.2s ease-in;
+            -webkit-transform: scale3d(0, 1, 1);
+            transform: scale3d(0, 1, 1);
+        }
+        li.tab-current::before {
+            opacity: 1;
+            -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+        }
+        li.tab-current .sticon::before {
+            opacity: 1;
+            -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    .sticon::before {
+        display: block;
+        margin: 0 0 0.35em;
+        opacity: 0;
+        font-size: 24px;
+        -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
+        transition: transform 0.2s, opacity 0.2s;
+        -webkit-transform: translate3d(0, -100px, 0);
+        transform: translate3d(0, -100px, 0);
+        pointer-events: none;
+    }
+}
+
+@media screen and (max-width: 58em) {
+    .tabs-style-iconfall nav li .sticon::before {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+
+/*****************************/
+
+
+/* Moving Line */
+
+
+/*****************************/
+
+.tabs-style-linemove nav {
+    background: $extralight;
+    li:last-child::before {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: $danger;
+        content: '';
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+    }
+    li:first-child.tab-current ~ li:last-child::before {
+        -webkit-transform: translate3d(-400%, 0, 0);
+        transform: translate3d(-400%, 0, 0);
+    }
+    li:nth-child(2).tab-current ~ li:last-child::before {
+        -webkit-transform: translate3d(-300%, 0, 0);
+        transform: translate3d(-300%, 0, 0);
+    }
+    li:nth-child(3).tab-current ~ li:last-child::before {
+        -webkit-transform: translate3d(-200%, 0, 0);
+        transform: translate3d(-200%, 0, 0);
+    }
+    li:nth-child(4).tab-current ~ li:last-child::before {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+    a {
+        padding: 30px 0;
+        color: $dark;
+        line-height: 1;
+        -webkit-transition: color 0.3s, -webkit-transform 0.3s;
+        transition: color 0.3s, transform 0.3s;
+    }
+    li.tab-current a {
+        color: $danger;
+    }
+}
+
+
+/*****************************/
+
+
+/* Line */
+
+
+/*****************************/
+
+.tabs-style-line nav a {
+    padding: 20px 10px;
+    box-shadow: inset 0 -2px #d1d3d2;
+    color: #686868;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    line-height: 1;
+    -webkit-transition: color 0.3s, box-shadow 0.3s;
+    transition: color 0.3s, box-shadow 0.3s;
+    &:hover,
+    &:focus {
+        box-shadow: inset 0 -2px #74777b;
+    }
+}
+
+.tabs-style-line nav li.tab-current a {
+    box-shadow: inset 0 -2px $danger;
+    color: $danger;
+}
+
+@media screen and (max-width: 58em) {
+    .tabs-style-line nav ul {
+        display: block;
+        box-shadow: none;
+        li {
+            display: block;
+            -webkit-flex: none;
+            flex: none;
+        }
+    }
+}
+
+
+/*****************************/
+
+
+/* Circle */
+
+
+/*****************************/
+
+.tabs-style-circle {
+    overflow: visible;
+    nav li {
+        margin-top: 60px!important;
+        margin-bottom: 60px!important;
+    }
+    nav li::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -60px 0 0 -60px;
+        width: 120px;
+        height: 120px;
+        border: 1px solid #fb9678;
+        border-radius: 50%;
+        content: '';
+        opacity: 0;
+        -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
+        transition: transform 0.2s, opacity 0.2s;
+        -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+        transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+    }
+    nav a {
+        overflow: visible;
+        color: #2b2b2b;
+        font-weight: 500;
+        font-size: 14;
+        line-height: 1.1;
+        -webkit-transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+        transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+        span {
+            display: inline-block;
+        }
+        &:hover,
+        &:focus {
+            color: $danger
+        }
+    }
+    nav li.tab-current a {
+        color: $danger;
+        span {
+            -webkit-transform: translate3d(0, 4px, 0);
+            transform: translate3d(0, 4px, 0);
+        }
+    }
+}
+
+@media screen and (max-width: 58em) {
+    .tabs-style-circle nav li::before {
+        margin: -40px 0 0 -40px;
+        width: 80px;
+        height: 80px;
+    }
+}
+
+.tabs-style-circle nav li.tab-current::before {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+}
+
+.tabs-style-circle nav a span,
+.tabs-style-circle .icon::before {
+    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+    transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.tabs-style-circle .sticon::before {
+    display: block;
+    margin: 0;
+    pointer-events: none;
+}
+
+.tabs-style-circle nav li.tab-current .sticon::before {
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+}
+
+
+/*****************************/
+
+
+/* Shape */
+
+
+/*****************************/
+
+.tabs-style-shape {
+    max-width: 1200px;
+    margin: 0 auto;
+    nav ul li {
+        margin: 0 3em;
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+    nav {
+        ul li.tab-current {
+            z-index: 1;
+        }
+        li a {
+            overflow: visible;
+            margin: 0 -3em 0 0;
+            padding: 0;
+            color: #fff;
+            font-weight: 500;
+            svg {
+                position: absolute;
+                left: 100%;
+                margin: 0;
+                width: 3em;
+                height: 100%;
+                fill: #bdc2c9;
+            }
+        }
+        li:first-child a span {
+            padding-left: 2em;
+            border-radius: 30px 0 0 0;
+        }
+        li:last-child a span {
+            padding-right: 2em;
+            border-radius: 0 30px 0 0;
+        }
+    }
+}
+
+.tabs-style-shape nav li a svg:nth-child(2),
+.tabs-style-shape nav li:last-child a svg {
+    right: 100%;
+    left: auto;
+    -webkit-transform: scale3d(-1, 1, 1);
+    transform: scale3d(-1, 1, 1);
+}
+
+.tabs-style-shape nav li a {
+    span {
+        display: block;
+        overflow: hidden;
+        padding: 0.65em 0;
+        background-color: #bdc2c9;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    &:hover span {
+        background-color: $danger;
+    }
+    &:hover svg {
+        fill: $danger;
+    }
+    svg {
+        pointer-events: none;
+        use {
+            pointer-events: auto;
+        }
+    }
+}
+
+.tabs-style-shape nav li.tab-current a span,
+.tabs-style-shape nav li.tab-current a svg {
+    -webkit-transition: none;
+    transition: none;
+}
+
+.tabs-style-shape nav li.tab-current a span {
+    background: #f7fafc;
+}
+
+.tabs-style-shape nav li.tab-current a svg {
+    fill: #f7fafc;
+}
+
+.tabs-style-shape .content-wrap {
+    background: #f7fafc;
+}
+
+@media screen and (max-width: 58em) {
+    .tabs-style-shape nav ul {
+        display: block;
+        padding-top: 1.5em;
+        li {
+            display: block;
+            margin: -1.25em 0 0;
+            -webkit-flex: none;
+            flex: none;
+            a {
+                margin: 0;
+            }
+            svg {
+                display: none;
+            }
+            a span {
+                padding: 1.25em 0 2em !important;
+                border-radius: 30px 30px 0 0 !important;
+                box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
+                line-height: 1;
+            }
+            &:last-child a span {
+                padding: 1.25em 0 !important;
+            }
+        }
+    }
+    .tabs-style-shape nav ul li.tab-current {
+        z-index: 1;
+    }
+}
+
+
+/*****************************/
+
+
+/* Line Box */
+
+
+/*****************************/
+
+.tabs-style-linebox nav {
+    ul li {
+        margin: 0 0.5em;
+        -webkit-flex: none;
+        flex: none;
+    }
+    a {
+        padding: 0 1.5em;
+        color: $dark;
+        font-weight: 500;
+        -webkit-transition: color 0.3s;
+        transition: color 0.3s;
+        &:hover,
+        &:focus {
+            color: $danger;
+        }
+    }
+    li.tab-current a {
+        color: $white;
+    }
+    a::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background: #d2d8d6;
+        content: '';
+        -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
+        transition: background-color 0.3s, transform 0.3s;
+        -webkit-transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1);
+        transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1);
+        -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
+        transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
+    }
+}
+
+.tabs-style-linebox nav li.tab-current a::after {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.tabs-style-linebox nav a:hover::after,
+.tabs-style-linebox nav a:focus::after,
+.tabs-style-linebox nav li.tab-current a::after {
+    background: $danger;
+}
+
+@media screen and (max-width: 58em) {
+    .tabs-style-linebox nav ul {
+        display: block;
+        box-shadow: none;
+        li {
+            display: block;
+            -webkit-flex: none;
+            flex: none;
+        }
+    }
+}
+
+
+/*****************************/
+
+
+/* Flip */
+
+
+/*****************************/
+
+.tabs-style-flip {
+    max-width: 1200px;
+    margin: 0 auto;
+    nav a {
+        padding: 0.5em 0;
+        color: $dark;
+        -webkit-transition: color 0.3s;
+        transition: color 0.3s;
+        &:hover,
+        &:focus {
+            color: $danger;
+        }
+        span {
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+    }
+    nav a::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-color: #f0f0f0;
+        content: '';
+        -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
+        transition: transform 0.3s, background-color 0.3s;
+        -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
+        transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
+        -webkit-transform-origin: 50% 100%;
+        transform-origin: 50% 100%;
+        -webkit-perspective-origin: 50% 100%;
+        perspective-origin: 50% 100%;
+    }
+}
+
+.tabs-style-flip nav li.tab-current a {
+    color: $danger;
+}
+
+.tabs-style-flip nav li.tab-current a::after {
+    background-color: #f7fafc;
+    -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 0deg);
+    transform: perspective(900px) rotate3d(1, 0, 0, 0deg);
+}
+
+.tabs-style-flip .content-wrap {
+    background: #f7fafc;
+}
+
+
+/*****************************/
+
+
+/* Circle fill */
+
+
+/*****************************/
+
+.tabs-style-circlefill {
+    max-width: 800px;
+    border: 1px solid $danger;
+    margin: 0 auto;
+    nav {
+        ul li {
+            overflow: hidden;
+            border-right: 1px solid $danger;
+        }
+        li a {
+            padding: 1.5em 0;
+            color: #fff;
+            font-size: 1.25em;
+        }
+        li:first-child {
+            border-left: none;
+        }
+        li:last-child {
+            border: none;
+        }
+        li::before {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -40px 0 0 -40px;
+            width: 80px;
+            height: 80px;
+            border: 1px solid $danger;
+            border-radius: 50%;
+            background: $danger;
+            content: '';
+            -webkit-transition: -webkit-transform 0.3s;
+            transition: transform 0.3s;
+        }
+        li.tab-current::before {
+            -webkit-transform: scale3d(2.5, 2.5, 1);
+            transform: scale3d(2.5, 2.5, 1);
+        }
+        a {
+            -webkit-transition: color 0.3s;
+            transition: color 0.3s;
+            span {
+                display: none;
+            }
+        }
+        li.tab-current a {
+            color: $white;
+        }
+    }
+}
+
+.tabs-style-circlefill .icon::before {
+    display: block;
+    margin: 0;
+    pointer-events: none;
+}
+
+.tabs-style-circlefill .content-wrap {
+    border-top: 1px solid $danger;
+}
+
+
+/* Content */
+
+.content-wrap {
+    position: relative;
+    section {
+        display: none;
+        margin: 0 auto;
+        padding: 25px;
+        min-height: 150px;
+        p {
+            margin: 0;
+            padding: 0.75em 0;
+        }
+    }
+}
+
+.content-wrap section.content-current {
+    display: block;
+}
+
+
+/* Fallback */
+
+.no-js .content-wrap section {
+    display: block;
+    padding-bottom: 2em;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+.no-flexbox nav ul {
+    display: block;
+    li {
+        min-width: 15%;
+        display: inline-block;
+    }
+}
+
+@media screen and (max-width: 58em) {
+    .sttabs nav a span {
+        display: none;
+    }
+    .sttabs nav a:before {
+        margin-right: 0;
+    }
+}
+
+
+/*--------------------Tooltip---------------------*/
+
+.mytooltip {
+    display: inline;
+    position: relative;
+    z-index: 9999;
+}
+
+
+/* Trigger text */
+
+.tooltip-item {
+    background: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 500;
+    padding: 0 10px;
+}
+
+
+/* Gap filler */
+
+.tooltip-item::after {
+    content: '';
+    position: absolute;
+    width: 360px;
+    height: 20px;
+    bottom: 100%;
+    left: 50%;
+    pointer-events: none;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.mytooltip:hover .tooltip-item::after {
+    pointer-events: auto;
+}
+
+
+/* Tooltip */
+
+.tooltip-content {
+    position: absolute;
+    z-index: 9999;
+    width: 360px;
+    left: 50%;
+    margin: 0 0 20px -180px;
+    bottom: 100%;
+    text-align: left;
+    font-size: 14px;
+    line-height: 30px;
+    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
+    background: #2b2b2b;
+    opacity: 0;
+    cursor: default;
+    pointer-events: none;
+}
+
+.tooltip-effect-1 .tooltip-content {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+    color: #ffffff;
+}
+
+.tooltip-effect-2 .tooltip-content {
+    -webkit-transform-origin: 50% calc(110%);
+    transform-origin: 50% calc(110%);
+    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
+    transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
+    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.tooltip-effect-3 .tooltip-content {
+    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
+    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-4 .tooltip-content {
+    -webkit-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transform: scale3d(0.7, 0.3, 1);
+    transform: scale3d(0.7, 0.3, 1);
+    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.tooltip-effect-5 .tooltip-content {
+    width: 180px;
+    margin-left: -90px;
+    -webkit-transform-origin: 50% calc(106%);
+    transform-origin: 50% calc(106%);
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
+    -webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
+    transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
+}
+
+.mytooltip:hover .tooltip-content {
+    pointer-events: auto;
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
+    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
+}
+
+.tooltip.tooltip-effect-2:hover .tooltip-content {
+    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
+    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
+}
+
+
+/* Arrow */
+
+.tooltip-content::after {
+    content: '';
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: transparent;
+    border-top-color: #2a3035;
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+
+/* Tooltip content*/
+
+.tooltip-content img {
+    position: relative;
+    height: 140px;
+    display: block;
+    float: left;
+    margin-right: 1em;
+}
+
+.tooltip-text {
+    font-size: 14px;
+    line-height: 24px;
+    display: block;
+    padding: 1.31em 1.21em 1.21em 0;
+    color: #fff;
+}
+
+.tooltip-effect-5 .tooltip-text {
+    padding: 1.4em;
+}
+
+a.mytooltip {
+    font-weight: 500;
+    color: #fb9678;
+}
+
+
+/* Tooltip 6 to 9 */
+
+.tooltip-content2 {
+    position: absolute;
+    z-index: 9999;
+    width: 80px;
+    height: 80px;
+    padding-top: 25px;
+    left: 50%;
+    margin-left: -40px;
+    bottom: 100%;
+    border-radius: 50%;
+    text-align: center;
+    background: #fb9678;
+    color: #ffffff;
+    opacity: 0;
+    margin-bottom: 20px;
+    cursor: default;
+    pointer-events: none;
+}
+
+.tooltip-content2 i {
+    opacity: 0;
+}
+
+.mytooltip:hover .tooltip-content2,
+.mytooltip:hover .tooltip-content2 i {
+    opacity: 1;
+    font-size: 18px;
+}
+
+.tooltip-effect-6 .tooltip-content2 {
+    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
+    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
+    -webkit-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-6 .tooltip-content2 i {
+    -webkit-transform: scale3d(0, 0, 1);
+    transform: scale3d(0, 0, 1);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-7 .tooltip-content2 {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-7 .tooltip-content2 i {
+    -webkit-transform: translate3d(0, 15px, 0);
+    transform: translate3d(0, 15px, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-8 .tooltip-content2 {
+    -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
+    transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
+    -webkit-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-8 .tooltip-content2 i {
+    -webkit-transform: scale3d(0, 0, 1);
+    transform: scale3d(0, 0, 1);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-9 .tooltip-content2 {
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-effect-9 .tooltip-content2 i {
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.mytooltip:hover .tooltip-content2,
+.mytooltip:hover .tooltip-content2 i {
+    pointer-events: auto;
+    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+}
+
+.tooltip-effect-6:hover .tooltip-content2 i {
+    -webkit-transform: rotate3d(1, 1, 1, 0);
+    transform: rotate3d(1, 1, 1, 0);
+}
+
+.tooltip-content2::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin: -7px 0 0 -15px;
+    width: 30px;
+    height: 20px;
+    background: url(/images/agile-admin/tooltip/tooltip1.svg) no-repeat center center;
+    background-size: 100%;
+}
+
+
+/***********Bloated Tooltip ***********/
+
+.tooltip-content3 {
+    position: absolute;
+    background: url(/images/agile-admin//tooltip/shape1.svg) no-repeat center bottom;
+    background-size: 100% 100%;
+    z-index: 9999;
+    width: 200px;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -100px;
+    padding: 50px 30px;
+    text-align: center;
+    color: #fff;
+    opacity: 0;
+    cursor: default;
+    font-size: 14;
+    line-height: 27px;
+    pointer-events: none;
+    -webkit-transform: scale3d(0.1, 0.2, 1);
+    transform: scale3d(0.1, 0.2, 1);
+    -webkit-transform-origin: 50% 120%;
+    transform-origin: 50% 120%;
+    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
+    transition: opacity 0.4s, transform 0.4s;
+    -webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
+    transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
+}
+
+.mytooltip:hover .tooltip-content3 {
+    opacity: 1;
+    pointer-events: auto;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+}
+
+
+/* Arrow */
+
+.tooltip-content3::after {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    left: 50%;
+    margin-left: -8px;
+    top: 100%;
+    background: #00AEEF;
+    -webkit-transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
+    transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
+}
+
+
+/*************Box Tooltip *************/
+
+
+/* Trigger text */
+
+.tooltip-item2 {
+    color: #008efa;
+    cursor: pointer;
+    z-index: 100;
+    position: relative;
+    display: inline-block;
+    font-weight: 500;
+    -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
+    transition: background-color 0.3s, color 0.3s, transform 0.3s;
+}
+
+.mytooltip:hover .tooltip-item2 {
+    color: #ffffff;
+    -webkit-transform: translate3d(0, -0.5em, 0);
+    transform: translate3d(0, -0.5em, 0);
+}
+
+
+/******************** Tooltip box ********************/
+
+.tooltip-content4 {
+    position: absolute;
+    z-index: 99;
+    width: 360px;
+    left: 50%;
+    margin-left: -180px;
+    bottom: -5px;
+    text-align: left;
+    background: #008efa;
+    opacity: 0;
+    font-size: 14px;
+    line-height: 27px;
+    padding: 1.5em;
+    color: #ffffff;
+    border-bottom: 55px solid #2b2b2b;
+    cursor: default;
+    pointer-events: none;
+    border-radius: 5px;
+    -webkit-transform: translate3d(0, -0.5em, 0);
+    transform: translate3d(0, -0.5em, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-content4 a {
+    color: #2b2b2b;
+}
+
+.tooltip-text2 {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 1.5em, 0);
+    transform: translate3d(0, 1.5em, 0);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.mytooltip:hover .tooltip-content4,
+.mytooltip:hover .tooltip-text2 {
+    pointer-events: auto;
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+
+/*******Tooltip Line********/
+
+.tooltip-content5 {
+    position: absolute;
+    z-index: 9999;
+    width: 300px;
+    left: 50%;
+    bottom: 100%;
+    font-size: 20px;
+    line-height: 1.4;
+    text-align: center;
+    font-weight: 400;
+    color: #ffffff;
+    background: transparent;
+    opacity: 0;
+    margin: 0 0 20px -150px;
+    cursor: default;
+    pointer-events: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-transition: opacity 0.3s 0.3s;
+    transition: opacity 0.3s 0.3s;
+}
+
+.mytooltip:hover .tooltip-content5 {
+    opacity: 1;
+    pointer-events: auto;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.tooltip-content5 span {
+    display: block;
+}
+
+.tooltip-text3 {
+    border-bottom: 10px solid #fb9678;
+    overflow: hidden;
+    -webkit-transform: scale3d(0, 1, 1);
+    transform: scale3d(0, 1, 1);
+    -webkit-transition: -webkit-transform 0.3s 0.3s;
+    transition: transform 0.3s 0.3s;
+}
+
+.mytooltip:hover .tooltip-text3 {
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+}
+
+.tooltip-inner2 {
+    background: #2b2b2b;
+    padding: 40px;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.mytooltip:hover .tooltip-inner2 {
+    -webkit-transition-delay: 0.3s;
+    transition-delay: 0.3s;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+
+/* Arrow */
+
+.tooltip-content5::after {
+    content: '';
+    bottom: -20px;
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: transparent;
+    border-top-color: #fb9678;
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+
+/*For Laptop (1280px)*/
+
+@media (max-width: 1350px) {
+    .carousel .item h3 {
+        font-size: 17px;
+        height: 90px;
+    }
+    .inbox-center a {
+        width: 400px;
+    }
+}
+
+
+/********* Search Result Page**********/
+
+.search-listing {
+    padding: 0px;
+    margin: 0px;
+    li {
+        list-style: none;
+        padding: 15px 0;
+        border-bottom: 1px solid $border;
+        h3 {
+            margin: 0px;
+            font-size: 18px;
+            a {
+                color: $info;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+        a {
+            color: $success;
+        }
+    }
+}
+
+
+/********* Megamenu Page**********/
+
+.megamenu {
+    left: 0px;
+    right: 0px;
+    width: 100%;
+}
+
+.mega-dropdown {
+    position: static !important;
+}
+
+.mega-dropdown-menu {
+    padding: 20px;
+    width: 100%;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    border: 0px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
+    > li > ul {
+        padding: 0;
+        margin: 0;
+        > li {
+            list-style: none;
+            > a {
+                display: block;
+                padding: 8px 0px;
+                clear: both;
+                line-height: 1.428571429;
+                color: $bodytext;
+                white-space: normal;
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                    color: $themecolor;
+                }
+            }
+        }
+    }
+    .dropdown-header {
+        font-size: 16px;
+        font-weight: 500;
+        padding: 8px 0;
+        margin-top: 12px;
+    }
+}
+
+.mega-dropdown-menu li.demo-box a {
+    color: $white;
+    display: block;
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+
+/*Data tables*/
+
+button.dt-button,
+div.dt-button,
+a.dt-button {
+    background: $info;
+    color: $white;
+    border-color: $info;
+    &:hover {
+        background: $info;
+    }
+}
+
+button.dt-button:hover:not(.disabled),
+div.dt-button:hover:not(.disabled),
+a.dt-button:hover:not(.disabled) {
+    background: $extralight;
+    color: $dark;
+    border-color: $border;
+}
+
+.dataTables_filter input {
+    border: 1px solid $border;
+}
+
+table.dataTable.display tbody tr.odd>.sorting_1,
+table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
+table.dataTable.display tbody tr:hover>.sorting_1,
+table.dataTable.order-column.hover tbody tr:hover>.sorting_1,
+table.dataTable.display tbody tr.even>.sorting_1,
+table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
+    background: none;
+}
+
+
+/*Summernote*/
+
+.note-editor {
+    border: 1px solid $border;
+    .panel-heading {
+        padding: 6px 10px 10px;
+    }
+}
+
+
+/*--------------------------------------------------------------
+  Update 1.6
+--------------------------------------------------------------*/
+
+
+/*left-right-aside-column*/
+
+.page-aside {
+    position: relative;
+}
+
+
+/*left-aside-column*/
+
+.left-aside {
+    position: absolute;
+    background: $white;
+    border-right: 1px solid $border;
+    padding: 20px;
+    width: 250px;
+    height: 100%;
+}
+
+.right-aside {
+    padding: 20px;
+    margin-left: 250px;
+    .contact-list {
+        td {
+            vertical-align: middle;
+            padding: 25px 10px;
+            img {
+                width: 30px;
+            }
+        }
+    }
+}
+
+.list-style-none {
+    margin: 0px;
+    padding: 0px;
+    li {
+        list-style: none;
+        margin: 0px;
+        &.box-label a {
+            font-weight: 500;
+        }
+        &.divider {
+            margin: 10px 0;
+            height: 1px;
+            background: $border;
+        }
+        a {
+            padding: 15px 10px;
+            display: block;
+            color: $bodytext;
+            &:hover {
+                color: $themecolor;
+            }
+            span {
+                float: right;
+            }
+        }
+    }
+}
+
+
+/*Chat-box*/
+
+.chat-main-box {
+    position: relative;
+    background: $white;
+    overflow: hidden;
+    .chat-left-aside {
+        position: absolute;
+        width: 250px;
+        z-index: 9;
+        top: 0px;
+        border-right: 1px solid $border;
+        .open-panel {
+            display: none;
+            cursor: pointer;
+            position: absolute;
+            left: -webkit-calc(100% - 1px);
+            top: 50%;
+            z-index: 100;
+            background-color: #fff;
+            -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, .2);
+            box-shadow: 1px 0 3px rgba(0, 0, 0, .2);
+            border-radius: 0 100px 100px 0;
+            line-height: 1;
+            padding: 15px 8px 15px 4px;
+        }
+        .chat-left-inner {
+            .form-control {
+                height: 60px;
+            }
+            .style-none {
+                padding: 0px;
+                li {
+                    list-style: none;
+                    overflow: hidden;
+                    a {
+                        padding: 20px;
+                        &:hover,
+                        &.active {
+                            background: $extralight;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .chat-right-aside {
+        margin-left: 250px;
+        .chat-list {
+            max-height: none;
+            height: 100%;
+            padding-top: 40px;
+            .chat-text {
+                border-radius: 6px;
+            }
+        }
+        .send-chat-box {
+            position: relative;
+            .form-control {
+                border: none;
+                border-top: 1px solid $border;
+                resize: none;
+                height: 80px;
+                padding-right: 180px;
+                &:focus {
+                    border-color: $border;
+                }
+            }
+            .custom-send {
+                position: absolute;
+                right: 20px;
+                bottom: 10px;
+                .cst-icon {
+                    color: $bodytext;
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
+
+
+/*User Cards*/
+
+.el-element-overlay .white-box {
+    padding: 0px;
+}
+
+.el-element-overlay .el-card-item {
+    position: relative;
+    padding-bottom: 25px;
+    .el-card-avatar {
+        margin-bottom: 15px;
+    }
+    .el-card-content {
+        text-align: center;
+        h3 {
+            margin: 0px;
+        }
+        a {
+            color: $bodytext;
+            &:hover {
+                color: $themecolor;
+            }
+        }
+    }
+    .el-overlay-1 {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        cursor: default;
+        img {
+            display: block;
+            position: relative;
+            -webkit-transition: all .4s linear;
+            transition: all .4s linear;
+            width: 100%;
+            height: auto;
+        }
+        &:hover img {
+            -ms-transform: scale(1.2) translateZ(0);
+            -webkit-transform: scale(1.2) translateZ(0);
+            /* transform: scale(1.2) translateZ(0); */
+        }
+        .el-info {
+            text-decoration: none;
+            display: inline-block;
+            text-transform: uppercase;
+            color: $white;
+            background-color: transparent;
+            filter: alpha(opacity=0);
+            -webkit-transition: all .2s ease-in-out;
+            transition: all .2s ease-in-out;
+            padding: 0;
+            margin: auto;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            transform: translateY(-50%) translateZ(0);
+            -webkit-transform: translateY(-50%) translateZ(0);
+            -ms-transform: translateY(-50%) translateZ(0);
+            > li {
+                list-style: none;
+                display: inline-block;
+                margin: 0 3px;
+                a {
+                    border-color: $white;
+                    color: $white;
+                    padding: 12px 15px 10px;
+                    &:hover {
+                        background: $danger;
+                        border-color: $danger;
+                    }
+                }
+            }
+        }
+    }
+    .el-overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        background-color: rgba(0, 0, 0, .7);
+        -webkit-transition: all .4s ease-in-out;
+        transition: all .4s ease-in-out;
+    }
+    .el-overlay-1:hover .el-overlay {
+        opacity: 1;
+        filter: alpha(opacity=100);
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+    .el-overlay-1 .scrl-dwn {
+        top: -100%;
+    }
+    .el-overlay-1 .scrl-up {
+        top: 100%;
+        height: 0px;
+    }
+    .el-overlay-1:hover .scrl-dwn {
+        top: 0px;
+    }
+    .el-overlay-1:hover .scrl-up {
+        top: 0px;
+        height: 100%;
+    }
+}
+
+
+/*Login sidebar*/
+
+.login-sidebar {
+    position: absolute;
+    right: 0px;
+    margin-top: 0px;
+    height: 100%;
+}
+
+
+/*Listing*/
+
+.common-list {
+    margin: 0px;
+    padding: 0px;
+    li {
+        list-style: none;
+        display: block;
+        a {
+            padding: 12px 0px;
+            color: $bodytext;
+            display: block;
+            &:hover {
+                color: $themecolor;
+            }
+        }
+    }
+}
+
+
+/*table layouts*/
+
+.color-table.primary-table thead th {
+    background-color: $primary;
+    color: $white;
+}
+
+.color-table.success-table thead th {
+    background-color: $success;
+    color: $white;
+}
+
+.color-table.info-table thead th {
+    background-color: $info;
+    color: $white;
+}
+
+.color-table.warning-table thead th {
+    background-color: $warning;
+    color: $white;
+}
+
+.color-table.danger-table thead th {
+    background-color: $danger;
+    color: $white;
+}
+
+.color-table.inverse-table thead th {
+    background-color: $inverse;
+    color: $white;
+}
+
+.color-table.dark-table thead th {
+    background-color: $dark;
+    color: $white;
+}
+
+.color-table.red-table thead th {
+    background-color: $red;
+    color: $white;
+}
+
+.color-table.purple-table thead th {
+    background-color: $purple;
+    color: $white;
+}
+
+.color-table.muted-table thead th {
+    background-color: $muted;
+    color: $white;
+}
+
+.color-bordered-table.primary-bordered-table {
+    border: 2px solid $primary;
+    thead th {
+        background-color: $primary;
+        color: $white;
+    }
+}
+
+.color-bordered-table.success-bordered-table {
+    border: 2px solid $success;
+    thead th {
+        background-color: $success;
+        color: $white;
+    }
+}
+
+.color-bordered-table.info-bordered-table {
+    border: 2px solid $info;
+    thead th {
+        background-color: $info;
+        color: $white;
+    }
+}
+
+.color-bordered-table.warning-bordered-table {
+    border: 2px solid $warning;
+    thead th {
+        background-color: $warning;
+        color: $white;
+    }
+}
+
+.color-bordered-table.danger-bordered-table {
+    border: 2px solid $danger;
+    thead th {
+        background-color: $danger;
+        color: $white;
+    }
+}
+
+.color-bordered-table.inverse-bordered-table {
+    border: 2px solid $inverse;
+    thead th {
+        background-color: $inverse;
+        color: $white;
+    }
+}
+
+.color-bordered-table.dark-bordered-table {
+    border: 2px solid $dark;
+    thead th {
+        background-color: $dark;
+        color: $white;
+    }
+}
+
+.color-bordered-table.red-bordered-table {
+    border: 2px solid $red;
+    thead th {
+        background-color: $red;
+        color: $white;
+    }
+}
+
+.color-bordered-table.purple-bordered-table {
+    border: 2px solid $purple;
+    thead th {
+        background-color: $purple;
+        color: $white;
+    }
+}
+
+.color-bordered-table.muted-bordered-table {
+    border: 2px solid $muted;
+    thead th {
+        background-color: $muted;
+        color: $white;
+    }
+}
+
+.full-color-table.full-primary-table {
+    background-color: rgba(44, 92, 169, .8);
+    thead th {
+        background-color: $primary;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $primary;
+    }
+}
+
+.full-color-table.full-success-table {
+    background-color: rgba(0, 194, 146, .8);
+    thead th {
+        background-color: $success;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $success;
+    }
+}
+
+.full-color-table.full-info-table {
+    background-color: rgba(0, 142, 250, .8);
+    thead th {
+        background-color: $info;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $info;
+    }
+}
+
+.full-color-table.full-warning-table {
+    background-color: rgba(248, 194, 85, .8);
+    thead th {
+        background-color: $warning;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $warning;
+    }
+}
+
+.full-color-table.full-danger-table {
+    background-color: rgba(247, 91, 54, .8);
+    thead th {
+        background-color: $danger;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $danger;
+    }
+}
+
+.full-color-table.full-inverse-table {
+    background-color: rgba(62, 77, 108, .8);
+    thead th {
+        background-color: $inverse;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $inverse;
+    }
+}
+
+.full-color-table.full-dark-table {
+    background-color: rgba(76, 86, 103, .8);
+    thead th {
+        background-color: $dark;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $dark;
+    }
+}
+
+.full-color-table.full-red-table {
+    background-color: rgba(251, 58, 58, .8);
+    thead th {
+        background-color: $red;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $red;
+    }
+}
+
+.full-color-table.full-purple-table {
+    background-color: rgba(44, 92, 169, .8);
+    thead th {
+        background-color: $purple;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $purple;
+    }
+}
+
+.full-color-table.full-muted-table {
+    background-color: rgba(152, 166, 173, .8);
+    thead th {
+        background-color: $muted;
+        border: 0 !important;
+        color: $white;
+    }
+    tbody td {
+        border: 0 !important;
+        color: $white;
+    }
+    tr:hover {
+        background-color: $muted;
+    }
+}
+
+
+/* Material Form Input Elements */
+
+.floating-labels .form-group {
+    position: relative;
+}
+
+.floating-labels .form-control {
+    font-size: 20px;
+    padding: 10px 10px 10px 0;
+    display: block;
+    border: none;
+    border-bottom: 1px solid $light;
+}
+
+.floating-labels select.form-control > option {
+    font-size: 14px;
+}
+
+.has-error .form-control {
+    border-bottom: 1px solid $danger;
+}
+
+.has-warning .form-control {
+    border-bottom: 1px solid $warning;
+}
+
+.has-success .form-control {
+    border-bottom: 1px solid $success;
+}
+
+.floating-labels .form-control:focus {
+    outline: none;
+    border: none;
+}
+
+.floating-labels label {
+    color: $bodytext;
+    font-size: 16px;
+    position: absolute;
+    cursor: auto;
+    top: 10px;
+    transition: 0.2s ease all;
+    -moz-transition: 0.2s ease all;
+    -webkit-transition: 0.2s ease all;
+}
+
+.floating-labels .form-control:focus ~ label,
+.floating-labels .form-control:valid ~ label {
+    top: -20px;
+    font-size: 12px;
+    color: $primary;
+}
+
+.floating-labels .bar {
+    position: relative;
+    display: block;
+}
+
+.floating-labels .bar:before,
+.floating-labels .bar:after {
+    content: '';
+    height: 2px;
+    width: 0;
+    bottom: 1px;
+    position: absolute;
+    background: $primary;
+    transition: 0.2s ease all;
+    -moz-transition: 0.2s ease all;
+    -webkit-transition: 0.2s ease all;
+}
+
+.floating-labels .bar:before {
+    left: 50%;
+}
+
+.floating-labels .bar:after {
+    right: 50%;
+}
+
+.floating-labels .form-control:focus ~ .bar:before,
+.floating-labels .form-control:focus ~ .bar:after {
+    width: 50%;
+}
+
+.floating-labels .highlight {
+    position: absolute;
+    height: 60%;
+    width: 100px;
+    top: 25%;
+    left: 0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.floating-labels .input-lg ~ label,
+.floating-labels .input-lg {
+    font-size: 24px;
+}
+
+.floating-labels .input-sm ~ label,
+.floating-labels .input-sm {
+    font-size: 16px;
+}
+
+.has-warning .bar:before,
+.has-warning .bar:after {
+    background: $warning;
+}
+
+.has-success .bar:before,
+.has-success .bar:after {
+    background: $success;
+}
+
+.has-error .bar:before,
+.has-error .bar:after {
+    background: $danger;
+}
+
+.has-warning .form-control:focus ~ label,
+.has-warning .form-control:valid ~ label {
+    color: $warning;
+}
+
+.has-success .form-control:focus ~ label,
+.has-success .form-control:valid ~ label {
+    color: $success;
+}
+
+.has-error .form-control:focus ~ label,
+.has-error .form-control:valid ~ label {
+    color: $danger;
+}
+
+.has-feedback label~.t-0 {
+    top: 0;
+}
+
+/*Dashboard chart*/
+.dashboard-chart{
+    margin-left:-33px;
+     margin-right:-33px;
+    margin-top:-25px;
+
+}

resource/styles/agile-admin/inverse/responsive.scss

@@ -0,0 +1,168 @@
+/*For Laptop (1280px)*/
+@media(max-width:1350px) {
+    .carousel .item{
+        h3{
+            font-size:17px;
+            height:90px;
+        }
+      } 
+     .inbox-center{
+         a{
+            width:400px;
+         }   
+        } 
+}
+
+/*Small Desktop*/
+@media(min-width:1024px) {
+     .app-search .form-control:focus{
+         width: 300px;
+        }
+       
+}
+
+/*Ipad*/
+@media(min-width:768px) {
+
+    #page-wrapper {
+        position: inherit;
+        margin: 0px 0 0px 220px;
+    }
+    .navbar-default{ 
+        position:relative; 
+        width:100%; 
+        top:0px;
+    }
+    .fix-header{
+      .navbar-static-top{ 
+        position:fixed; 
+        }
+      #page-wrapper {
+          margin-top:60px;
+      }  
+    }
+    
+.mail_listing{border-left:1px solid rgba(120, 130, 140, 0.13); padding-left:20px;}
+.inbox-panel{ padding-right:20px; }
+
+.top-minus{
+  margin-top:-62px;
+  float:right;
+}
+
+
+}
+
+@media (max-width:1024px) {
+ .b-r-none{ border-right:0px;}
+ .carousel-inner h3{ height:90px; overflow:hidden;}
+  .inbox-center{
+         a{
+            width:300px;
+         }   
+        }
+}
+/*Phone*/
+@media(max-width:767px) {
+    .navbar-top-links {
+        display:inline-block;
+    .profile-pic img{
+        margin-right:0px;
+        }
+    }
+    .top-left-part{ width:60px;}
+    .navbar-top-links li:last-child{ margin-right:0px;}
+    .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts{
+        width:260px;
+
+    }
+    .row-in-br{ border-right:0px; border-bottom:1px solid $border;}
+    .bg-title{
+      .breadcrumb{
+        float:left;
+        margin-top:0px;
+        margin-bottom:10px;
+      }
+    }
+    /*Timeline*/
+     ul.timeline:before {
+        left: 40px;
+    }
+
+    ul.timeline > li > .timeline-panel {
+        width: calc(100% - 90px);
+        width: -moz-calc(100% - 90px);
+        width: -webkit-calc(100% - 90px);
+    }
+
+    ul.timeline > li > .timeline-badge {
+        top: 16px;
+        left: 15px;
+        margin-left: 0;
+    }
+
+    ul.timeline > li > .timeline-panel {
+        float: right;
+    }
+
+    ul.timeline > li > .timeline-panel:before {
+        right: auto;
+        left: -15px;
+        border-right-width: 15px;
+        border-left-width: 0;
+    }
+
+    ul.timeline > li > .timeline-panel:after {
+        right: auto;
+        left: -14px;
+        border-right-width: 14px;
+        border-left-width: 0;
+    }
+
+   .wizard-steps > li{
+      display:block;
+   }
+   .dropdown .mailbox, .dropdown .dropdown-tasks {
+      left:-94px;
+    }
+    
+    
+    .mega-dropdown-menu{
+      height:340px;
+      overflow:auto;
+    }
+    .left-aside{
+      position:relative;
+      width:100%;
+      border:0px; 
+    }
+    .right-aside{
+      margin-left:0px;
+    }
+    .chat-main-box .chat-left-aside{
+      left:-250px;
+      transition:0.5s ease-in;
+      background:$white;
+      &.open-pnl{
+        left:0px;
+      }
+      .open-panel{
+        display:block;
+      }
+    }
+    .chat-main-box .chat-right-aside{
+      margin:0px; 
+    }
+    /***** Close Update 1.5 *****/      
+}
+@media(max-width:480px) {
+.vtabs{
+.tabs-vertical{
+      width:auto;
+      }
+}
+.stat-item{padding-right:0px;}
+.login-box{
+  width:100%;
+}
+}

resource/styles/agile-admin/inverse/sidebar-nav.scss

@@ -0,0 +1,278 @@
+// --Sidebar
+.sidebar {
+    overflow-y: auto;
+    .sidebar-nav.navbar-collapse {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .fa-fw {
+        width: 20px;
+        text-align: left!important;
+        display: inline-block;
+        font-size: 16px;
+        vertical-align: middle;
+    }
+    .label {
+        font-size: 10px;
+        border-radius: 60px;
+        padding: 6px 8px;
+        min-width: 30px;
+        height: 20px;
+    }
+}
+
+.sidebar #side-menu .user-pro {
+   
+    a {
+        padding-left: 20px;
+    }
+    .nav-second-level a:hover {
+        color: $themecolor;
+    }
+    .arrow {
+        top: 23px;
+        right: 20px;
+    }
+    > a {
+        padding: 17px 30px 16px 15px!important;
+    }
+    .img-circle {
+        width: 30px;
+        margin-right: 10px;
+    }
+    .nav-second-level {
+        li i {
+            margin-right: 5px;
+        }
+    }
+}
+
+.sidebar .sidebar-search {
+    padding: 15px;
+}
+
+#side-menu li.active > a {
+    background: rgba(0, 0, 0, 0);
+}
+
+#side-menu li a {
+    color: $sidebar-text;
+    border-left: 3px solid $sidebar;
+}
+
+#side-menu > li > a {
+    padding: 15px 30px 15px 15px;
+    &:hover,
+    &:focus {
+        background: rgba(0, 0, 0, 0.1);
+    }
+    &.active {
+        border-left: 3px solid $themecolor;
+        color: $white;
+        background: rgba(0, 0, 0, 0);
+    }
+}
+
+#side-menu ul > li > a {
+    &:hover {
+        color: $themecolor;
+        background: none;
+    }
+    &.active {
+        color: $themecolor;
+    }
+}
+
+.sidebar .arrow {
+    position: absolute;
+    right: 15px;
+    top: 18px;
+}
+
+.sidebar .nav-second-level .arrow {
+    right: 15px;
+    top: 12px;
+}
+
+.sidebar .fa.arrow:before {
+    content: "\f105";
+}
+
+.sidebar .active > a > span > .fa.arrow:before {
+    content: "\f107";
+}
+
+.sidebar .nav-second-level li,
+.sidebar .nav-third-level li {
+    border-bottom: none !important;
+}
+
+.sidebar .nav-second-level li a {
+    padding-left: 43px;
+}
+
+.sidebar .nav-third-level li a {
+    padding-left: 52px;
+}
+
+.content-wrapper .nicescroll-rails {
+    display: none!important;
+}
+
+/*Ipad*/
+@media(min-width:768px) {
+   
+    .sidebar {
+        z-index: 10;
+        position: absolute;
+        width: 220px;
+        padding-top:60px;
+        height:100%;
+        
+    }
+
+    /*If body has fix sidebar class*/
+    .fix-sidebar{
+        .sidebar {
+            position:fixed;
+            overflow:hidden;
+            
+        }
+        .top-left-part{
+            position:fixed;
+            width:220px;
+            
+        }  
+        .navbar-left{
+          margin-left:220px;
+          }
+          
+    }
+   .footer{
+    left:220px;
+   }
+   
+   /*If body has content-wrapper*/
+    .content-wrapper { 
+        #page-wrapper {
+            margin-left:60px;
+        }
+        .navbar-left{
+              margin-left:0px;
+          }
+        .footer{left:60px;}
+        .user-profile .user-pro-body .u-dropdown{ display:none;}
+        .user-profile .user-pro-body img{ width:40px;}  
+        .sidebar{
+            width:60px;
+           .hide-menu{
+               display:none;
+               width:180px;
+               left:60px;
+           }
+           .sidebar-nav{
+              position:absolute;
+              overflow:hidden;
+             .nav-second-level{
+                position:absolute;
+                z-index:999999;
+              } 
+            } 
+           .user-profile{
+                width:60px;
+            }  
+           .nav-small-cap, li span span{
+                display:none;
+           }
+          
+           #side-menu > li:hover{
+                width:300px;
+                background:$extralight;
+
+           }
+           li:hover .hide-menu{
+            display:inline;
+           }
+           #side-menu > li > a{
+            padding:15px 17px 15px 20px;
+           }
+          
+           
+           li:hover .nav-second-level.in, li:hover .nav-second-level, li:hover .nav-second-level.collapse li{
+            display:block;
+            
+           }
+           .nav-second-level{
+                position: absolute;
+                left: 60px;
+                background: $extralight;
+                width: 240px;
+                opacity:1;
+                padding-bottom:20px;
+                display:none;
+                li{
+                  background:$extralight;
+                }
+             > li > a{
+                  padding-left:30px;
+                  background: $extralight;
+              }  
+            }   
+        }
+        .top-left-part{
+            width:60px;
+           
+        }
+    }
+    .navbar-top-links .dropdown-messages,
+    .navbar-top-links .dropdown-tasks,
+    .navbar-top-links .dropdown-alerts {
+        margin-left: auto;
+    }
+
+.fix-sidebar.content-wrapper, .content-wrapper.fix-sidebar{
+  .navbar-left{
+              margin-left:60px!important;
+          }
+     .sidebar{
+      position:fixed;
+      .sidebar-nav{
+        position:absolute;
+         .nav-second-level{
+            position:absolute;
+            z-index:99999;
+          } 
+        }        
+     }        
+}
+
+}
+
+
+/*Phone*/
+@media(max-width:767px) {
+        
+    /***** Start Update 1.5 *****/
+    .fix-header{
+      .navbar-static-top{ 
+        position:fixed;
+        top:0px;
+        width:100%; 
+        }
+      #page-wrapper {
+          margin-top:60px;
+      }
+      .sidebar{
+        position:fixed;
+        
+        height:350px;
+        top:60px;
+        z-index:100;
+        overflow:auto!important;
+        box-shadow:0 10px 35px rgba(0, 0, 0, 0.2);
+      }  
+    }
+    
+    
+    /***** Close Update 1.5 *****/      
+}

resource/styles/agile-admin/inverse/style.scss

@@ -0,0 +1,13 @@
+@import "variables.scss";
+@import "eliteadmin.scss";
+// @import "widgets.scss";
+
+// @import "icons/font-awesome/less/font-awesome.scss";
+// @import "icons/themify-icons/themify-icons";
+// @import "icons/simple-line-icons/less/simple-line-icons";
+// @import "icons/weather-icons/less/weather-icons";
+// @import "icons/linea-icons/linea.scss";
+@import "pages.scss";
+@import "responsive.scss";
+@import "sidebar-nav.scss";
+// @import "spinners.css";

resource/styles/agile-admin/inverse/variables.scss

@@ -0,0 +1,68 @@
+// Variables
+
+// @import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900';
+
+// $basefont1:'Rubik', sans-serif;
+// $basefont2:'Rubik', sans-serif;
+$basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+$basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+
+
+/*Theme Colors*/
+$topbar:#3c4451;
+$sidebar:#4F5467;
+$bodycolor:#f4f6f8;
+$headingtext: #2b2b2b;
+$bodytext: #686868;
+$sidebar-text:#54667a;
+$themecolor:#ff6849;
+$dark-themecolor:#4F5467;
+
+/*bootstrap Color*/
+$danger: #f75b36;
+$success: #00c292;
+$warning: #f8c255;
+$primary: #2c5ca9;
+$info: #008efa;
+$muted: #98a6ad;
+$dark: #3e4d6c;
+$inverse:#3e4d6c;
+$light:#e4e7ea;
+$extralight:#f7fafc ;
+
+
+
+/*Normal Color*/
+$white: #ffffff;
+$red:#fb3a3a;
+$purple:#2c5ca9;
+$blue:#02bec9;
+$yellow:#a0aec4;
+$border:rgba(120, 130, 140, 0.21);
+$megna:#00b5c2;
+
+$rgt:right;
+$lft:left;
+
+$dark-text:#848a96;
+
+/*Border radius*/
+$radius:3px;
+
+/*Preloader*/
+.preloader{
+    width: 100%;
+    height: 100%;
+    top:0px;
+    position: fixed;
+    z-index: 99999;
+    background: #fff;
+    .cssload-speeding-wheel{
+        position: absolute;
+        top: "calc(50% - 3.5px)";
+        left: "calc(50% - 3.5px)";
+    }
+}
+
+/*Font weight*/
+$font-bold:500;

resource/styles/agile-admin/inverse/widgets.scss

@@ -0,0 +1,2626 @@
+/*ROW -IN*/
+.row-in i {
+  font-size:24px;
+}
+/*Inbox widgets*/
+.mailbox{
+  width:280px;
+  overflow:auto;
+  padding-bottom:0px;
+  }
+  .message-center {
+  a{
+    border-bottom:1px solid $border;
+    display:block;
+    padding:9px 15px;
+  &:hover{
+    background:$extralight;
+  }
+  }
+  .user-img{
+    width:40px;
+    float:left;
+    position:relative;
+    margin:0 10px 15px 0px;
+    img{ width:100%;}
+
+    .profile-status {
+      border: 2px solid $white;
+      border-radius: 50%;
+      display: inline-block;
+      height: 10px;
+      left: 30px;
+      position: absolute;
+      top: 1px;
+      width: 10px;
+    }
+    .online{
+      background:$success;
+    }
+    .busy{
+      background:$danger;
+    }
+    .away{
+      background:$warning;
+    }
+    .offline{
+      background:$warning;
+    }
+  }
+ .mail-contnet{
+    h5{
+      margin:0px;
+      font-weight:400;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+    }
+
+    .mail-desc{
+      font-size:12px;
+      display:block;
+      margin:5px 0;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+      color:$dark;
+    }
+    .time{
+      display:block;
+      font-size:10px;
+       color:$dark;
+    }
+
+ }
+
+ }
+.mail-contnet a.action{
+        margin-left:10px;
+        font-size:12px;
+        visibility:hidden;
+  }
+.mail-contnet:hover a.action{
+  visibility:visible;
+}
+
+/*Inbox Center*/
+
+.inbox-center{
+  .unread td{
+    font-weight:$font-bold;
+  }
+  a{
+    color:$bodytext;
+    padding:2px 0 3px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+}
+
+/*Comment center*/
+
+.comment-center {
+  margin:0 -25px;
+  .comment-body{
+    border-bottom:1px solid $border;
+    display:table;
+    padding:20px 25px;
+  &:hover{
+    background:$extralight;
+  }
+  }
+  .user-img{
+    width:40px;
+    display:table-cell;
+    position:relative;
+    margin:0 10px 0px 0px;
+    img{ width:100%;}
+
+  }
+ .mail-contnet{
+    display:table-cell;
+    padding-left:15px;
+    vertical-align:top;
+    h5{
+      margin:0px;
+      font-weight:400;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+    }
+    .mail-desc{
+      font-size:14px;
+      display:block;
+      margin:8px 0;
+      line-height:25px;
+      color:$dark-text;
+      height:50px;
+      overflow:hidden;
+    }
+    .time{
+      display:block;
+      font-size:10px;
+       color:$dark;
+    }
+ }
+ }
+/*Sales report*/
+.sales-report {
+  background:$extralight;
+  margin:12px -25px;
+  padding:15px;
+}
+
+
+/*Task*/
+.dropdown-tasks, .dropdown-alerts{ padding:0px;}
+.dropdown-tasks li a, .dropdown-alerts li a, .mailbox li > a{ padding:15px 20px;}
+.dropdown-tasks li.divider, .dropdown-alerts li.divider{ margin:0px;}
+
+/*col-in*/
+.row-in-br{border-right: 1px solid $border;}
+.col-in {
+
+  padding: 20px;
+  h5{}
+  h3{font-size: 48px; font-weight:100;}
+}
+
+/*
+Basic List
+*/
+.basic-list {
+ padding:0px;
+ li{
+  display:block;
+  padding:15px 0px;
+  border-bottom:1px solid $border;
+  line-height:27px;
+}
+}
+.basic-list li:last-child{
+  border-bottom:0px;
+  }
+
+/* Steam line widget */
+
+.steamline {
+  position: relative;
+  border-left: 1px solid $border;
+  margin-left:20px;
+  .sl-left {
+    float: left;
+    margin-left: -20px;
+    z-index: 1;
+  margin-right:15px;
+   img{
+      max-width:40px;
+  }
+  }
+}
+.steamline .sl-right{ padding-left:35px;}
+.steamline .sl-item{
+
+  margin-top:8px;
+  margin-bottom: 30px;
+
+}
+.sl-date{
+  font-size:10px; color:$muted;
+}
+
+.time-item {
+  border-color: $border;
+  padding-bottom: 1px;
+  position: relative;
+  &:before {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    background-color: $white;
+    border-color: $border;
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    bottom: 0;
+    content: '';
+    height: 14px;
+    left: 0;
+    margin-left: -8px;
+    position: absolute;
+    top: 5px;
+    width: 14px;
+  }
+}
+
+.time-item-item {
+  &:after {
+    content: " ";
+    display: table;
+  }
+}
+
+.item-info {
+  margin-bottom: 15px;
+  margin-left: 15px;
+  p {
+    margin-bottom: 10px !important;
+  }
+}
+
+/*User-box*/
+
+.user-bg{
+  margin:-25px;
+  height:230px;
+  overflow:hidden;
+  position:relative;
+ .overlay-box{
+      background:$purple;
+      opacity:0.9;
+      position:absolute;
+      top:0px;
+      left:0px;
+      right:0px;
+      height:100%;
+      text-align:center;
+   .user-content{
+     padding:15px;
+     margin-top:30px;
+
+   }
+  }
+}
+.user-btm-box{
+    padding:40px 0 10px;
+    clear:both;
+    overflow:hidden;
+}
+
+/*    Vertical Carousel */
+.vertical .carousel-inner {
+  height: 100%;
+  position:relative;
+}
+
+.carousel.vertical .item {
+   -webkit-transition: 0.6s ease-in-out top;
+   -moz-transition: 0.6s ease-in-out top;
+   -ms-transition: 0.6s ease-in-out top;
+   -o-transition: 0.6s ease-in-out top;
+   transition: 0.6s ease-in-out top;
+}
+
+.carousel.vertical .active {
+   top: 0;
+}
+
+.carousel.vertical .next {
+   top: 400px;
+}
+
+.carousel.vertical .prev {
+   top: -400px;
+}
+
+.carousel.vertical .next.left,
+.carousel.vertical .prev.right {
+   top: 0;
+}
+
+.carousel.vertical .active.left {
+   top: -400px;
+}
+
+.carousel.vertical .active.right {
+   top: 400px;
+}
+
+.carousel.vertical .item {
+   left: 0;
+}
+.twi-user img{
+  margin-right: 20px;
+    width: 50px;
+}
+.twi-user {
+    margin: 18px 0;
+}
+.carousel-inner h3{ height:112px; overflow:hidden;}
+/*Chart Box*/
+.chart-box{
+  margin:25px -15px -17px -17px;
+}
+
+/*Todo list*/
+.list-task .task-done span {
+    text-decoration: line-through;
+}
+/* Chat widget */
+.chat-list {
+  list-style: none;
+  max-height: 332px;
+  padding: 0px 20px;
+  li {
+    margin-bottom: 24px;
+    overflow:auto;
+  }
+  .chat-image {
+    display: inline-block;
+    float: left;
+    text-align: center;
+    width: 50px;
+    img {
+      border-radius: 100%;
+      width: 100%;
+    }
+  }
+  .chat-text {
+
+    background: $extralight;
+    border-radius:$radius;
+    display: inline-block;
+    padding: 15px;
+    position: relative;
+
+    h4 {
+      color: #1a2942;
+      display: block;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      margin:0;
+      line-height:15px;
+      position: relative;
+    }
+    p {
+      margin: 0px;
+      padding-top: 3px;
+    }
+    b{
+      font-size:10px;
+      opacity:0.8;
+    }
+
+  }
+  .chat-body {
+    display: inline-block;
+    float: left;
+    font-size: 12px;
+    margin-left: 12px;
+    width: 65%;
+  }
+  .odd {
+    .chat-image {
+      float: right !important;
+    }
+    .chat-body {
+      float: right !important;
+      margin-right: 12px;
+      text-align: right;
+
+
+      color:$white;
+    }
+    .chat-text {
+    background:$themecolor;
+    h4 { color:$white; }
+  }
+  }
+}
+
+.chat-send {
+  padding-left: 0px;
+  padding-right: 30px;
+  button {
+    width: 100%;
+  }
+}
+/*Weather*/
+
+.weather-box{
+  .weather-top{
+    overflow:hidden;
+    padding:10px 25px;
+    margin:0 -25px;
+    background:$extralight;
+    h2 {
+      line-height:24px;
+      small{
+        font-size:13px;
+
+      }
+    }
+
+    .today_crnt{
+    font-size:45px;
+    font-weight:100;
+      canvas{
+        display:inline-block;
+        margin-right:10px;
+        vertical-align:middle;
+      }
+    }
+  }
+  .weather-info {
+
+    padding:10px 0;
+    }
+  .weather-time{
+      overflow:hidden;
+      text-align:center;
+      padding-top:15px;
+      li span{
+          display:block;
+      }
+      li canvas{
+          font-size:20px;
+          margin:10px 0;
+      }
+  }
+
+}
+.demo-container {
+  width:100%;
+  height:350px;
+
+}
+
+.demo-placeholder {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  line-height: 1.2em;
+}
+
+/*Notification alert*/
+.myadmin-alert {
+    border-radius: 0px;
+    color: #fff;
+
+    padding: 12px 30px 12px 12px;
+    position: relative;
+    text-align: left;
+}
+.myadmin-alert a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+}
+.myadmin-alert h4 {
+    color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 0;
+}
+.myadmin-alert .img {
+    border-radius: 3px;
+    height: 40px;
+    left: 12px;
+    position: absolute;
+    top: 12px;
+    width: 40px;
+}
+.myadmin-alert-img {
+    min-height: 64px;
+    padding-left: 65px;
+}
+.myadmin-alert-icon {
+    padding-left: 20px;
+}
+.myadmin-alert-icon i{
+    padding-right: 10px;
+}
+.myadmin-alert .closed {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 20px;
+    font-weight: 500;
+    padding: 4px;
+    position: absolute;
+    right: 3px;
+    text-decoration: none;
+    top: 0;
+}
+.myadmin-alert .closed:hover {
+    color: #fff;
+}
+.myadmin-alert-click {
+    cursor: pointer;
+    padding-right: 12px;
+}
+.myadmin-alert .primary {
+    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
+    border: medium none;
+    border-radius: 3px;
+    color: inherit;
+    outline: 0 none;
+    padding: 4px 10px;
+}
+.myadmin-alert .cancel {
+    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
+    border: medium none;
+    border-radius: 3px;
+    color: rgba(0, 0, 0, 0.8);
+    outline: 0 none;
+    padding: 4px 10px;
+}
+.myadmin-alert .primary:hover, .myadmin-alert .cancel:hover {
+    opacity: 0.9;
+}
+.myadmin-alert-top, .myadmin-alert-bottom, .myadmin-alert-top-left, .myadmin-alert-top-right, .myadmin-alert-bottom-left, .myadmin-alert-bottom-right, .myadmin-alert-fullscreen {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+    display: none;
+    position: fixed;
+    z-index: 1000;
+}
+.myadmin-alert-top {
+    left: 0;
+    right: 0;
+    top: 0;
+}
+.myadmin-alert-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.myadmin-alert-top-left {
+    left: 20px;
+    top: 80px;
+}
+.myadmin-alert-top-right {
+    right: 20px;
+    top: 80px;
+}
+.myadmin-alert-bottom-left {
+    bottom: 20px;
+    left: 20px;
+}
+.myadmin-alert-bottom-right {
+    bottom: 20px;
+    right: 20px;
+}
+.myadmin-alert-fullsize {
+    left: 50%;
+    margin: -20px;
+    top: 50%;
+}
+.alert-custom {
+    background: $themecolor;
+    color:$white;
+    border-color:$themecolor;
+}
+.alert-inverse {
+    background: $inverse;
+    color:$white;
+    border-color:$inverse;
+}
+.alert-success {
+    background: $success;
+    color:$white;
+    border-color:$success;
+}
+.alert-dark {
+    background: $bodytext;
+    color:$white;
+    border-color:$bodytext;
+}
+.alert-warning {
+    background: $warning;
+    color:$white;
+    border-color:$warning;
+}
+.alert-danger {
+    background: $danger;
+    color:$white;
+    border-color:$danger;
+}
+.alert-primary {
+    background: $purple;
+    color:$white;
+    border-color:$purple;
+}
+.alert-info {
+    background: $info;
+    color:$white;
+    border-color:$info;
+}
+.alert-info .closed {
+    color: inherit;
+}
+.alert-info a.closed:hover {
+    color: inherit;
+}
+
+
+/*custom tab*/
+.tab-content{
+  margin-top:30px;
+}
+.customtab{
+  border-bottom:2px solid $extralight;
+}
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+  background:$white;
+  border:0px;
+  border-bottom:2px solid $themecolor;
+  margin-bottom:-1px;
+  color:$themecolor;
+}
+.customtab li a, .customtab li a:hover,  .customtab li a:focus{
+  border:0px;
+
+}
+/*custom tab2*/
+.customtab2{
+  border-bottom:1px solid $extralight;
+  border-top:1px solid $extralight;
+  padding:10px 0;
+}
+.customtab2 li.active a, .customtab2 li.active a:hover,  .customtab2 li.active a:focus{
+  background:$themecolor;
+  border:1px solid $themecolor;
+
+  color:$white;
+}
+.customtab2 li a, .customtab2 li a:hover,  .customtab2 li a:focus{
+  border:0px;
+
+}
+/*Vertical tabs*/
+.vtabs{
+    display:table;
+    .tabs-vertical{
+      width:150px;
+      border-right:1px solid $border;
+      display:table-cell;
+      vertical-align:top;
+      li a{
+        color:$dark;
+        margin-bottom:10px;
+        }
+      }
+    .tab-content{
+      display:table-cell;
+      padding:20px;
+
+      vertical-align:top;
+    }
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+  background:$themecolor;
+  border:0px;
+  border-right:2px solid $themecolor;
+  margin-right:-1px;
+  color:$white;
+}
+
+/*Custom vertical tab*/
+
+.customvtab .tabs-vertical li.active a, .customvtab .tabs-vertical li.active a:hover,  .customvtab .tabs-vertical li.active a:focus{
+  background:$white;
+  border:0px;
+  border-right:2px solid $themecolor;
+  margin-right:-1px;
+  color:$dark;
+}
+/*Nav pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+  background:$themecolor;
+  color:$white;
+}
+.nav-pills>li>a{
+  color:$dark;
+  border-radius:$radius;
+}
+/*Accordion*/
+
+.panel-group {
+  .panel {
+    .panel-heading {
+      a[data-toggle=collapse].collapsed {
+        &:before {
+          content: '\e64b';
+        }
+      }
+      .accordion-toggle.collapsed {
+        &:before {
+          content: '\e64b';
+        }
+      }
+      a[data-toggle=collapse] {
+        display: block;
+        &:before {
+          content: '\e648';
+          display: block;
+          float: right;
+          font-family: 'themify';
+          font-size: 14px;
+          text-align: right;
+          width: 25px;
+        }
+      }
+      .accordion-toggle {
+        display: block;
+        &:before {
+          content: '\e648';
+          display: block;
+          float: right;
+          font-family: 'themify';
+          font-size: 14px;
+          text-align: right;
+          width: 25px;
+        }
+      }
+    }
+    .panel-heading + .panel-collapse {
+      .panel-body {
+        border-top: none;
+      }
+    }
+  }
+  .panel-heading {
+    padding: 12px 20px;
+  }
+}
+/*Progressbars*/
+
+.progress {
+  -webkit-box-shadow: none !important;
+  background-color: $border;
+  box-shadow: none !important;
+  height: 4px;
+  border-radius:$radius;
+  margin-bottom: 18px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  box-shadow: none;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.progress.progress-sm {
+  height: 8px !important;
+  .progress-bar {
+    font-size: 8px;
+    line-height: 5px;
+  }
+}
+
+.progress.progress-md {
+  height: 15px !important;
+  .progress-bar {
+    font-size: 10.8px;
+    line-height: 14.4px;
+  }
+}
+
+.progress.progress-lg {
+  height: 20px !important;
+  .progress-bar {
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+.progress-bar-primary {
+  background-color: $primary;
+}
+
+.progress-bar-success {
+  background-color: $success;
+}
+
+.progress-bar-info {
+  background-color: $info;
+}
+.progress-bar-megna {
+  background-color: $megna;
+}
+
+.progress-bar-warning {
+  background-color: $warning;
+}
+
+.progress-bar-danger {
+  background-color: $danger;
+}
+
+.progress-bar-inverse {
+  background-color: $inverse;
+}
+
+.progress-bar-purple {
+  background-color: $purple;
+}
+
+
+.progress-bar-custom {
+  background-color: $info;
+}
+
+.progress-animated {
+  -webkit-animation-duration: 5s;
+  -webkit-animation-name: myanimation;
+  -webkit-transition: 5s all;
+  animation-duration: 5s;
+  animation-name: myanimation;
+  transition: 5s all;
+}
+/* Progressbar Animated */
+@-webkit-keyframes myanimation {
+  from {
+    width:0;
+  }
+}
+@keyframes myanimation {
+  from {
+    width:0;
+  }
+}
+
+/* Progressbar Vertical */
+.progress-vertical {
+    min-height: 250px;
+    height: 250px;
+    width: 4px;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: 20px;
+
+    .progress-bar {
+      width: 100%;
+   }
+}
+.progress-vertical-bottom{
+    min-height: 250px;
+    height: 250px;
+    position: relative;
+    width: 4px;
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: 20px;
+
+    .progress-bar {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+   }
+}
+
+.progress-vertical.progress-sm,.progress-vertical-bottom.progress-sm {
+  width: 8px !important;
+  .progress-bar {
+    font-size: 8px;
+    line-height: 5px;
+  }
+}
+
+.progress-vertical.progress-md,.progress-vertical-bottom.progress-md {
+  width: 15px !important;
+  .progress-bar {
+    font-size: 10.8px;
+    line-height: 14.4px;
+  }
+}
+
+.progress-vertical.progress-lg,.progress-vertical-bottom.progress-lg {
+  width: 20px !important;
+  .progress-bar {
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+/*Timeline*/
+
+.timeline {
+    position: relative;
+    padding: 20px 0 20px;
+    list-style: none;
+    max-width:1200px;
+    margin:0 auto;
+}
+
+.timeline:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 3px;
+    margin-left: -1.5px;
+    background-color: #eeeeee;
+}
+
+.timeline > li {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+    content: " ";
+    display: table;
+}
+
+.timeline > li:after {
+    clear: both;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+    content: " ";
+    display: table;
+}
+
+.timeline > li:after {
+    clear: both;
+}
+
+.timeline > li > .timeline-panel {
+    float: left;
+    position: relative;
+    width: 46%;
+    padding: 20px;
+    border: 1px solid $border;
+    border-radius: $radius;
+    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.05);
+    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
+}
+
+.timeline > li > .timeline-panel:before {
+    content: " ";
+    display: inline-block;
+    position: absolute;
+    top: 26px;
+    right: -8px;
+    border-top: 8px solid transparent;
+    border-right: 0 solid $border;
+    border-bottom: 8px solid transparent;
+    border-left: 8px solid $border;
+}
+
+.timeline > li > .timeline-panel:after {
+    content: " ";
+    display: inline-block;
+    position: absolute;
+    top: 27px;
+    right: -7px;
+    border-top: 7px solid transparent;
+    border-right: 0 solid #fff;
+    border-bottom: 7px solid transparent;
+    border-left: 7px solid #fff;
+}
+
+.timeline > li > .timeline-badge {
+    z-index: 100;
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    width: 50px;
+    height: 50px;
+    margin-left: -25px;
+    border-radius: 50% 50% 50% 50%;
+    text-align: center;
+    font-size: 1.4em;
+    line-height: 50px;
+    color: #fff;
+    overflow:hidden;
+    background-color: $inverse;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel {
+    float: right;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:before {
+    right: auto;
+    left: -8px;
+    border-right-width: 8px;
+    border-left-width: 0;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:after {
+    right: auto;
+    left: -7px;
+    border-right-width: 7px;
+    border-left-width: 0;
+}
+
+.timeline-badge.primary {
+    background-color: $primary !important;
+}
+
+.timeline-badge.success {
+    background-color: $success !important;
+}
+
+.timeline-badge.warning {
+    background-color: $warning !important;
+}
+
+.timeline-badge.danger {
+    background-color: $danger !important;
+}
+
+.timeline-badge.info {
+    background-color: $info !important;
+}
+
+.timeline-title {
+    margin-top: 0;
+    color: inherit;
+    font-weight:400;
+}
+
+.timeline-body > p,
+.timeline-body > ul {
+    margin-bottom: 0;
+}
+
+.timeline-body > p + p {
+    margin-top: 5px;
+}
+/*Easy Pie charts*/
+.chart {
+  position: relative;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+.chart.chart-widget-pie {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.pie-chart > span {
+    left: 0;
+    margin-top: -2px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.chart > span > img{
+    left: 0;
+    margin-top: -2px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 50%;
+  width:60%;
+  height:60%;
+    transform: translateY(-50%);
+  margin:0 auto;
+}
+
+.percent {
+  display: inline-block;
+  line-height: 100px;
+  z-index: 2;
+  font-weight: 600;
+  font-size: 18px;
+  color: $dark;
+
+  &:after {
+    content: '%';
+    margin-left: 0.1em;
+    font-size: .8em;
+  }
+}
+
+
+/*Tables*/
+
+
+.table {
+  margin-bottom: 10px;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd),.table-hover > tbody > tr:hover,
+.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
+.table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
+.table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
+.table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th {
+    background-color: $extralight !important;
+}
+
+.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
+.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
+.table > thead > tr > th, .table-bordered{
+    border-top: 1px solid $light;
+}
+
+.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th
+{
+  padding:15px 8px;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid $light;
+}
+.table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 1px solid $light;
+}
+
+tbody {
+  color: #797979;
+}
+
+th {
+  color: #666666;
+  font-weight: 500;
+}
+
+.table-bordered {
+    border: 1px solid $light;
+}
+table.focus-on {
+  tbody {
+    tr.focused {
+      th {
+        background-color: $themecolor;
+        color: $white;
+      }
+      td {
+        background-color: $themecolor;
+        color: $white;
+      }
+    }
+  }
+}
+
+.table-rep-plugin {
+  .table-responsive {
+    border: none !important;
+  }
+  tbody {
+    th {
+      font-size: 14px;
+      font-weight: normal;
+    }
+  }
+  }
+.jsgrid .jsgrid-table{ margin-bottom:0px;}
+.jsgrid-selected-row>td{
+  background:$extralight;
+  border-color:$extralight;
+}
+.jsgrid-header-row>th{
+  background:$white;
+}
+.footable-odd{
+    background-color:$extralight;
+  }
+  /*Inputs*/
+
+.form-control-line {
+    border-left: 0 none;
+    border-radius: 0;
+    border-right: 0 none;
+    border-top: 0 none;
+    box-shadow: none;
+    padding-left: 0;
+}
+.has-success {
+  .form-control {
+    border-color: $success;
+    box-shadow: none !important;
+  }
+}
+
+.has-warning {
+  .form-control {
+    border-color: $warning;
+    box-shadow: none !important;
+  }
+}
+
+.has-error {
+  .form-control {
+    border-color: $danger;
+    box-shadow: none !important;
+  }
+}
+
+.input-group-addon {
+  border-radius: 2px;
+  border: 1px solid $border;
+}
+.input-daterange input:first-child, .input-daterange input:last-child{border-radius:$radius;}
+/*Material inputs*/
+.form-material .form-group{ overflow:hidden;}
+.form-material .form-control {
+    background-color: rgba(0, 0, 0, 0);
+    background-position: center bottom, center calc(100% - 1px);
+    background-repeat: no-repeat;
+    background-size: 0 2px, 100% 1px;
+    padding: 0;
+    transition: background 0s ease-out 0s;
+}
+.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
+    background-image: linear-gradient($purple, $purple), linear-gradient($border, $border);
+    border: 0 none;
+    border-radius: 0;
+    box-shadow: none;
+    float: none;
+}
+.form-material .form-control.focus, .form-material .form-control:focus {
+    background-size: 100% 2px, 100% 1px;
+    outline: 0 none;
+    transition-duration: 0.3s;
+}
+.form-bordered .form-group{
+  border-bottom:1px solid $border;
+  padding-bottom:20px;
+}
+/*Select 2*/
+.select2-container {
+  .select2-choice {
+    background-image: none !important;
+    border: none !important;
+    height: auto  !important;
+    padding: 0px !important;
+    line-height: 22px !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+
+    .select2-arrow {
+      background-image: none !important;
+      background: transparent;
+      border: none;
+      width: 14px;
+      top: -2px;
+    }
+  }
+  .select2-container-multi.form-control {
+    height: auto;
+  }
+}
+.select2-results .select2-highlighted {
+  color: #ffffff;
+  background-color: $info;
+}
+.select2-drop-active {
+  border: 1px solid #e3e3e3 !important;
+  padding-top: 5px;
+
+}
+.select2-search {
+  input{
+    border: 1px solid $border;
+  }
+}
+.select2-container-multi {
+  width: 100%;
+
+  .select2-choices {
+    border: 1px solid #border  !important;
+    box-shadow: none !important;
+    background-image: none  !important;
+    border-radius:$radius!important;
+    min-height: 38px;
+
+    .select2-search-choice {
+      padding: 4px 7px 4px 18px;
+      margin: 5px 0 3px 5px;
+      color: #555555;
+      background: #f5f5f5;
+      border-color:$border;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+    .select2-search-field {
+      input {
+        padding: 7px 7px 7px 10px;
+        font-family: inherit;
+      }
+    }
+  }
+}
+
+/*Icons*/
+.icon-list-demo {
+  div {
+    cursor: pointer;
+    line-height: 60px;
+    white-space: nowrap;
+    color: $bodytext;
+
+    &:hover {
+      color: $dark;
+    }
+
+    p{
+      margin:10px 0;
+      padding:5px 0;
+    }
+  }
+  i {
+    -webkit-transition: all 0.2s;
+    -webkit-transition: font-size .2s;
+    display: inline-block;
+    font-size: 18px;
+    margin: 0 15px 0 10px;
+    text-align: left;
+    transition: all 0.2s;
+    transition: font-size .2s;
+    vertical-align: middle;
+    width: auto;
+
+    transition: all 0.3s ease 0s;
+  }
+  .col-md-4 {
+    border-radius:$radius;
+    &:hover {
+      background-color: $extralight;
+    }
+
+  }
+}
+.icon-list-demo .col-md-4:hover i {
+      font-size:2em;
+
+    }
+/*Google map*/
+.gmaps, .gmaps-panaroma{
+  height: 300px;
+}
+.gmaps, .gmaps-panaroma {
+  height: 300px;
+  background: $light;
+  border-radius: 3px;
+}
+
+.gmaps-overlay {
+  display: block;
+  text-align: center;
+  color: $white;
+  font-size: 16px;
+  line-height: 40px;
+  background: $primary;
+  border-radius: 4px;
+  padding: 10px 20px;
+}
+
+.gmaps-overlay_arrow {
+  left: 50%;
+  margin-left: -16px;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.gmaps-overlay_arrow.above {
+  bottom: -15px;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 16px solid $primary;
+}
+
+.gmaps-overlay_arrow.below {
+  top: -15px;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-bottom: 16px solid $primary;
+}
+
+.jvectormap-zoomin, .jvectormap-zoomout {
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+}
+.jvectormap-zoomout {
+    top: 40px;
+}
+
+/*Error Page*/
+.error-box{
+  height:100%;
+  position:fixed;
+  background:url(../../plugins/images/error-bg.jpg) no-repeat center center #fff !important;
+  width:100%;
+  .footer{
+    width:100%;
+    left:0px;
+    right:0px;
+  }
+}
+.error-body{
+   padding-top:5%;
+   h1{
+      font-size:210px;
+      font-weight:900;
+      line-height:210px;
+   }
+}
+
+/* Login- register pages */
+.login-register{
+  background:url(../../plugins/images/login-register.jpg) no-repeat center center / cover !important;
+  height:100%;
+  position:fixed;
+}
+.login-box{
+  background:$white;
+  width:400px;
+  margin:0 auto;
+  margin-top:10%;
+  .footer{
+    width:100%;
+    left:0px;
+    right:0px;
+  }
+  .social {
+    display:block;
+    margin-bottom:30px;
+  }
+}
+#recoverform{
+   display:none;
+}
+/*Pricing*/
+.pricing-box {
+  position: relative;
+  text-align: center;
+  margin-top:30px;
+}
+.featured-plan{
+    margin-top:0px;
+    .pricing-body {
+      padding:60px 0;
+      background:$extralight;
+      border: 1px solid #ddd;
+    }
+    .price-table-content .price-row {
+      border-top:1px solid rgba(120, 130, 140, 0.13);
+    }
+  }
+
+.pricing-body {
+  border-radius: 0px;
+  border-top: 1px solid rgba(120, 130, 140, 0.13);
+  border-bottom: 5px solid rgba(120, 130, 140, 0.13);
+  vertical-align: middle;
+  padding:30px 0;
+  position:relative;
+
+}
+
+.pricing-body h2{
+  position:relative;
+  font-size:56px;
+  margin:20px 0 10px;
+  font-weight:500;
+  span{
+    position:absolute;
+    font-size:15px;
+    top:-10px;
+    margin-left:-10px
+  }
+}
+.price-table-content{
+  .price-row {
+    padding:20px 0;
+    border-top:1px solid rgba(120, 130, 140, 0.13);
+  }
+}
+.pricing-plan  {
+  padding:0 15px;
+  .no-padding{ padding:0px;}
+}
+.price-lable{
+  position:absolute;
+  top:-10px;
+  padding:5px 10px;
+  margin:0 auto;
+  display:inline-block;
+  width:100px;
+  left:0px;
+  right:0px;
+ }
+
+/*Inbox*/
+
+.mails {
+  a {
+    color: $dark;
+  }
+
+  td {
+    vertical-align: middle !important;
+    position: relative;
+
+    &:last-of-type {
+      width: 100px;
+      padding-right: 20px;
+    }
+  }
+
+  tr {
+    &:hover {
+      .text-white {
+        display: none;
+      }
+    }
+  }
+
+  .mail-select {
+    padding: 12px 20px;
+    min-width: 134px;
+  }
+  .checkbox {
+    margin-bottom: 0px;
+    margin-top: 0px;
+    vertical-align: middle;
+    display: inline-block;
+    height: 17px;
+
+    label {
+      min-height: 16px;
+    }
+  }
+}
+
+.mail-list {
+  .list-group-item {
+     background-color: transparent;
+     border:0px;
+     border-left:3px solid $white;
+     border-radius:0px;
+     &:hover {
+       background:$extralight;
+       border-left:3px solid $extralight;
+     }
+     &:focus {
+       border-left:3px solid $extralight;
+     }
+     &.active:focus{
+     background:$extralight;
+       border-left:3px solid $danger;
+     }
+  }
+  .list-group-item.active{
+    border-left:3px solid $danger;
+    border-radius:0px;
+    color:$dark !important;
+
+  }
+}
+
+.mail_listing{  min-height:500px;}
+.inbox_listing .inbox-item:hover{ background:$extralight;}
+.inbox_listing .inbox-item{ padding-left:20px;}
+.inbox-widget.inbox_listing .inbox-item .inbox-item-text{ height:19px; overflow:hidden;}
+
+.message-center .unread .mail-contnet {
+  h5, .mail-desc{
+    font-weight: 600;
+    color: $dark!important;
+  }
+}
+
+/*Calendar*/
+.calendar {
+  float: left;
+  margin-bottom: 0px;
+}
+
+.fc-view {
+  margin-top: 30px;
+}
+.none-border {
+  .modal-footer {
+    border-top: none;
+  }
+}
+
+.fc-toolbar {
+  margin-bottom: 5px;
+  margin-top: 15px;
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 30px;
+    text-transform: uppercase;
+  }
+}
+
+.fc-day {
+  background: $white;
+}
+
+.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
+.fc-toolbar button:focus, .fc-toolbar button:hover,
+.fc-toolbar .ui-state-hover {
+  z-index: 0;
+}
+
+.fc-widget-header {
+  border: 0px !important;
+}
+
+.fc-widget-content {
+  border-color:rgba(120, 130, 140, 0.13)!important ;
+}
+
+.fc {
+  th.fc-widget-header {
+    background: $purple;
+    color:$white;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 7px 0px;
+    text-transform: uppercase;
+  }
+}
+
+.fc-button {
+  background: $white;
+  border: 1px solid $border;
+  color: #555555;
+  text-transform: capitalize;
+}
+
+.fc-text-arrow {
+  font-family: inherit;
+  font-size: 16px;
+}
+
+.fc-state-hover {
+  background: #F5F5F5;
+}
+.fc-unthemed .fc-today{
+  border:1px solid $danger;
+  background:#fcf8e3!important;
+}
+.fc-state-highlight {
+  background: #f0f0f0;
+}
+
+.fc-cell-overlay {
+  background: #f0f0f0;
+}
+
+.fc-unthemed {
+  .fc-today {
+    background: $white;
+  }
+}
+
+.fc-event {
+  border-radius: 0px;
+  border: none;
+  cursor: move;
+  font-size: 13px;
+  margin:1px -1px 0 -1px;
+  padding: 5px 5px;
+  text-align: center;
+  background:$info;
+}
+
+.calendar-event {
+
+  cursor: move;
+  margin: 10px 5px 0 0;
+  padding: 6px 10px;
+  display:inline-block;
+  color:$white;
+  min-width:140px;
+  text-align:center;
+  background:$info;
+  a{
+    float:right;
+    opacity:0.6;
+    font-size:10px;
+    margin:4px 0 0 10px;
+    color:$white;
+  }
+}
+
+.fc-basic-view {
+  td.fc-week-number {
+    span {
+      padding-right: 5px;
+    }
+  }
+  td.fc-day-number {
+    padding-right: 5px;
+  }
+}
+
+/*Weather small widget*/
+
+.weather{
+  h1{
+    color:$white;
+    font-size:50px;
+    font-weight:100;
+  }
+  i{
+    color:$white;
+    font-size:40px;
+
+  }
+  .w-title-sub{
+    color:rgba(255, 255, 255, 0.6);
+  }
+}
+
+/*Right sidebar*/
+.navbar-top-links > li.right-side-toggle a:focus{ background:$sidebar;}
+.right-sidebar{
+  position:fixed;
+  right:-240px;
+  width:240px;
+  display:none;
+  z-index:1000;
+  background:$white;
+  top:0px;
+  height:100%;
+  box-shadow:5px 1px 40px rgba(0, 0, 0, 0.1);
+  transition:all 0.3s ease;
+
+  .rpanel-title{
+    display:block;
+    padding:21px;
+    color:#fff;
+    text-transform:uppercase;
+    font-size:13px;
+    background:$themecolor;
+    span{
+        float:right;
+        cursor:pointer;
+        font-size:11px;
+        &:hover{
+            color:$dark;
+        }
+    }
+  }
+ .r-panel-body{
+    padding:20px;
+   ul{
+     margin:0px;
+     padding:0px;
+      li{
+          list-style:none;
+          padding:5px 0;
+      }
+   }
+ }
+}
+
+.shw-rside{
+  right:0px;
+  width:240px;
+  display:block;
+}
+
+/*Chat online*/
+.chatonline {
+  img{
+      margin-right:10px;
+      float:left;
+      width:30px;
+  }
+  li a {
+    padding:15px 0;
+    float:left;
+    width:100%;
+  span{
+      color:$bodytext;
+     small{
+        display:block;
+        font-size:10px;
+     }
+     }
+  }
+}
+
+/*Style switcher*/
+ul#themecolors {
+  display:block;
+  li{
+    display:inline-block;
+    &:first-child{
+      display:block;
+    }
+  }
+}
+#themecolors li a{
+    width: 50px;
+    height: 50px;
+    display:inline-block;
+    margin:5px;
+    color: transparent;
+    position: relative;
+}
+#themecolors li a.working:before{
+  content: "\f00c";
+  font-family: "FontAwesome";
+  font-size: 18px;
+  line-height: 50px;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #fff;
+  text-align: center;
+  }
+.default-theme{
+      background:$danger;
+}
+.green-theme{
+      background:$success;
+}
+.yellow-theme{
+      background:$yellow;
+}
+.blue-theme{
+      background:$info;
+}
+.purple-theme{
+      background:$purple;
+}
+.megna-theme{
+      background:$megna;
+}
+.default-dark-theme{
+    background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #f75b36 23%, #f75b36 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#f75b36',GradientType=1 ); /* IE6-9 */
+}
+.green-dark-theme{
+    background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #00c292 23%, #00c292 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#00c292',GradientType=1 ); /* IE6-9 */
+}
+.yellow-dark-theme{
+   background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #a0aec4 23%, #a0aec4 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#a0aec4',GradientType=1 ); /* IE6-9 */
+}
+.blue-dark-theme{
+    background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $info 23%, $info 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$info',GradientType=1 ); /* IE6-9 */
+}
+.purple-dark-theme{
+    background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $purple 23%, $purple 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$purple',GradientType=1 ); /* IE6-9 */
+}
+.megna-dark-theme{
+    background: #4f5467; /* Old browsers */
+    background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $megna 23%, $megna 99%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$megna',GradientType=1 ); /* IE6-9 */
+}
+
+
+/*visited ul li*/
+.visited li a{
+  color:$bodytext
+}
+.visited li.active a{
+  color:$themecolor;
+}
+
+/*Stats Row*/
+.stats-row{
+  margin-bottom:20px;
+}
+.stat-item{
+    display: inline-block;
+    padding-right: 15px;
+}
+.stat-item+.stat-item {
+    padding-left: 15px;
+    border-left: 1px solid #eee;
+}
+
+/*country-state*/
+.country-state{
+  list-style:none;
+  margin:0px;
+  padding:0px 0 0 10px;
+  h2{
+      margin:0px;
+  }
+  .progress{
+  margin-top:8px;
+  }
+}
+/*Two part*/
+.two-part li{
+  width:48.8%;
+  i{
+      font-size:44px;
+    }
+  span{
+      font-size:44px;
+      font-weight:100;
+      font-family:$basefont2;
+  }
+}
+
+/*News Slides*/
+
+.news-slide{
+position:relative;
+  .overlaybg{
+    height:343px;
+    overflow:hidden;
+  img{
+    width:100%;
+    height:100%;
+  }
+  }
+  .news-content{
+     position:absolute;
+     height:360px;
+     background:rgba(0, 0, 0, 0.5);
+     z-index:10;
+     width:100%;
+     top:0px;
+     padding:30px;
+     h2{
+        height:240px;
+        overflow:hidden;
+        color:$white;
+     }
+     a {
+        color:$white;
+        opacity:0.6;
+        text-transform:uppercase;
+     &:hover{
+        opacity:1;
+     }
+     }
+  }
+}
+/*Nav pill rounded*/
+.nav-pills-rounded li{ display:inline-block; float:none;}
+.nav-pills-rounded li a{
+  border-radius:60px;
+  -moz-border-radius:60px;
+  -webkit-border-radius:60px;
+  color:$bodytext;
+  padding: 10px 25px;
+}
+.nav-pills-rounded li.active a, .nav-pills-rounded li.active a:focus, .nav-pills-rounded li.active a:hover{
+  background:$themecolor;
+  color:$white;
+ }
+
+ /*analytics-info*/
+ .analytics-info .list-inline {
+     margin-bottom:0px;
+   li {
+      vertical-align:middle;
+      span{
+          font-size:24px;
+        }
+      i{
+        font-size:20px;
+      }
+      }
+ }
+
+ /*Feeds*/
+.feeds{
+    margin:0px;
+    padding:0px;
+  li{
+      list-style:none;
+      padding:10px;
+      display:block;
+      &:hover{
+          background:$extralight;
+      }
+      > div{
+          width:40px;
+          height:40px;
+          margin-right:5px;
+          display:inline-block;
+          text-align:center;
+          vertical-align:middle;
+          border-radius:100%;
+         i{
+            line-height:40px;
+         }
+      }
+      span{
+         float:right;
+         width:auto;
+          font-size:12px;
+      }
+  }
+
+}
+/*Jquery toaster*/
+
+
+.jq-icon-info {background-color: $megna; color:$white;}
+.jq-icon-success {background-color: $success; color:$white;}
+.jq-icon-error {background-color: $danger; color:$white;}
+.jq-icon-warning{ background-color:$warning; color:$white;}
+
+
+/*Dropzone*/
+.dropzone{ border-style:dashed; border-width:1px;}
+
+/*sales boxes*/
+
+.weather h1 sup{
+  font-size:20px;
+  top:-1.2em;
+}
+
+
+
+/* Button 1c */
+.fcbtn {
+  position: relative;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+  padding:8px 20px;
+}
+
+.fcbtn:after {
+  content: '';
+  position: absolute;
+  z-index:-1;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+/* Button 1b */
+.btn-1b{
+  &:after {
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+&:hover, &:active {
+  color: #fff;
+}
+&:hover:after, &:active:after {
+  height: 100%;
+}
+}
+.btn-1b.btn-info:after, .btn-1c.btn-info:after, .btn-1d.btn-info:after, .btn-1e.btn-info:after, .btn-1f.btn-info:after{background: $info;}
+.btn-1b.btn-warning:after, .btn-1c.btn-warning:after, .btn-1d.btn-warning:after, .btn-1e.btn-warning:after, .btn-1f.btn-warning:after{background: $warning;}
+.btn-1b.btn-danger:after, .btn-1c.btn-danger:after, .btn-1d.btn-danger:after, .btn-1e.btn-danger:after, .btn-1f.btn-danger:after{background: $danger;}
+.btn-1b.btn-primary:after, .btn-1c.btn-primary:after, .btn-1d.btn-primary:after, .btn-1e.btn-primary:after, .btn-1f.btn-primary:after{background: $purple;}
+.btn-1b.btn-success:after, .btn-1c.btn-success:after, .btn-1d.btn-success:after, .btn-1e.btn-success:after, .btn-1f.btn-success:after{background: $success;}
+.btn-1b.btn-inverse:after, .btn-1c.btn-inverse:after, .btn-1d.btn-inverse:after, .btn-1e.btn-inverse:after, .btn-1f.btn-inverse:after{background: $inverse;}
+
+
+/* Button 1c */
+
+.btn-1c{
+  &:after {
+  width: 0%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  }
+  &:hover,&:active {
+    color: #000;
+  }
+  &:hover:after, &:active:after {
+  width: 100%;
+  }
+}
+
+
+/* Button 1d */
+.btn-1d {
+  overflow: hidden;
+  &:after {
+  width: 0;
+  height: 103%;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  }
+  &:hover:after {
+  width: 100%;
+  opacity: 1;
+  }
+
+}
+
+/* Button 1e */
+.btn-1e {
+  overflow: hidden;
+  &:after {
+  width: 100%;
+  height: 0;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  opacity: 0;
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  }
+
+  &:hover:after {
+    height: 260%;
+    opacity: 1;
+  }
+  &:active:after {
+    height: 400%;
+    opacity: 1;
+  }
+}
+/* Button 1f */
+.btn-1f {
+  overflow: hidden;
+  &:after {
+  width: 101%;
+  height: 0;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  opacity: 0;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+&:hover:after {
+  height: 100%;
+  opacity: 1;
+}
+&:active:after {
+  height: 130%;
+  opacity: 1;
+}
+}
+
+/*sweat Aleart*/
+.sweet-alert {
+   padding:25px;
+  h2{
+  margin-top:0px;
+}
+p{
+  line-height:30px;
+}
+}
+
+/*List icon*/
+ul.list-icons{
+  margin:0px;
+  padding:0px;
+  li{
+    list-style:none;
+    line-height:40px;
+    i{
+      font-size:12px;
+      margin-right:5px;
+    }
+  }
+}
+
+/*Tooltip*/
+.demo-tooltip .tooltip, .demo-popover .popover{
+    position: relative;
+    margin-right: 25px;
+    opacity: 1;
+    display:inline-block;
+}
+.tooltip-inner {
+  border-radius:3px;
+  padding: 5px 10px;
+}
+.tooltip.in{opacity:1;}
+.tooltip-primary.tooltip .tooltip-inner, .tooltip-primary + .tooltip .tooltip-inner {
+  color: #ffffff;
+  background-color: $primary;
+}
+.tooltip-primary.tooltip.top .tooltip-arrow, .tooltip-primary + .tooltip.top .tooltip-arrow {
+  border-top-color: $primary;
+}
+.tooltip-primary.tooltip.right .tooltip-arrow, .tooltip-primary + .tooltip.right .tooltip-arrow {
+  border-right-color: $primary;
+}
+.tooltip-primary.tooltip.bottom .tooltip-arrow , .tooltip-primary + .tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $primary;
+}
+.tooltip-primary.tooltip.left .tooltip-arrow, .tooltip-primary + .tooltip.left .tooltip-arrow {
+  border-left-color: $primary;
+}
+.tooltip-success.tooltip .tooltip-inner, .tooltip-success + .tooltip .tooltip-inner {
+  color: #ffffff;
+  background-color: $success;
+}
+.tooltip-success.tooltip.top .tooltip-arrow, .tooltip-success + .tooltip.top .tooltip-arrow {
+  border-top-color: $success;
+}
+.tooltip-success.tooltip.right .tooltip-arrow, .tooltip-success + .tooltip.right .tooltip-arrow {
+  border-right-color: $success;
+}
+.tooltip-success.tooltip.bottom .tooltip-arrow, .tooltip-success + .tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $success;
+}
+.tooltip-success.tooltip.left .tooltip-arrow, .tooltip-success + .tooltip.left .tooltip-arrow {
+  border-left-color: $success;
+}
+.tooltip-warning.tooltip .tooltip-inner, .tooltip-warning + .tooltip .tooltip-inner {
+  color: #ffffff;
+  background-color: $warning;
+}
+.tooltip-warning.tooltip.top .tooltip-arrow, .tooltip-warning + .tooltip.top .tooltip-arrow {
+  border-top-color: $warning;
+}
+.tooltip-warning.tooltip.right .tooltip-arrow, .tooltip-warning + .tooltip.right .tooltip-arrow {
+  border-right-color: $warning;
+}
+.tooltip-warning.tooltip.bottom .tooltip-arrow, .tooltip-warning + .tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $warning;
+}
+.tooltip-warning.tooltip.left .tooltip-arrow, .tooltip-warning + .tooltip.left .tooltip-arrow {
+  border-left-color: $warning;
+}
+.tooltip-info.tooltip .tooltip-inner, .tooltip-info + .tooltip .tooltip-inner {
+  color: #ffffff;
+  background-color: $info;
+}
+.tooltip-info.tooltip.top .tooltip-arrow, .tooltip-info + .tooltip.top .tooltip-arrow {
+  border-top-color: $info;
+}
+.tooltip-info.tooltip.right .tooltip-arrow, .tooltip-info + .tooltip.right .tooltip-arrow {
+  border-right-color: $info;
+}
+.tooltip-info.tooltip.bottom .tooltip-arrow, .tooltip-info + tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $info;
+}
+.tooltip-info.tooltip.left .tooltip-arrow, .tooltip-info + .tooltip.left .tooltip-arrow {
+  border-left-color: $info;
+}
+
+.tooltip-danger.tooltip .tooltip-inner, .tooltip-danger + .tooltip .tooltip-inner {
+  color: #ffffff;
+  background-color: $danger;
+}
+.tooltip-danger.tooltip.top .tooltip-arrow, .tooltip-danger + .tooltip.top .tooltip-arrow {
+  border-top-color: $danger;
+}
+.tooltip-danger.tooltip.right .tooltip-arrow, .tooltip-danger + .tooltip.right .tooltip-arrow {
+  border-right-color: $danger;
+}
+.tooltip-danger.tooltip.bottom .tooltip-arrow, .tooltip-danger + .tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $danger;
+}
+.tooltip-danger.tooltip.left .tooltip-arrow, .tooltip-danger + .tooltip.left .tooltip-arrow {
+  border-left-color: $danger;
+}
+.flotTip {
+    padding: 8px 12px;
+    background-color: $dark;
+    z-index: 100;
+    color: #ffffff;
+    opacity: 0.9;
+    font-size: 13px;
+
+}
+/*Popover*/
+.popover {
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+.popover .popover-title{
+  border-radius:0px;
+}
+.popover-primary + .popover .popover-title {
+  color: $white;
+  background-color: $primary;
+  border-color: $primary;
+}
+.popover-primary + .popover.bottom .arrow {
+  border-bottom-color: $primary;
+}
+.popover-primary + .popover.bottom .arrow:after {
+  border-bottom-color: $primary;
+}
+.popover-success + .popover .popover-title {
+  color: $white;
+  background-color: $success;
+  border-color: $success;
+}
+.popover-success + .popover.bottom .arrow {
+  border-bottom-color: $success;
+}
+.popover-success + .popover.bottom .arrow:after {
+  border-bottom-color: $success;
+}
+.popover-info + .popover .popover-title {
+  color: $white;
+  background-color: $info;
+  border-color: $info;
+}
+.popover-info + .popover.bottom .arrow {
+  border-bottom-color: $info;
+}
+.popover-info + .popover.bottom .arrow:after {
+  border-bottom-color: $info;
+}
+.popover-warning + .popover .popover-title {
+  color:$white;
+  background-color: $warning;
+  border-color: $warning;
+}
+.popover-warning + .popover.bottom .arrow {
+  border-bottom-color: $warning;
+}
+.popover-warning + .popover.bottom .arrow:after {
+  border-bottom-color: $warning;
+}
+.popover-danger + .popover .popover-title {
+  color:$white;
+  background-color: $danger;
+  border-color: $danger;
+}
+.popover-danger + .popover.bottom .arrow {
+  border-bottom-color: $danger;
+}
+.popover-danger + .popover.bottom .arrow:after {
+  border-bottom-color: $danger;
+}
+
+/*File Upload*/
+.btn-file {
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+}
+.btn-file > input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  font-size: 23px;
+  height: 100%;
+  width: 100%;
+  direction: ltr;
+  cursor: pointer;
+  border-radius:0px;
+}
+.fileinput {
+  margin-bottom: 9px;
+  display: inline-block;
+}
+.fileinput .form-control {
+  padding-top: 7px;
+  padding-bottom: 5px;
+  display: inline-block;
+  margin-bottom: 0px;
+  vertical-align: middle;
+  cursor: text;
+}
+.fileinput .thumbnail {
+  overflow: hidden;
+  display: inline-block;
+  margin-bottom: 5px;
+  vertical-align: middle;
+  text-align: center;
+}
+.fileinput .thumbnail > img {
+  max-height: 100%;
+}
+.fileinput .btn {
+  vertical-align: middle;
+}
+.fileinput-exists .fileinput-new,
+.fileinput-new .fileinput-exists {
+  display: none;
+}
+.fileinput-inline .fileinput-controls {
+  display: inline;
+}
+.fileinput-filename {
+  vertical-align: middle;
+  display: inline-block;
+  overflow: hidden;
+}
+.form-control .fileinput-filename {
+  vertical-align: bottom;
+}
+.fileinput.input-group {
+  display: table;
+}
+.fileinput.input-group > * {
+  position: relative;
+  z-index: 2;
+}
+.fileinput.input-group > .btn-file {
+  z-index: 1;
+}
+/*Bootstrap select*/
+.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
+  width:100%;
+}
+.ms-container .ms-list{
+      border-radius:$radius;
+      box-shadow:none;
+}
+.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{
+    padding:6px 10px;
+}
+.ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover{
+  background:$info;
+}
+/*Dropzone*/
+.dropzone .dz-message {
+    text-align: center;
+    margin: 10% 0;
+}
+/*xeditable*/
+.editable-input .form-control{
+    height:30px;
+}
+
+/*ascolorpicker*/
+.asColorPicker-trigger{
+  position:absolute;
+  top: 0;
+  right: -35px;
+  height: 38px;
+  width: 37px;
+  border:0px;
+}
+.asColorPicker-dropdown{
+  max-width:260px;
+}
+.asColorPicker-clear{
+  top:7px;
+  right:16px;
+}
+/*Datepicker*/
+
+.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover{
+  background-image:none;
+  background:$themecolor;
+  color:$white;
+}
+.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{
+  background-image:none;
+  background:$info;
+  color:$white;
+}
+/*Datatable*/
+.editable-table + input.error{
+    border:1px solid #danger;
+    outline:0;
+    outline-offset:0
+    }
+.editable-table+input,.editable-table+input:focus, #editable-datatable_wrapper + input:focus{
+    border:1px solid $info!important;
+    outline:0!important;
+    outline-offset:0!important}
+.editable-table td:focus{outline:0}
+
+/*USer-profile*/
+.user-profile{
+  padding:15px 0;
+  position:relative;
+  text-align:center;
+
+  .user-pro-body{
+      display:block;
+   img{
+      width:50px;
+      display:block;
+      margin:0 auto;
+      margin-bottom:10px;
+   }
+   .u-dropdown{
+      color:$sidebar-text;
+   }
+   .dropdown-menu{
+      right:0px;
+      width:180px;
+      left:0px;
+      margin:0 auto;
+   }
+  }
+}
+
+/*Form-Wizard*/
+.wizard-steps{
+      display:table;
+      width:100%
+}
+.wizard-steps > li{
+  display:table-cell;
+  padding:10px 20px;
+  background:$extralight;
+  span{
+      border-radius:100%;
+      border:1px solid $border;
+      width:40px;
+      height:40px;
+      display:inline-block;
+      vertical-align:middle;
+      padding-top:9px;
+      margin-right:8px;
+      text-align:center;
+  }
+}
+.wizard-content{
+      padding:25px;
+      border-color:$border;
+      margin-bottom:30px;
+}
+.wizard-steps > li.current, .wizard-steps > li.done{
+  background:$info;
+  color:$white;
+  span{
+      border-color:$white;
+      color:$white;
+  }
+  h4{
+    color:$white;
+  }
+}
+.wizard-steps > li.done{
+      background:$success;
+}
+.wizard-steps > li.error{
+      background:$danger;
+}
+.wiz-aco{
+.pager{
+  margin:0px;
+}
+}

resource/styles/agile-admin/plugins/images/tooltip/shape1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
+<path fill="#00AEEF" d="M174.209,28.162C154.645,8.88,124.289,2.08,100.06,2.08c-0.074,0-0.06-0.079-0.06-0.079
+	s0.015,0.079-0.06,0.079c-24.229,0-54.584,6.8-74.149,26.082C5.417,48.242,3,75,3,100s2.418,51.758,22.792,71.838
+	c19.564,19.281,49.92,26.082,74.149,26.082c0.074,0,0.06,0.079,0.06,0.079s-0.015-0.079,0.06-0.079
+	c24.229,0,54.585-6.801,74.149-26.082C194.582,151.758,197,125,197,100S194.582,48.242,174.209,28.162z"/>
+</svg>

resource/styles/agile-admin/plugins/images/tooltip/shape2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="150px" viewBox="0 0 200 150">
+<g>
+	<path id="path1" fill="#010101" d="M159.599,137.909c0.975,3.397,4.717,5.548,8.161,4.988c3.489-0.443,6.558-3.466,6.685-7.043
+		c0.217-3.19-1.805-6.34-5.113-7.118c-3.417-1.079-7.469,0.508-9.138,3.701c-0.91,1.636-1.166,3.624-0.612,5.414"/>
+	<path id="path2" fill="#010101" d="M130.646,125.253c1.368,4.656,6.393,7.288,10.806,6.718c4.763-0.451,9.26-4.276,9.71-9.394
+		c0.369-3.779-1.902-7.583-5.244-9.144c-5.404-2.732-12.557-0.222-14.908,5.448c-0.841,1.945-1.018,4.214-0.388,6.294"/>
+	<path id="path3" fill="#010101" d="M184.112,144.325c0.704,2.461,3.412,4.016,5.905,3.611c2.526-0.318,4.746-2.509,4.841-5.093
+		c0.153-2.315-1.483-4.54-3.703-5.155c-2.474-0.781-5.405,0.37-6.612,2.681c-0.657,1.181-0.845,2.619-0.442,3.917"/>
+	<path id="path4" fill="#010101" d="M53.149,10.686c12.101-3.695,24.478-1.625,33.84,4.571c3.187-5.687,8.381-10.144,14.943-12.148
+		c10.427-3.185,21.37,0.699,28.159,8.982c15.606-3.76,31.369,4.398,35.804,18.915c3.269,10.699-0.488,21.956-8.71,29.388
+		c0.395,0.934,0.762,1.882,1.064,2.873c4.73,15.485-3.992,31.889-19.473,36.617c-5.073,1.551-10.251,1.625-15.076,0.518
+		c-3.58,10.605-12.407,19.55-24.386,23.211c-15.015,4.586-30.547-0.521-39.226-11.624c-2.861,1.991-6.077,3.564-9.583,4.636
+		c-18.43,5.631-38.04-5.068-43.785-23.874l-0.083-0.272C1.564,75.375,9.696,57.543,25.083,50.302
+		C23.349,33.157,34.85,16.276,53.149,10.686L53.149,10.686z"/>
+</g>
+</svg>

resource/styles/agile-admin/plugins/images/tooltip/shape3.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="150px" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve">
+<polygon fill="#FFFFFF" stroke="#000000" points="29.857,3.324 171.111,3.324 196.75,37.671 184.334,107.653 104.355,136.679 100,146.676 96.292,136.355 16.312,107.653 3.25,37.671 "/>
+</svg>

resource/styles/agile-admin/plugins/images/tooltip/tooltip1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="20px" viewBox="0 0 30 20">
+	<g>
+		<path fill="#fb9678" d="M7.065,7.067C13.462,10.339,15,19.137,15,19.137V0H0C0,0,1.865,4.407,7.065,7.067z"/>
+		<path fill="#fb9678" d="M15,0v19.137c0,0,1.537-8.797,7.936-12.07C28.135,4.407,30,0,30,0H15z"/>
+	</g>
+</svg>

resource/styles/agile-admin/plugins/images/tooltip/tooltip2.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80px" height="80px" viewBox="0 0 80 80">
+<path fill="#e35583" d="M80,0c0,0-5.631,14.445-25.715,27.213C29.946,42.688,12.79,33.997,3.752,30.417
+	c-3.956-1.567-4.265,1.021-2.966,3.814C16.45,67.934,80,79.614,80,79.614l0,0V0z"/>
+</svg>

resource/styles/agile-admin/plugins/images/tooltip/tooltip3.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="120px" preserveAspectRatio="none" viewBox="0 0 60 120">
+<path fill="#ffffff" d="M55.451-0.043C55.451-0.043,66.059-41.066,55.451-0.043C51.069,16.9,0.332,119.498,0.332,119.498
+	S43.365,18.315,39.532-0.043c-4.099-19.616,0,0,0,0"/>
+</svg>

resource/styles/index.js

@@ -1 +1,2 @@
+import './agile-admin/inverse/style.scss';
 import '../css/crowi.scss';