Fix data

api/v1/Customers/Edit.php

@@ -54,8 +54,8 @@
   </div> -->
   <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10"> 
-    <input type="submit" name="edit" value="Submit">
-    <input type="button" value="Cancel" onclick="document.getElementById('editVForm').style.display = 'none';">
+      <input type="submit" name="edit" value="Submit">
+      <input type="button" value="Cancel" onclick="document.getElementById('editForm').style.display = 'none';">
     </div>
   </div>
     </form>

api/v1/Customers/addCustomer.php

@@ -14,28 +14,71 @@
    .addForm {
     display: none;
    }
+/*   form.form-horizontal.modal-content.animate {
+    width: 400px;
+    height: 280px;
+    margin-left: -15px;
+     background-color: #dfe3e6;
+}
+div#addForm {
+    width: 400px;
+    height: 280px;
+    border-radius: 0.5em;
+    margin-top: 100px;
+    
+}
+input.btn.btn-default {
+    background: radial-gradient(#0da3bb, #04161fc2);
+     color: #fff;
+    font-family: -webkit-pictograph;
+    font-size: 20px;
+    margin-top: -110px;
+    margin-left: 110px;
+    width: 120px;
+}*/
  </style>
 <div class="container addForm" id="addForm">
     <form class="form-horizontal" action="" method="post">
-
-    <div class="form-group">
-     <label class="control-label col-sm-2"> Name </label>
-    <div class="col-sm-10"> 
-      <input type="text" name="addusername">
+      <!-- <span onclick="document.getElementById('addForm').style.display='none'" class="close" title="Close PopUp" style="color:red;margin-right: 5px;">&times;</span> -->
+      <div class="form-group row" style="width: height:20px;margin-left: 150px;margin-top: 20px;margin-bottom: 30px;">
+          <label style="color: #610e14;font-family:-webkit-pictograph;font-size: 20px;">New Customer</label>
+      </div>
+      <div class="form-group row" style="margin-left: 50px;" >
+        <label class="control-label col-md-2" style="color: #610e14;font-family:-webkit-pictograph;" > Name:&nbsp;&nbsp;&nbsp;&nbsp; </label>
+        <div class="col-md-3"> 
+          <input type="text" name="addusername" style="border:1px solid grey;border-radius: 0.5em;height: 30px;">
+        </div>
+      </div>
+      <div class="form-group row" style="margin-top: 30px;">
+        <div class="col-md-1"></div>
+        <label class="control-label col-md-3" style="color: #610e14;margin-left: 20px;font-family:-webkit-pictograph;"> Credit Sale:</label>
+        <div class="col-md-3"> 
+          <input type="checkbox" name="addcreditSale" style="width: 20px;height: 20px;color: red;">
+        </div>
+      </div>
+      <div class="form-group">        
+        <div class="col-sm-offset-2 col-sm-10">
+          <input type="submit" class="btn btn-default" value="Save" name="addCustomer">
+        </div>
+      </div>
+    </form>
+</div>
+<!-- <div id="modal-wrapper addForm" class="modal addForm">
+  
+  <form class="modal-content animate" action="/action_page.php">
+        
+    <div class="imgcontainer">
+      <span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">&times;</span>
+      <img src="dist/img/profile.jpg" alt="Avatar" class="avatar">
+      <h3 style="text-align:center">New Customer</h3>
     </div>
-   </div>
-
-    <div class="form-group">
-     <label class="control-label col-sm-2"> Credit Sale</label>
-      <div class="col-sm-10"> 
-      <input type="checkbox" name="addcreditSale">
-   </div>
-  </div>
 
-  <div class="form-group">        
-      <div class="col-sm-offset-2 col-sm-10">
-        <input type="submit" class="btn btn-default" value="Submit" name="addCustomer">
-        </div>
+    <div class="container">
+      <label>Customer Name:</label><input type="text" placeholder="Enter name" name="uname"><br>
+      <input type="checkbox" style="margin:26px 30px;"> Credit Sale<br>
+     <button type="submit" style="margin-left: 150px;">Save</button>
     </div>
-    </form>
-</div>
+    
+  </form>
+  
+</div> -->

api/v1/Customers/addVehicle.php

@@ -14,21 +14,57 @@
  	.addVehicleForm {
  		display: none;
  	}
+/*     form.form-horizontal.modal-content.animate {
+    width: 400px;
+    height: 280px;
+    margin-left: -15px;
+     background-color: #dfe3e6;
+}
+div#addVForm {
+    width: 400px;
+    height: 280px;
+    border-radius: 0.5em;
+    margin-top: 100px;
+    
+}
+input[type="submit"].btn.btn-default {
+    background: radial-gradient(#0da3bb, #04161fc2);
+    color: #610e14;
+    font-family:-webkit-pictograph;
+    font-size: 18px;
+    margin-right: -84px;
+    width: 70px;
+}
+input[type="button"].btn.btn-default {
+    background: radial-gradient(#b71515eb, #ef0b0bdb);
+    color: #fff;
+    font-family:-webkit-pictograph;
+    font-size:18px;
+    width: 73px;
+}
+
+.col-sm-offset-2.col-sm-10 {
+    margin-top: 95px;
+    margin-left: 30px;
+}*/
 </style>
 <div class="container addVehicleForm" id="addVForm">
-<form class="form-horizontal" action="" method="post">
-    <div class="form-group">
-     <label class="control-label col-sm-2"> Number </label>
-    <div class="col-sm-10"> 
-		<input type="text" name="number">
-    </div>
-   </div>
-
-    <div class="form-group">
-    	<div class="col-sm-offset-2 col-sm-10"> 
-		<input type="submit" name="saveNumber" value="Save">
-		<input type="button" value="Cancel" onclick="document.getElementById('addVForm').style.display = 'none';">
-		</div>
-	</div>
+    <form class="form-horizontal" action="" method="post">
+        <!-- <span onclick="document.getElementById('addVForm').style.display='none'" class="close" title="Close PopUp" style="color:red;margin-right: 5px;">&times;</span> -->
+        <div class="form-group" style="width: height:20px;margin-left: 150px;margin-top:20px;margin-bottom:30px;">
+            <label style="color: #610e14;font-family:-webkit-pictograph;font-size: 20px;">New Vehicle</label>
+        </div>
+        <div class="form-group" style="margin-left: 50px;">
+            <label class="control-label col-sm-2" style="color: #610e14;font-family:-webkit-pictograph;"> Number </label>
+            <div class="col-sm-10"> 
+        		<input type="text" name="number">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10"> 
+        		<input type="submit" class="btn btn-default" name="saveNumber" value="Save">
+        		<input type="button" class="btn btn-default cancel" value="Cancel" onclick="document.getElementById('addVForm').style.display = 'none';">
+    		</div>
+    	</div>
 	</form>
 </div>

api/v1/Customers/vehicles.txt

@@ -1,3 +1,9 @@
 {
-    "data": []
+    "data": [
+        {
+            "Customer_Id": 14,
+            "Id": 37,
+            "Number": "5Y\/0992"
+        }
+    ]
 }

configurations.php

@@ -1,55 +1,126 @@
 <?php include "header.php" ?>
-<form id="form">
-   <p>Sign up once and watch our free things.</p>
-
-   <div class="form-group">
-      <label for="name">Your Name</label>
-      <br />
-      <div class="input-group">
-         <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i>            </div>
-         <input type="text" id="name" placeholder="Enter Your Name"/>
+<style type="text/css">
+   /*.input-group {
+    width: 455px;
+    height: 45px;
+    margin-left: 183px;
+}
+input {
+    height: 45px;
+}*/
+.input-group, input {
+    height: 42px;
+    width: 350px;
+    border-radius: 0px 5px 5px 0px;
+    border: 1px solid #696a6b;
+    -webkit-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+  -moz-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+}
+form#form{
+   width: 100%;
+   height: 100%;
+}
+.form-group.row {
+   margin-top: 40px;
+}
+input[type="submit"] {
+      width:240px;
+      height:35px;
+      display:block;
+      font-family:Arial, "Helvetica", sans-serif;
+      font-size:16px;
+      font-weight:bold;
+      color:#fff;
+      text-decoration:none;
+      text-transform:uppercase;
+      text-align:center;
+      text-shadow:1px 1px 0px #37a69b;
+      padding-top:6px;
+      margin: 19px 0 300px 29px;
+      position:relative;
+      cursor:pointer;
+      border: none;  
+      background-color: #37a69b;
+      background-image: linear-gradient(top,#3db0a6,#3111);
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border-bottom-left-radius:5px;
+      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #497a78, 0px 10px 5px #999;
+      margin-top: 55px;
+    }
+        input[type="submit"]:active {
+      top:3px;
+      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
+    }
+    input{
+      color:#009edf;
+    }
+     label span{
+      font-size: 17px;
+      color: black;
+    }
+</style>
+<center>
+<form id="form" > 
+   <div class="form-group row">
+      <div class="col-md-2"></div>
+      <label for="name" class="col-md-2" ><span>Station Name:</span></label>
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="far fa-smile" aria-hidden="true"></i>            </div>
+         <input type="text" id="name" placeholder="Enter Station Name"/>
          </div>
       </div>
    
-   <div class="form-group">
-      <label for="email">Your Email</label>
-      <br />
-      <div class="input-group">
-         <div class="input-group-addon"><i class="fa fa-envelope" aria-hidden="true">            </i></div>
-         <input type="email" id="email" placeholder="Enter Your Email"/>
+   <div class="form-group row">
+       <div class="col-md-2"></div>
+      <label for="email" class="col-md-2"><span>Address:</span></label>
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="fas fa-address-card" aria-hidden="true">            </i></div>
+         <input type="email" id="email" placeholder="Enter Your Address"/>
          </div>
       </div>
    </div>
    
-   <div class="form-group">
-      <label for="username">Your Username</label>
-      <br />
-      <div class="input-group">
-         <div class="input-group-addon"><i class="fa fa-users" aria-hidden="true"></i>            </div>
-         <input type="text" id="username" placeholder="Enter Your Username"/>
+   <div class="form-group row">
+       <div class="col-md-2"></div>
+      <label for="username" class="col-md-2"><span>Station Phones:</span></label> 
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="fas fa-phone" aria-hidden="true"></i>            </div>
+         <input type="text" id="username" placeholder="Enter Station Phone"/>
          </div>
       </div>
    </div>
    
-   <div class="form-group">
-      <label for="password">Your Password</label>
-      <br />
-      <div class="input-group">
-         <div class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i>            </div>
-         <input type="text" id="password" placeholder="Enter Your Password"/>
+   <div class="form-group row">
+       <div class="col-md-2"></div>
+      <label for="password" class="col-md-2"><span>Station Code:</span></label>
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="fas fa-barcode" aria-hidden="true"></i>            </div>
+         <input type="text" id="password" placeholder="Enter Station Code"/>
          </div>
       </div>
    </div>
    
-   <div class="form-group">
-      <label for="password-confirm">Confirm Your Password</label>
-      <br />
-      <div class="input-group">
-         <div class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i>            </div>
-         <input type="text" id="password-confirm" placeholder="Confirm Your Password"/>
+   <div class="form-group row">
+       <div class="col-md-2"></div>
+      <label for="password-confirm" class="col-md-2"><span>Money Divider:</span></label>
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="fas fa-dollar-sign" aria-hidden="true"></i>            </div>
+         <input type="text" id="password-confirm" placeholder="Money Divider"/>
          </div>
       </div>
    </div>
-   
-   <button type="submit" class="btn btn-default">Register</button>
-</form>
+   <div class="form-group row">
+       <div class="col-md-2"></div>
+      <label for="password-confirm" class="col-md-2"><span>Volume Divider:</span></label>
+      <div class="input-group col-md-4">
+         <div class="input-group-addon"><i class="fas fa-arrow-up" aria-hidden="true"></i>            </div>
+         <input type="text" id="password-confirm" placeholder="Volume Divider"/>
+         </div>
+      </div>
+   </div>
+   <center><input type="submit" class="btn btn-default" value="Save"></center> 
+</form>
+</center>

css/style.css

@@ -176,4 +176,7 @@ hr {
     text-align: center;
     min-height: inherit;
   }
+}
+.treeview a {
+  color: #1fb9bb;
 }

dist/css/AdminLTE.css

@@ -1143,8 +1143,8 @@ a:focus {
 }
 .navbar-nav > .user-menu .user-image {
   float: left;
-  width: 25px;
-  height: 25px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   margin-right: 10px;
   margin-top: -2px;

dist/css/skins/_all-skins.css

@@ -1,1782 +0,0 @@
-/*
- * Skin: Blue
- * ----------
- */
-.skin-blue .main-header .navbar {
-  background-color: #3c8dbc;
-}
-.skin-blue .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-blue .main-header .navbar .nav > li > a:hover,
-.skin-blue .main-header .navbar .nav > li > a:active,
-.skin-blue .main-header .navbar .nav > li > a:focus,
-.skin-blue .main-header .navbar .nav .open > a,
-.skin-blue .main-header .navbar .nav .open > a:hover,
-.skin-blue .main-header .navbar .nav .open > a:focus,
-.skin-blue .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-blue .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-blue .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-blue .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-blue .main-header .navbar .sidebar-toggle:hover {
-  background-color: #367fa9;
-}
-@media (max-width: 767px) {
-  .skin-blue .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-blue .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-blue .main-header .navbar .dropdown-menu li a:hover {
-    background: #367fa9;
-  }
-}
-.skin-blue .main-header .logo {
-  background-color: #367fa9;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue .main-header .logo:hover {
-  background-color: #357ca5;
-}
-.skin-blue .main-header li.user-header {
-  background-color: #3c8dbc;
-}
-.skin-blue .content-header {
-  background: transparent;
-}
-.skin-blue .wrapper,
-.skin-blue .main-sidebar,
-.skin-blue .left-side {
-  background-color: #222d32;
-}
-.skin-blue .user-panel > .info,
-.skin-blue .user-panel > .info > a {
-  color: #fff;
-}
-.skin-blue .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-blue .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-blue .sidebar-menu > li:hover > a,
-.skin-blue .sidebar-menu > li.active > a,
-.skin-blue .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-blue .sidebar-menu > li.active > a {
-  border-left-color: #3c8dbc;
-}
-.skin-blue .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-blue .sidebar a {
-  color: #b8c7ce;
-}
-.skin-blue .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-blue .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-blue .sidebar-menu .treeview-menu > li.active > a,
-.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-blue .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-blue .sidebar-form input[type="text"],
-.skin-blue .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-blue .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-blue .sidebar-form input[type="text"]:focus,
-.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-blue .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-.skin-blue.layout-top-nav .main-header > .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue.layout-top-nav .main-header > .logo:hover {
-  background-color: #3b8ab8;
-}
-/*
- * Skin: Blue
- * ----------
- */
-.skin-blue-light .main-header .navbar {
-  background-color: #3c8dbc;
-}
-.skin-blue-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-blue-light .main-header .navbar .nav > li > a:hover,
-.skin-blue-light .main-header .navbar .nav > li > a:active,
-.skin-blue-light .main-header .navbar .nav > li > a:focus,
-.skin-blue-light .main-header .navbar .nav .open > a,
-.skin-blue-light .main-header .navbar .nav .open > a:hover,
-.skin-blue-light .main-header .navbar .nav .open > a:focus,
-.skin-blue-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #367fa9;
-}
-@media (max-width: 767px) {
-  .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-blue-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #367fa9;
-  }
-}
-.skin-blue-light .main-header .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue-light .main-header .logo:hover {
-  background-color: #3b8ab8;
-}
-.skin-blue-light .main-header li.user-header {
-  background-color: #3c8dbc;
-}
-.skin-blue-light .content-header {
-  background: transparent;
-}
-.skin-blue-light .wrapper,
-.skin-blue-light .main-sidebar,
-.skin-blue-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-blue-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-blue-light .user-panel > .info,
-.skin-blue-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-blue-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-blue-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-blue-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-menu > li:hover > a,
-.skin-blue-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-blue-light .sidebar-menu > li.active {
-  border-left-color: #3c8dbc;
-}
-.skin-blue-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-blue-light .sidebar a {
-  color: #444444;
-}
-.skin-blue-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-blue-light .sidebar-form input[type="text"],
-.skin-blue-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-blue-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-blue-light .sidebar-form input[type="text"]:focus,
-.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-blue-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-.skin-blue-light .main-footer {
-  border-top-color: #d2d6de;
-}
-.skin-blue.layout-top-nav .main-header > .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue.layout-top-nav .main-header > .logo:hover {
-  background-color: #3b8ab8;
-}
-/*
- * Skin: Black
- * -----------
- */
-/* skin-black navbar */
-.skin-black .main-header {
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.skin-black .main-header .navbar-toggle {
-  color: #333;
-}
-.skin-black .main-header .navbar-brand {
-  color: #333;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar {
-  background-color: #ffffff;
-}
-.skin-black .main-header .navbar .nav > li > a {
-  color: #333333;
-}
-.skin-black .main-header .navbar .nav > li > a:hover,
-.skin-black .main-header .navbar .nav > li > a:active,
-.skin-black .main-header .navbar .nav > li > a:focus,
-.skin-black .main-header .navbar .nav .open > a,
-.skin-black .main-header .navbar .nav .open > a:hover,
-.skin-black .main-header .navbar .nav .open > a:focus,
-.skin-black .main-header .navbar .nav > .active > a {
-  background: #ffffff;
-  color: #999999;
-}
-.skin-black .main-header .navbar .sidebar-toggle {
-  color: #333333;
-}
-.skin-black .main-header .navbar .sidebar-toggle:hover {
-  color: #999999;
-  background: #ffffff;
-}
-.skin-black .main-header .navbar > .sidebar-toggle {
-  color: #333;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar .navbar-nav > li > a {
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
-.skin-black .main-header .navbar .navbar-right > li > a {
-  border-left: 1px solid #eee;
-  border-right-width: 0;
-}
-.skin-black .main-header .logo {
-  background-color: #ffffff;
-  color: #333333;
-  border-bottom: 0 solid transparent;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .logo:hover {
-  background-color: #fcfcfc;
-}
-@media (max-width: 767px) {
-  .skin-black .main-header .logo {
-    background-color: #222222;
-    color: #ffffff;
-    border-bottom: 0 solid transparent;
-    border-right: none;
-  }
-  .skin-black .main-header .logo:hover {
-    background-color: #1f1f1f;
-  }
-}
-.skin-black .main-header li.user-header {
-  background-color: #222;
-}
-.skin-black .content-header {
-  background: transparent;
-  box-shadow: none;
-}
-.skin-black .wrapper,
-.skin-black .main-sidebar,
-.skin-black .left-side {
-  background-color: #222d32;
-}
-.skin-black .user-panel > .info,
-.skin-black .user-panel > .info > a {
-  color: #fff;
-}
-.skin-black .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-black .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-black .sidebar-menu > li:hover > a,
-.skin-black .sidebar-menu > li.active > a,
-.skin-black .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-black .sidebar-menu > li.active > a {
-  border-left-color: #ffffff;
-}
-.skin-black .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-black .sidebar a {
-  color: #b8c7ce;
-}
-.skin-black .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-black .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-black .sidebar-menu .treeview-menu > li.active > a,
-.skin-black .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-black .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-black .sidebar-form input[type="text"],
-.skin-black .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-black .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-black .sidebar-form input[type="text"]:focus,
-.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-black .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-.skin-black .pace .pace-progress {
-  background: #222;
-}
-.skin-black .pace .pace-activity {
-  border-top-color: #222;
-  border-left-color: #222;
-}
-/*
- * Skin: Black
- * -----------
- */
-/* skin-black navbar */
-.skin-black-light .main-header {
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.skin-black-light .main-header .navbar-toggle {
-  color: #333;
-}
-.skin-black-light .main-header .navbar-brand {
-  color: #333;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar {
-  background-color: #ffffff;
-}
-.skin-black-light .main-header .navbar .nav > li > a {
-  color: #333333;
-}
-.skin-black-light .main-header .navbar .nav > li > a:hover,
-.skin-black-light .main-header .navbar .nav > li > a:active,
-.skin-black-light .main-header .navbar .nav > li > a:focus,
-.skin-black-light .main-header .navbar .nav .open > a,
-.skin-black-light .main-header .navbar .nav .open > a:hover,
-.skin-black-light .main-header .navbar .nav .open > a:focus,
-.skin-black-light .main-header .navbar .nav > .active > a {
-  background: #ffffff;
-  color: #999999;
-}
-.skin-black-light .main-header .navbar .sidebar-toggle {
-  color: #333333;
-}
-.skin-black-light .main-header .navbar .sidebar-toggle:hover {
-  color: #999999;
-  background: #ffffff;
-}
-.skin-black-light .main-header .navbar > .sidebar-toggle {
-  color: #333;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar .navbar-nav > li > a {
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
-.skin-black-light .main-header .navbar .navbar-right > li > a {
-  border-left: 1px solid #d2d6de;
-  border-right-width: 0;
-}
-.skin-black-light .main-header .logo {
-  background-color: #ffffff;
-  color: #333333;
-  border-bottom: 0 solid transparent;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .logo:hover {
-  background-color: #fcfcfc;
-}
-@media (max-width: 767px) {
-  .skin-black-light .main-header .logo {
-    background-color: #222222;
-    color: #ffffff;
-    border-bottom: 0 solid transparent;
-    border-right: none;
-  }
-  .skin-black-light .main-header .logo:hover {
-    background-color: #1f1f1f;
-  }
-}
-.skin-black-light .main-header li.user-header {
-  background-color: #222;
-}
-.skin-black-light .content-header {
-  background: transparent;
-  box-shadow: none;
-}
-.skin-black-light .wrapper,
-.skin-black-light .main-sidebar,
-.skin-black-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-black-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .user-panel > .info,
-.skin-black-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-black-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-black-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-black-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-black-light .sidebar-menu > li:hover > a,
-.skin-black-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-black-light .sidebar-menu > li.active {
-  border-left-color: #ffffff;
-}
-.skin-black-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-black-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-black-light .sidebar a {
-  color: #444444;
-}
-.skin-black-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-black-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-black-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-black-light .sidebar-form input[type="text"],
-.skin-black-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-black-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-black-light .sidebar-form input[type="text"]:focus,
-.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-black-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-/*
- * Skin: Green
- * -----------
- */
-.skin-green .main-header .navbar {
-  background-color: #00a65a;
-}
-.skin-green .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-green .main-header .navbar .nav > li > a:hover,
-.skin-green .main-header .navbar .nav > li > a:active,
-.skin-green .main-header .navbar .nav > li > a:focus,
-.skin-green .main-header .navbar .nav .open > a,
-.skin-green .main-header .navbar .nav .open > a:hover,
-.skin-green .main-header .navbar .nav .open > a:focus,
-.skin-green .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-green .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-green .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-green .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-green .main-header .navbar .sidebar-toggle:hover {
-  background-color: #008d4c;
-}
-@media (max-width: 767px) {
-  .skin-green .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-green .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-green .main-header .navbar .dropdown-menu li a:hover {
-    background: #008d4c;
-  }
-}
-.skin-green .main-header .logo {
-  background-color: #008d4c;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-green .main-header .logo:hover {
-  background-color: #008749;
-}
-.skin-green .main-header li.user-header {
-  background-color: #00a65a;
-}
-.skin-green .content-header {
-  background: transparent;
-}
-.skin-green .wrapper,
-.skin-green .main-sidebar,
-.skin-green .left-side {
-  background-color: #222d32;
-}
-.skin-green .user-panel > .info,
-.skin-green .user-panel > .info > a {
-  color: #fff;
-}
-.skin-green .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-green .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-green .sidebar-menu > li:hover > a,
-.skin-green .sidebar-menu > li.active > a,
-.skin-green .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-green .sidebar-menu > li.active > a {
-  border-left-color: #00a65a;
-}
-.skin-green .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-green .sidebar a {
-  color: #b8c7ce;
-}
-.skin-green .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-green .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-green .sidebar-menu .treeview-menu > li.active > a,
-.skin-green .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-green .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-green .sidebar-form input[type="text"],
-.skin-green .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-green .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-green .sidebar-form input[type="text"]:focus,
-.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-green .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-/*
- * Skin: Green
- * -----------
- */
-.skin-green-light .main-header .navbar {
-  background-color: #00a65a;
-}
-.skin-green-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-green-light .main-header .navbar .nav > li > a:hover,
-.skin-green-light .main-header .navbar .nav > li > a:active,
-.skin-green-light .main-header .navbar .nav > li > a:focus,
-.skin-green-light .main-header .navbar .nav .open > a,
-.skin-green-light .main-header .navbar .nav .open > a:hover,
-.skin-green-light .main-header .navbar .nav .open > a:focus,
-.skin-green-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-green-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #008d4c;
-}
-@media (max-width: 767px) {
-  .skin-green-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-green-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-green-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #008d4c;
-  }
-}
-.skin-green-light .main-header .logo {
-  background-color: #00a65a;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-green-light .main-header .logo:hover {
-  background-color: #00a157;
-}
-.skin-green-light .main-header li.user-header {
-  background-color: #00a65a;
-}
-.skin-green-light .content-header {
-  background: transparent;
-}
-.skin-green-light .wrapper,
-.skin-green-light .main-sidebar,
-.skin-green-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-green-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-green-light .user-panel > .info,
-.skin-green-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-green-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-green-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-green-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-green-light .sidebar-menu > li:hover > a,
-.skin-green-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-green-light .sidebar-menu > li.active {
-  border-left-color: #00a65a;
-}
-.skin-green-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-green-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-green-light .sidebar a {
-  color: #444444;
-}
-.skin-green-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-green-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-green-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-green-light .sidebar-form input[type="text"],
-.skin-green-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-green-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-green-light .sidebar-form input[type="text"]:focus,
-.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-green-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-/*
- * Skin: Red
- * ---------
- */
-.skin-red .main-header .navbar {
-  background-color: #dd4b39;
-}
-.skin-red .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-red .main-header .navbar .nav > li > a:hover,
-.skin-red .main-header .navbar .nav > li > a:active,
-.skin-red .main-header .navbar .nav > li > a:focus,
-.skin-red .main-header .navbar .nav .open > a,
-.skin-red .main-header .navbar .nav .open > a:hover,
-.skin-red .main-header .navbar .nav .open > a:focus,
-.skin-red .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-red .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-red .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-red .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-red .main-header .navbar .sidebar-toggle:hover {
-  background-color: #d73925;
-}
-@media (max-width: 767px) {
-  .skin-red .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-red .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-red .main-header .navbar .dropdown-menu li a:hover {
-    background: #d73925;
-  }
-}
-.skin-red .main-header .logo {
-  background-color: #d73925;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-red .main-header .logo:hover {
-  background-color: #d33724;
-}
-.skin-red .main-header li.user-header {
-  background-color: #dd4b39;
-}
-.skin-red .content-header {
-  background: transparent;
-}
-.skin-red .wrapper,
-.skin-red .main-sidebar,
-.skin-red .left-side {
-  background-color: #222d32;
-}
-.skin-red .user-panel > .info,
-.skin-red .user-panel > .info > a {
-  color: #fff;
-}
-.skin-red .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-red .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-red .sidebar-menu > li:hover > a,
-.skin-red .sidebar-menu > li.active > a,
-.skin-red .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-red .sidebar-menu > li.active > a {
-  border-left-color: #dd4b39;
-}
-.skin-red .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-red .sidebar a {
-  color: #b8c7ce;
-}
-.skin-red .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-red .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-red .sidebar-menu .treeview-menu > li.active > a,
-.skin-red .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-red .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-red .sidebar-form input[type="text"],
-.skin-red .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-red .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-red .sidebar-form input[type="text"]:focus,
-.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-red .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-/*
- * Skin: Red
- * ---------
- */
-.skin-red-light .main-header .navbar {
-  background-color: #dd4b39;
-}
-.skin-red-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-red-light .main-header .navbar .nav > li > a:hover,
-.skin-red-light .main-header .navbar .nav > li > a:active,
-.skin-red-light .main-header .navbar .nav > li > a:focus,
-.skin-red-light .main-header .navbar .nav .open > a,
-.skin-red-light .main-header .navbar .nav .open > a:hover,
-.skin-red-light .main-header .navbar .nav .open > a:focus,
-.skin-red-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-red-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #d73925;
-}
-@media (max-width: 767px) {
-  .skin-red-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-red-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-red-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #d73925;
-  }
-}
-.skin-red-light .main-header .logo {
-  background-color: #dd4b39;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-red-light .main-header .logo:hover {
-  background-color: #dc4735;
-}
-.skin-red-light .main-header li.user-header {
-  background-color: #dd4b39;
-}
-.skin-red-light .content-header {
-  background: transparent;
-}
-.skin-red-light .wrapper,
-.skin-red-light .main-sidebar,
-.skin-red-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-red-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-red-light .user-panel > .info,
-.skin-red-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-red-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-red-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-red-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-red-light .sidebar-menu > li:hover > a,
-.skin-red-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-red-light .sidebar-menu > li.active {
-  border-left-color: #dd4b39;
-}
-.skin-red-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-red-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-red-light .sidebar a {
-  color: #444444;
-}
-.skin-red-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-red-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-red-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-red-light .sidebar-form input[type="text"],
-.skin-red-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-red-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-red-light .sidebar-form input[type="text"]:focus,
-.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-red-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-/*
- * Skin: Yellow
- * ------------
- */
-.skin-yellow .main-header .navbar {
-  background-color: #f39c12;
-}
-.skin-yellow .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-yellow .main-header .navbar .nav > li > a:hover,
-.skin-yellow .main-header .navbar .nav > li > a:active,
-.skin-yellow .main-header .navbar .nav > li > a:focus,
-.skin-yellow .main-header .navbar .nav .open > a,
-.skin-yellow .main-header .navbar .nav .open > a:hover,
-.skin-yellow .main-header .navbar .nav .open > a:focus,
-.skin-yellow .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-yellow .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle:hover {
-  background-color: #e08e0b;
-}
-@media (max-width: 767px) {
-  .skin-yellow .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-yellow .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-yellow .main-header .navbar .dropdown-menu li a:hover {
-    background: #e08e0b;
-  }
-}
-.skin-yellow .main-header .logo {
-  background-color: #e08e0b;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-yellow .main-header .logo:hover {
-  background-color: #db8b0b;
-}
-.skin-yellow .main-header li.user-header {
-  background-color: #f39c12;
-}
-.skin-yellow .content-header {
-  background: transparent;
-}
-.skin-yellow .wrapper,
-.skin-yellow .main-sidebar,
-.skin-yellow .left-side {
-  background-color: #222d32;
-}
-.skin-yellow .user-panel > .info,
-.skin-yellow .user-panel > .info > a {
-  color: #fff;
-}
-.skin-yellow .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-yellow .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-yellow .sidebar-menu > li:hover > a,
-.skin-yellow .sidebar-menu > li.active > a,
-.skin-yellow .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-yellow .sidebar-menu > li.active > a {
-  border-left-color: #f39c12;
-}
-.skin-yellow .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-yellow .sidebar a {
-  color: #b8c7ce;
-}
-.skin-yellow .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-yellow .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-yellow .sidebar-menu .treeview-menu > li.active > a,
-.skin-yellow .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-yellow .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-yellow .sidebar-form input[type="text"],
-.skin-yellow .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-yellow .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-yellow .sidebar-form input[type="text"]:focus,
-.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-yellow .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-/*
- * Skin: Yellow
- * ------------
- */
-.skin-yellow-light .main-header .navbar {
-  background-color: #f39c12;
-}
-.skin-yellow-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-yellow-light .main-header .navbar .nav > li > a:hover,
-.skin-yellow-light .main-header .navbar .nav > li > a:active,
-.skin-yellow-light .main-header .navbar .nav > li > a:focus,
-.skin-yellow-light .main-header .navbar .nav .open > a,
-.skin-yellow-light .main-header .navbar .nav .open > a:hover,
-.skin-yellow-light .main-header .navbar .nav .open > a:focus,
-.skin-yellow-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #e08e0b;
-}
-@media (max-width: 767px) {
-  .skin-yellow-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-yellow-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #e08e0b;
-  }
-}
-.skin-yellow-light .main-header .logo {
-  background-color: #f39c12;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-yellow-light .main-header .logo:hover {
-  background-color: #f39a0d;
-}
-.skin-yellow-light .main-header li.user-header {
-  background-color: #f39c12;
-}
-.skin-yellow-light .content-header {
-  background: transparent;
-}
-.skin-yellow-light .wrapper,
-.skin-yellow-light .main-sidebar,
-.skin-yellow-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-yellow-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-yellow-light .user-panel > .info,
-.skin-yellow-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-yellow-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-yellow-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-yellow-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-menu > li:hover > a,
-.skin-yellow-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-yellow-light .sidebar-menu > li.active {
-  border-left-color: #f39c12;
-}
-.skin-yellow-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-yellow-light .sidebar a {
-  color: #444444;
-}
-.skin-yellow-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-yellow-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-yellow-light .sidebar-form input[type="text"],
-.skin-yellow-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-yellow-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-yellow-light .sidebar-form input[type="text"]:focus,
-.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-yellow-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-/*
- * Skin: Purple
- * ------------
- */
-.skin-purple .main-header .navbar {
-  background-color: #605ca8;
-}
-.skin-purple .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-purple .main-header .navbar .nav > li > a:hover,
-.skin-purple .main-header .navbar .nav > li > a:active,
-.skin-purple .main-header .navbar .nav > li > a:focus,
-.skin-purple .main-header .navbar .nav .open > a,
-.skin-purple .main-header .navbar .nav .open > a:hover,
-.skin-purple .main-header .navbar .nav .open > a:focus,
-.skin-purple .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-purple .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-purple .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-purple .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-purple .main-header .navbar .sidebar-toggle:hover {
-  background-color: #555299;
-}
-@media (max-width: 767px) {
-  .skin-purple .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-purple .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-purple .main-header .navbar .dropdown-menu li a:hover {
-    background: #555299;
-  }
-}
-.skin-purple .main-header .logo {
-  background-color: #555299;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-purple .main-header .logo:hover {
-  background-color: #545096;
-}
-.skin-purple .main-header li.user-header {
-  background-color: #605ca8;
-}
-.skin-purple .content-header {
-  background: transparent;
-}
-.skin-purple .wrapper,
-.skin-purple .main-sidebar,
-.skin-purple .left-side {
-  background-color: #222d32;
-}
-.skin-purple .user-panel > .info,
-.skin-purple .user-panel > .info > a {
-  color: #fff;
-}
-.skin-purple .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-purple .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-purple .sidebar-menu > li:hover > a,
-.skin-purple .sidebar-menu > li.active > a,
-.skin-purple .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-purple .sidebar-menu > li.active > a {
-  border-left-color: #605ca8;
-}
-.skin-purple .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-purple .sidebar a {
-  color: #b8c7ce;
-}
-.skin-purple .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-purple .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-purple .sidebar-menu .treeview-menu > li.active > a,
-.skin-purple .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-purple .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-purple .sidebar-form input[type="text"],
-.skin-purple .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-purple .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-purple .sidebar-form input[type="text"]:focus,
-.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-purple .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-/*
- * Skin: Purple
- * ------------
- */
-.skin-purple-light .main-header .navbar {
-  background-color: #605ca8;
-}
-.skin-purple-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-purple-light .main-header .navbar .nav > li > a:hover,
-.skin-purple-light .main-header .navbar .nav > li > a:active,
-.skin-purple-light .main-header .navbar .nav > li > a:focus,
-.skin-purple-light .main-header .navbar .nav .open > a,
-.skin-purple-light .main-header .navbar .nav .open > a:hover,
-.skin-purple-light .main-header .navbar .nav .open > a:focus,
-.skin-purple-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #555299;
-}
-@media (max-width: 767px) {
-  .skin-purple-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-purple-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-purple-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #555299;
-  }
-}
-.skin-purple-light .main-header .logo {
-  background-color: #605ca8;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-purple-light .main-header .logo:hover {
-  background-color: #5d59a6;
-}
-.skin-purple-light .main-header li.user-header {
-  background-color: #605ca8;
-}
-.skin-purple-light .content-header {
-  background: transparent;
-}
-.skin-purple-light .wrapper,
-.skin-purple-light .main-sidebar,
-.skin-purple-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-purple-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-purple-light .user-panel > .info,
-.skin-purple-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-purple-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-purple-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-purple-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-menu > li:hover > a,
-.skin-purple-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-purple-light .sidebar-menu > li.active {
-  border-left-color: #605ca8;
-}
-.skin-purple-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-purple-light .sidebar a {
-  color: #444444;
-}
-.skin-purple-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-purple-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-purple-light .sidebar-form input[type="text"],
-.skin-purple-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-purple-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-purple-light .sidebar-form input[type="text"]:focus,
-.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-purple-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-black-light.css

@@ -1,172 +0,0 @@
-/*
- * Skin: Black
- * -----------
- */
-/* skin-black navbar */
-.skin-black-light .main-header {
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.skin-black-light .main-header .navbar-toggle {
-  color: #333;
-}
-.skin-black-light .main-header .navbar-brand {
-  color: #333;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar {
-  background-color: #ffffff;
-}
-.skin-black-light .main-header .navbar .nav > li > a {
-  color: #333333;
-}
-.skin-black-light .main-header .navbar .nav > li > a:hover,
-.skin-black-light .main-header .navbar .nav > li > a:active,
-.skin-black-light .main-header .navbar .nav > li > a:focus,
-.skin-black-light .main-header .navbar .nav .open > a,
-.skin-black-light .main-header .navbar .nav .open > a:hover,
-.skin-black-light .main-header .navbar .nav .open > a:focus,
-.skin-black-light .main-header .navbar .nav > .active > a {
-  background: #ffffff;
-  color: #999999;
-}
-.skin-black-light .main-header .navbar .sidebar-toggle {
-  color: #333333;
-}
-.skin-black-light .main-header .navbar .sidebar-toggle:hover {
-  color: #999999;
-  background: #ffffff;
-}
-.skin-black-light .main-header .navbar > .sidebar-toggle {
-  color: #333;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar .navbar-nav > li > a {
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
-.skin-black-light .main-header .navbar .navbar-right > li > a {
-  border-left: 1px solid #d2d6de;
-  border-right-width: 0;
-}
-.skin-black-light .main-header .logo {
-  background-color: #ffffff;
-  color: #333333;
-  border-bottom: 0 solid transparent;
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .main-header .logo:hover {
-  background-color: #fcfcfc;
-}
-@media (max-width: 767px) {
-  .skin-black-light .main-header .logo {
-    background-color: #222222;
-    color: #ffffff;
-    border-bottom: 0 solid transparent;
-    border-right: none;
-  }
-  .skin-black-light .main-header .logo:hover {
-    background-color: #1f1f1f;
-  }
-}
-.skin-black-light .main-header li.user-header {
-  background-color: #222;
-}
-.skin-black-light .content-header {
-  background: transparent;
-  box-shadow: none;
-}
-.skin-black-light .wrapper,
-.skin-black-light .main-sidebar,
-.skin-black-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-black-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-black-light .user-panel > .info,
-.skin-black-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-black-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-black-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-black-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-black-light .sidebar-menu > li:hover > a,
-.skin-black-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-black-light .sidebar-menu > li.active {
-  border-left-color: #ffffff;
-}
-.skin-black-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-black-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-black-light .sidebar a {
-  color: #444444;
-}
-.skin-black-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-black-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-black-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-black-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-black-light .sidebar-form input[type="text"],
-.skin-black-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-black-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-black-light .sidebar-form input[type="text"]:focus,
-.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-black-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-black.css

@@ -1,161 +0,0 @@
-/*
- * Skin: Black
- * -----------
- */
-/* skin-black navbar */
-.skin-black .main-header {
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.skin-black .main-header .navbar-toggle {
-  color: #333;
-}
-.skin-black .main-header .navbar-brand {
-  color: #333;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar {
-  background-color: #ffffff;
-}
-.skin-black .main-header .navbar .nav > li > a {
-  color: #333333;
-}
-.skin-black .main-header .navbar .nav > li > a:hover,
-.skin-black .main-header .navbar .nav > li > a:active,
-.skin-black .main-header .navbar .nav > li > a:focus,
-.skin-black .main-header .navbar .nav .open > a,
-.skin-black .main-header .navbar .nav .open > a:hover,
-.skin-black .main-header .navbar .nav .open > a:focus,
-.skin-black .main-header .navbar .nav > .active > a {
-  background: #ffffff;
-  color: #999999;
-}
-.skin-black .main-header .navbar .sidebar-toggle {
-  color: #333333;
-}
-.skin-black .main-header .navbar .sidebar-toggle:hover {
-  color: #999999;
-  background: #ffffff;
-}
-.skin-black .main-header .navbar > .sidebar-toggle {
-  color: #333;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar .navbar-nav > li > a {
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
-.skin-black .main-header .navbar .navbar-right > li > a {
-  border-left: 1px solid #eee;
-  border-right-width: 0;
-}
-.skin-black .main-header .logo {
-  background-color: #ffffff;
-  color: #333333;
-  border-bottom: 0 solid transparent;
-  border-right: 1px solid #eee;
-}
-.skin-black .main-header .logo:hover {
-  background-color: #fcfcfc;
-}
-@media (max-width: 767px) {
-  .skin-black .main-header .logo {
-    background-color: #222222;
-    color: #ffffff;
-    border-bottom: 0 solid transparent;
-    border-right: none;
-  }
-  .skin-black .main-header .logo:hover {
-    background-color: #1f1f1f;
-  }
-}
-.skin-black .main-header li.user-header {
-  background-color: #222;
-}
-.skin-black .content-header {
-  background: transparent;
-  box-shadow: none;
-}
-.skin-black .wrapper,
-.skin-black .main-sidebar,
-.skin-black .left-side {
-  background-color: #222d32;
-}
-.skin-black .user-panel > .info,
-.skin-black .user-panel > .info > a {
-  color: #fff;
-}
-.skin-black .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-black .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-black .sidebar-menu > li:hover > a,
-.skin-black .sidebar-menu > li.active > a,
-.skin-black .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-black .sidebar-menu > li.active > a {
-  border-left-color: #ffffff;
-}
-.skin-black .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-black .sidebar a {
-  color: #b8c7ce;
-}
-.skin-black .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-black .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-black .sidebar-menu .treeview-menu > li.active > a,
-.skin-black .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-black .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-black .sidebar-form input[type="text"],
-.skin-black .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-black .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-black .sidebar-form input[type="text"]:focus,
-.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-black .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-.skin-black .pace .pace-progress {
-  background: #222;
-}
-.skin-black .pace .pace-activity {
-  border-top-color: #222;
-  border-left-color: #222;
-}

dist/css/skins/skin-blue-light.css

@@ -1,163 +0,0 @@
-/*
- * Skin: Blue
- * ----------
- */
-.skin-blue-light .main-header .navbar {
-  background-color: #3c8dbc;
-}
-.skin-blue-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-blue-light .main-header .navbar .nav > li > a:hover,
-.skin-blue-light .main-header .navbar .nav > li > a:active,
-.skin-blue-light .main-header .navbar .nav > li > a:focus,
-.skin-blue-light .main-header .navbar .nav .open > a,
-.skin-blue-light .main-header .navbar .nav .open > a:hover,
-.skin-blue-light .main-header .navbar .nav .open > a:focus,
-.skin-blue-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #367fa9;
-}
-@media (max-width: 767px) {
-  .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-blue-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #367fa9;
-  }
-}
-.skin-blue-light .main-header .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue-light .main-header .logo:hover {
-  background-color: #3b8ab8;
-}
-.skin-blue-light .main-header li.user-header {
-  background-color: #3c8dbc;
-}
-.skin-blue-light .content-header {
-  background: transparent;
-}
-.skin-blue-light .wrapper,
-.skin-blue-light .main-sidebar,
-.skin-blue-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-blue-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-blue-light .user-panel > .info,
-.skin-blue-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-blue-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-blue-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-blue-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-menu > li:hover > a,
-.skin-blue-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-blue-light .sidebar-menu > li.active {
-  border-left-color: #3c8dbc;
-}
-.skin-blue-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-blue-light .sidebar a {
-  color: #444444;
-}
-.skin-blue-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-blue-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-blue-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-blue-light .sidebar-form input[type="text"],
-.skin-blue-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-blue-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-blue-light .sidebar-form input[type="text"]:focus,
-.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-blue-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}
-.skin-blue-light .main-footer {
-  border-top-color: #d2d6de;
-}
-.skin-blue.layout-top-nav .main-header > .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue.layout-top-nav .main-header > .logo:hover {
-  background-color: #3b8ab8;
-}

dist/css/skins/skin-blue.css

@@ -1,142 +0,0 @@
-/*
- * Skin: Blue
- * ----------
- */
-.skin-blue .main-header .navbar {
-  background-color: #3c8dbc;
-}
-.skin-blue .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-blue .main-header .navbar .nav > li > a:hover,
-.skin-blue .main-header .navbar .nav > li > a:active,
-.skin-blue .main-header .navbar .nav > li > a:focus,
-.skin-blue .main-header .navbar .nav .open > a,
-.skin-blue .main-header .navbar .nav .open > a:hover,
-.skin-blue .main-header .navbar .nav .open > a:focus,
-.skin-blue .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-blue .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-blue .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-blue .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-blue .main-header .navbar .sidebar-toggle:hover {
-  background-color: #367fa9;
-}
-@media (max-width: 767px) {
-  .skin-blue .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-blue .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-blue .main-header .navbar .dropdown-menu li a:hover {
-    background: #367fa9;
-  }
-}
-.skin-blue .main-header .logo {
-  background-color: #367fa9;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue .main-header .logo:hover {
-  background-color: #357ca5;
-}
-.skin-blue .main-header li.user-header {
-  background-color: #3c8dbc;
-}
-.skin-blue .content-header {
-  background: transparent;
-}
-.skin-blue .wrapper,
-.skin-blue .main-sidebar,
-.skin-blue .left-side {
-  background-color: #222d32;
-}
-.skin-blue .user-panel > .info,
-.skin-blue .user-panel > .info > a {
-  color: #fff;
-}
-.skin-blue .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-blue .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-blue .sidebar-menu > li:hover > a,
-.skin-blue .sidebar-menu > li.active > a,
-.skin-blue .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-blue .sidebar-menu > li.active > a {
-  border-left-color: #3c8dbc;
-}
-.skin-blue .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-blue .sidebar a {
-  color: #b8c7ce;
-}
-.skin-blue .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-blue .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-blue .sidebar-menu .treeview-menu > li.active > a,
-.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-blue .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-blue .sidebar-form input[type="text"],
-.skin-blue .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-blue .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-blue .sidebar-form input[type="text"]:focus,
-.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-blue .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-.skin-blue.layout-top-nav .main-header > .logo {
-  background-color: #3c8dbc;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-blue.layout-top-nav .main-header > .logo:hover {
-  background-color: #3b8ab8;
-}

dist/css/skins/skin-green-light.css

@@ -1,152 +0,0 @@
-/*
- * Skin: Green
- * -----------
- */
-.skin-green-light .main-header .navbar {
-  background-color: #00a65a;
-}
-.skin-green-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-green-light .main-header .navbar .nav > li > a:hover,
-.skin-green-light .main-header .navbar .nav > li > a:active,
-.skin-green-light .main-header .navbar .nav > li > a:focus,
-.skin-green-light .main-header .navbar .nav .open > a,
-.skin-green-light .main-header .navbar .nav .open > a:hover,
-.skin-green-light .main-header .navbar .nav .open > a:focus,
-.skin-green-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-green-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-green-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #008d4c;
-}
-@media (max-width: 767px) {
-  .skin-green-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-green-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-green-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #008d4c;
-  }
-}
-.skin-green-light .main-header .logo {
-  background-color: #00a65a;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-green-light .main-header .logo:hover {
-  background-color: #00a157;
-}
-.skin-green-light .main-header li.user-header {
-  background-color: #00a65a;
-}
-.skin-green-light .content-header {
-  background: transparent;
-}
-.skin-green-light .wrapper,
-.skin-green-light .main-sidebar,
-.skin-green-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-green-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-green-light .user-panel > .info,
-.skin-green-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-green-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-green-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-green-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-green-light .sidebar-menu > li:hover > a,
-.skin-green-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-green-light .sidebar-menu > li.active {
-  border-left-color: #00a65a;
-}
-.skin-green-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-green-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-green-light .sidebar a {
-  color: #444444;
-}
-.skin-green-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-green-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-green-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-green-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-green-light .sidebar-form input[type="text"],
-.skin-green-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-green-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-green-light .sidebar-form input[type="text"]:focus,
-.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-green-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-green.css

@@ -1,134 +0,0 @@
-/*
- * Skin: Green
- * -----------
- */
-.skin-green .main-header .navbar {
-  background-color: #00a65a;
-}
-.skin-green .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-green .main-header .navbar .nav > li > a:hover,
-.skin-green .main-header .navbar .nav > li > a:active,
-.skin-green .main-header .navbar .nav > li > a:focus,
-.skin-green .main-header .navbar .nav .open > a,
-.skin-green .main-header .navbar .nav .open > a:hover,
-.skin-green .main-header .navbar .nav .open > a:focus,
-.skin-green .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-green .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-green .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-green .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-green .main-header .navbar .sidebar-toggle:hover {
-  background-color: #008d4c;
-}
-@media (max-width: 767px) {
-  .skin-green .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-green .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-green .main-header .navbar .dropdown-menu li a:hover {
-    background: #008d4c;
-  }
-}
-.skin-green .main-header .logo {
-  background-color: #008d4c;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-green .main-header .logo:hover {
-  background-color: #008749;
-}
-.skin-green .main-header li.user-header {
-  background-color: #00a65a;
-}
-.skin-green .content-header {
-  background: transparent;
-}
-.skin-green .wrapper,
-.skin-green .main-sidebar,
-.skin-green .left-side {
-  background-color: #222d32;
-}
-.skin-green .user-panel > .info,
-.skin-green .user-panel > .info > a {
-  color: #fff;
-}
-.skin-green .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-green .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-green .sidebar-menu > li:hover > a,
-.skin-green .sidebar-menu > li.active > a,
-.skin-green .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-green .sidebar-menu > li.active > a {
-  border-left-color: #00a65a;
-}
-.skin-green .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-green .sidebar a {
-  color: #b8c7ce;
-}
-.skin-green .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-green .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-green .sidebar-menu .treeview-menu > li.active > a,
-.skin-green .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-green .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-green .sidebar-form input[type="text"],
-.skin-green .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-green .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-green .sidebar-form input[type="text"]:focus,
-.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-green .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}

dist/css/skins/skin-purple-light.css

@@ -1,152 +0,0 @@
-/*
- * Skin: Purple
- * ------------
- */
-.skin-purple-light .main-header .navbar {
-  background-color: #605ca8;
-}
-.skin-purple-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-purple-light .main-header .navbar .nav > li > a:hover,
-.skin-purple-light .main-header .navbar .nav > li > a:active,
-.skin-purple-light .main-header .navbar .nav > li > a:focus,
-.skin-purple-light .main-header .navbar .nav .open > a,
-.skin-purple-light .main-header .navbar .nav .open > a:hover,
-.skin-purple-light .main-header .navbar .nav .open > a:focus,
-.skin-purple-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #555299;
-}
-@media (max-width: 767px) {
-  .skin-purple-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-purple-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-purple-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #555299;
-  }
-}
-.skin-purple-light .main-header .logo {
-  background-color: #605ca8;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-purple-light .main-header .logo:hover {
-  background-color: #5d59a6;
-}
-.skin-purple-light .main-header li.user-header {
-  background-color: #605ca8;
-}
-.skin-purple-light .content-header {
-  background: transparent;
-}
-.skin-purple-light .wrapper,
-.skin-purple-light .main-sidebar,
-.skin-purple-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-purple-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-purple-light .user-panel > .info,
-.skin-purple-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-purple-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-purple-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-purple-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-menu > li:hover > a,
-.skin-purple-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-purple-light .sidebar-menu > li.active {
-  border-left-color: #605ca8;
-}
-.skin-purple-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-purple-light .sidebar a {
-  color: #444444;
-}
-.skin-purple-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-purple-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-purple-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-purple-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-purple-light .sidebar-form input[type="text"],
-.skin-purple-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-purple-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-purple-light .sidebar-form input[type="text"]:focus,
-.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-purple-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-purple.css

@@ -1,134 +0,0 @@
-/*
- * Skin: Purple
- * ------------
- */
-.skin-purple .main-header .navbar {
-  background-color: #605ca8;
-}
-.skin-purple .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-purple .main-header .navbar .nav > li > a:hover,
-.skin-purple .main-header .navbar .nav > li > a:active,
-.skin-purple .main-header .navbar .nav > li > a:focus,
-.skin-purple .main-header .navbar .nav .open > a,
-.skin-purple .main-header .navbar .nav .open > a:hover,
-.skin-purple .main-header .navbar .nav .open > a:focus,
-.skin-purple .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-purple .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-purple .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-purple .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-purple .main-header .navbar .sidebar-toggle:hover {
-  background-color: #555299;
-}
-@media (max-width: 767px) {
-  .skin-purple .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-purple .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-purple .main-header .navbar .dropdown-menu li a:hover {
-    background: #555299;
-  }
-}
-.skin-purple .main-header .logo {
-  background-color: #555299;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-purple .main-header .logo:hover {
-  background-color: #545096;
-}
-.skin-purple .main-header li.user-header {
-  background-color: #605ca8;
-}
-.skin-purple .content-header {
-  background: transparent;
-}
-.skin-purple .wrapper,
-.skin-purple .main-sidebar,
-.skin-purple .left-side {
-  background-color: #222d32;
-}
-.skin-purple .user-panel > .info,
-.skin-purple .user-panel > .info > a {
-  color: #fff;
-}
-.skin-purple .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-purple .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-purple .sidebar-menu > li:hover > a,
-.skin-purple .sidebar-menu > li.active > a,
-.skin-purple .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-purple .sidebar-menu > li.active > a {
-  border-left-color: #605ca8;
-}
-.skin-purple .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-purple .sidebar a {
-  color: #b8c7ce;
-}
-.skin-purple .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-purple .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-purple .sidebar-menu .treeview-menu > li.active > a,
-.skin-purple .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-purple .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-purple .sidebar-form input[type="text"],
-.skin-purple .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-purple .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-purple .sidebar-form input[type="text"]:focus,
-.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-purple .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}

dist/css/skins/skin-red-light.css

@@ -1,152 +0,0 @@
-/*
- * Skin: Red
- * ---------
- */
-.skin-red-light .main-header .navbar {
-  background-color: #dd4b39;
-}
-.skin-red-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-red-light .main-header .navbar .nav > li > a:hover,
-.skin-red-light .main-header .navbar .nav > li > a:active,
-.skin-red-light .main-header .navbar .nav > li > a:focus,
-.skin-red-light .main-header .navbar .nav .open > a,
-.skin-red-light .main-header .navbar .nav .open > a:hover,
-.skin-red-light .main-header .navbar .nav .open > a:focus,
-.skin-red-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-red-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-red-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #d73925;
-}
-@media (max-width: 767px) {
-  .skin-red-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-red-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-red-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #d73925;
-  }
-}
-.skin-red-light .main-header .logo {
-  background-color: #dd4b39;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-red-light .main-header .logo:hover {
-  background-color: #dc4735;
-}
-.skin-red-light .main-header li.user-header {
-  background-color: #dd4b39;
-}
-.skin-red-light .content-header {
-  background: transparent;
-}
-.skin-red-light .wrapper,
-.skin-red-light .main-sidebar,
-.skin-red-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-red-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-red-light .user-panel > .info,
-.skin-red-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-red-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-red-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-red-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-red-light .sidebar-menu > li:hover > a,
-.skin-red-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-red-light .sidebar-menu > li.active {
-  border-left-color: #dd4b39;
-}
-.skin-red-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-red-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-red-light .sidebar a {
-  color: #444444;
-}
-.skin-red-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-red-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-red-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-red-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-red-light .sidebar-form input[type="text"],
-.skin-red-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-red-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-red-light .sidebar-form input[type="text"]:focus,
-.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-red-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-red.css

@@ -1,134 +0,0 @@
-/*
- * Skin: Red
- * ---------
- */
-.skin-red .main-header .navbar {
-  background-color: #dd4b39;
-}
-.skin-red .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-red .main-header .navbar .nav > li > a:hover,
-.skin-red .main-header .navbar .nav > li > a:active,
-.skin-red .main-header .navbar .nav > li > a:focus,
-.skin-red .main-header .navbar .nav .open > a,
-.skin-red .main-header .navbar .nav .open > a:hover,
-.skin-red .main-header .navbar .nav .open > a:focus,
-.skin-red .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-red .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-red .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-red .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-red .main-header .navbar .sidebar-toggle:hover {
-  background-color: #d73925;
-}
-@media (max-width: 767px) {
-  .skin-red .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-red .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-red .main-header .navbar .dropdown-menu li a:hover {
-    background: #d73925;
-  }
-}
-.skin-red .main-header .logo {
-  background-color: #d73925;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-red .main-header .logo:hover {
-  background-color: #d33724;
-}
-.skin-red .main-header li.user-header {
-  background-color: #dd4b39;
-}
-.skin-red .content-header {
-  background: transparent;
-}
-.skin-red .wrapper,
-.skin-red .main-sidebar,
-.skin-red .left-side {
-  background-color: #222d32;
-}
-.skin-red .user-panel > .info,
-.skin-red .user-panel > .info > a {
-  color: #fff;
-}
-.skin-red .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-red .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-red .sidebar-menu > li:hover > a,
-.skin-red .sidebar-menu > li.active > a,
-.skin-red .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-red .sidebar-menu > li.active > a {
-  border-left-color: #dd4b39;
-}
-.skin-red .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-red .sidebar a {
-  color: #b8c7ce;
-}
-.skin-red .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-red .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-red .sidebar-menu .treeview-menu > li.active > a,
-.skin-red .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-red .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-red .sidebar-form input[type="text"],
-.skin-red .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-red .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-red .sidebar-form input[type="text"]:focus,
-.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-red .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}

dist/css/skins/skin-yellow-light.css

@@ -1,152 +0,0 @@
-/*
- * Skin: Yellow
- * ------------
- */
-.skin-yellow-light .main-header .navbar {
-  background-color: #f39c12;
-}
-.skin-yellow-light .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-yellow-light .main-header .navbar .nav > li > a:hover,
-.skin-yellow-light .main-header .navbar .nav > li > a:active,
-.skin-yellow-light .main-header .navbar .nav > li > a:focus,
-.skin-yellow-light .main-header .navbar .nav .open > a,
-.skin-yellow-light .main-header .navbar .nav .open > a:hover,
-.skin-yellow-light .main-header .navbar .nav .open > a:focus,
-.skin-yellow-light .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
-  background-color: #e08e0b;
-}
-@media (max-width: 767px) {
-  .skin-yellow-light .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-yellow-light .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover {
-    background: #e08e0b;
-  }
-}
-.skin-yellow-light .main-header .logo {
-  background-color: #f39c12;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-yellow-light .main-header .logo:hover {
-  background-color: #f39a0d;
-}
-.skin-yellow-light .main-header li.user-header {
-  background-color: #f39c12;
-}
-.skin-yellow-light .content-header {
-  background: transparent;
-}
-.skin-yellow-light .wrapper,
-.skin-yellow-light .main-sidebar,
-.skin-yellow-light .left-side {
-  background-color: #f9fafc;
-}
-.skin-yellow-light .main-sidebar {
-  border-right: 1px solid #d2d6de;
-}
-.skin-yellow-light .user-panel > .info,
-.skin-yellow-light .user-panel > .info > a {
-  color: #444444;
-}
-.skin-yellow-light .sidebar-menu > li {
-  -webkit-transition: border-left-color 0.3s ease;
-  -o-transition: border-left-color 0.3s ease;
-  transition: border-left-color 0.3s ease;
-}
-.skin-yellow-light .sidebar-menu > li.header {
-  color: #848484;
-  background: #f9fafc;
-}
-.skin-yellow-light .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-menu > li:hover > a,
-.skin-yellow-light .sidebar-menu > li.active > a {
-  color: #000000;
-  background: #f4f4f5;
-}
-.skin-yellow-light .sidebar-menu > li.active {
-  border-left-color: #f39c12;
-}
-.skin-yellow-light .sidebar-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-menu > li > .treeview-menu {
-  background: #f4f4f5;
-}
-.skin-yellow-light .sidebar a {
-  color: #444444;
-}
-.skin-yellow-light .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li > a {
-  color: #777777;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li.active > a,
-.skin-yellow-light .sidebar-menu .treeview-menu > li > a:hover {
-  color: #000000;
-}
-.skin-yellow-light .sidebar-menu .treeview-menu > li.active > a {
-  font-weight: 600;
-}
-.skin-yellow-light .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #d2d6de;
-  margin: 10px 10px;
-}
-.skin-yellow-light .sidebar-form input[type="text"],
-.skin-yellow-light .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #fff;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-yellow-light .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-yellow-light .sidebar-form input[type="text"]:focus,
-.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-yellow-light .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}
-@media (min-width: 768px) {
-  .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
-    border-left: 1px solid #d2d6de;
-  }
-}

dist/css/skins/skin-yellow.css

@@ -1,134 +0,0 @@
-/*
- * Skin: Yellow
- * ------------
- */
-.skin-yellow .main-header .navbar {
-  background-color: #f39c12;
-}
-.skin-yellow .main-header .navbar .nav > li > a {
-  color: #ffffff;
-}
-.skin-yellow .main-header .navbar .nav > li > a:hover,
-.skin-yellow .main-header .navbar .nav > li > a:active,
-.skin-yellow .main-header .navbar .nav > li > a:focus,
-.skin-yellow .main-header .navbar .nav .open > a,
-.skin-yellow .main-header .navbar .nav .open > a:hover,
-.skin-yellow .main-header .navbar .nav .open > a:focus,
-.skin-yellow .main-header .navbar .nav > .active > a {
-  background: rgba(0, 0, 0, 0.1);
-  color: #f6f6f6;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle {
-  color: #ffffff;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle:hover {
-  color: #f6f6f6;
-  background: rgba(0, 0, 0, 0.1);
-}
-.skin-yellow .main-header .navbar .sidebar-toggle {
-  color: #fff;
-}
-.skin-yellow .main-header .navbar .sidebar-toggle:hover {
-  background-color: #e08e0b;
-}
-@media (max-width: 767px) {
-  .skin-yellow .main-header .navbar .dropdown-menu li.divider {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .skin-yellow .main-header .navbar .dropdown-menu li a {
-    color: #fff;
-  }
-  .skin-yellow .main-header .navbar .dropdown-menu li a:hover {
-    background: #e08e0b;
-  }
-}
-.skin-yellow .main-header .logo {
-  background-color: #e08e0b;
-  color: #ffffff;
-  border-bottom: 0 solid transparent;
-}
-.skin-yellow .main-header .logo:hover {
-  background-color: #db8b0b;
-}
-.skin-yellow .main-header li.user-header {
-  background-color: #f39c12;
-}
-.skin-yellow .content-header {
-  background: transparent;
-}
-.skin-yellow .wrapper,
-.skin-yellow .main-sidebar,
-.skin-yellow .left-side {
-  background-color: #222d32;
-}
-.skin-yellow .user-panel > .info,
-.skin-yellow .user-panel > .info > a {
-  color: #fff;
-}
-.skin-yellow .sidebar-menu > li.header {
-  color: #4b646f;
-  background: #1a2226;
-}
-.skin-yellow .sidebar-menu > li > a {
-  border-left: 3px solid transparent;
-}
-.skin-yellow .sidebar-menu > li:hover > a,
-.skin-yellow .sidebar-menu > li.active > a,
-.skin-yellow .sidebar-menu > li.menu-open > a {
-  color: #ffffff;
-  background: #1e282c;
-}
-.skin-yellow .sidebar-menu > li.active > a {
-  border-left-color: #f39c12;
-}
-.skin-yellow .sidebar-menu > li > .treeview-menu {
-  margin: 0 1px;
-  background: #2c3b41;
-}
-.skin-yellow .sidebar a {
-  color: #b8c7ce;
-}
-.skin-yellow .sidebar a:hover {
-  text-decoration: none;
-}
-.skin-yellow .sidebar-menu .treeview-menu > li > a {
-  color: #8aa4af;
-}
-.skin-yellow .sidebar-menu .treeview-menu > li.active > a,
-.skin-yellow .sidebar-menu .treeview-menu > li > a:hover {
-  color: #ffffff;
-}
-.skin-yellow .sidebar-form {
-  border-radius: 3px;
-  border: 1px solid #374850;
-  margin: 10px 10px;
-}
-.skin-yellow .sidebar-form input[type="text"],
-.skin-yellow .sidebar-form .btn {
-  box-shadow: none;
-  background-color: #374850;
-  border: 1px solid transparent;
-  height: 35px;
-}
-.skin-yellow .sidebar-form input[type="text"] {
-  color: #666;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
-}
-.skin-yellow .sidebar-form input[type="text"]:focus,
-.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  background-color: #fff;
-  color: #666;
-}
-.skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
-  border-left-color: #fff;
-}
-.skin-yellow .sidebar-form .btn {
-  color: #999;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
-}

dist/css/style.css

@@ -31,6 +31,54 @@ tr.shown td.details-control {
     background-color: #009688;
    }
 /*end ST*/
+/*Configuration Form*/
+* {
+  box-sizing: border-box;
+  font-family: "Merriweather Sans", sans-serif;
+}
+body {
+  background-color: #b0dbee;
+}
+body #form {
+  color: white;
+  font-size:14px;
+  background:#9bb0b9;
+  /*background-color: #009edf;*/
+  border-radius: 5px;
+  /*width: 400px;*/
+  padding: 40px;
+  /*margin: 150px auto;*/
+  -webkit-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
+  box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
+}
+body #form p {
+  font-size: 0.9em;
+}
+
+body #form .form-group label {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+body #form  .input-group {
+  border-radius: 5px;
+  -webkit-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+  -moz-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
+}
+body #form .form-group .input-group .input-group-addon {
+  border: 1px none;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 5px 0 0 5px;
+}
+body #form .form-group .input-group input {
+  padding-left: 10px;
+}
+body #form .form-group .input-group i {
+  color: #21bbb6;
+}
+
+/* End Configuration Form*/
 
 .user-panel {
     background: white;
@@ -42,7 +90,7 @@ section.sidebar {
     background: #c1cbd0;
 }
 nav.navbar.navbar-static-top {
-    background: #3c8dbc;
+    background: #3cb9bb;
 }
 .main-header .logo {
     background: #367fa9;
@@ -54,23 +102,25 @@ a.sidebar-toggle {
 
 ul.treeview-menu {
     background: #4c5857;
-    border-radius: 0em;
+    border-radius: 0.5em;
     margin-left: 12px;
     margin-right: 10px;
+    /*margin-top:15px;*/
 }
 
 
 a.collapse-item {
     color: #2ebfaa;
+    background-color: radial-gradient(black, transparent);
 }
 .treeview-menu>li {
     margin: 0;
     height: 32px;
     width: 194px;
     /*background: white;*/
-    margin-top: 3px;
+   /* margin-top: 10px;*/
     border-radius: 0.5em;
-    margin-left: 2px;
+    margin-left: 10px;
 
 }
 .treeview-menu>li:hover,.treeview-menu>li>a:hover{
@@ -78,25 +128,42 @@ a.collapse-item {
 	border-radius: 0.5em;
 	color:white;
   text-decoration: none;
+  width: 162px;
 	}
 	
-	.treeview>a:hover{
+	.treeview>a:hover,li.exit>a:hover{
 		background-color: #009688;
 		color:white;
     text-decoration: none;
 	}
-	
+  li.exit a {
+    text-decoration: none;
+    color: #3cb9bb;
+}
 .navbar-custom-menu>.navbar-nav>li {
     position: relative;
     text-align: center;
    margin-left: 251px;
 }
-#mainNavMenu  li a:link.changeColor {
-  background-color:rgb(0, 150, 136);
-  color: white;
+#mainSubMenu  li a:link.change,#mainSubMenu li a.change {
+      background-color: rgb(0, 150, 136);
+      width: 162px;
+      color: white;
+      border-radius: 0.5em;
+      text-decoration: none;
+      margin-top: 1px;
+}
+#mainNavMenu  li<a:link.changeColor{
+    background-color: rgb(0, 150, 136);
+      width: 230px;
+      color: white;
+      border-radius: 0.5em;
+      text-decoration: none;
+      margin-top: 1px;
+}
+li.treeview a{
   text-decoration: none;
 }
-
 li.active.treeview.menu-open>a {
     color: white;
 }
@@ -117,8 +184,11 @@ li.user-header {
   background-color: red;
   color:red;
 }
-li.treeview{
 
+.treeview-menu>li>a {
+    padding: 5px 5px 5px 15px;
+    display: block;
+    font-size: 12px;
 }
 .input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file {
     position: relative;
@@ -129,64 +199,29 @@ li.treeview{
     margin-bottom: 0;
 }
 
-
-
-/*Configuration Form*/
-* {
-  box-sizing: border-box;
-  font-family: "Merriweather Sans", sans-serif;
-}
-body {
-  background-color: #b0dbee;
-}
-body #form {
-  color: white;
-  background-color: #009edf;
-  border-radius: 5px;
-  width: 400px;
-  padding: 40px;
-  margin: 150px auto;
-  -webkit-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
-  -moz-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
-  box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.75);
-}
-body #form p {
-  font-size: 0.9em;
-}
-body #form button {
-  width: 100%;
-  text-align: center;
-  color: grey;
-  margin-top: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.4);
-}
-body #form .form-group {
-  margin: 15px auto;
-}
-body #form .form-group label {
-  font-weight: bold;
-  font-size: 0.9em;
-}
-body #form .form-group .input-group {
-  border-radius: 5px;
-  -webkit-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
-  -moz-box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
-  box-shadow: -1px 3px 18px 0px rgba(0, 0, 0, 0.35);
-}
-body #form .form-group .input-group .input-group-addon {
-  border: none;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 5px 0 0 5px;
+.navbar-nav>.user-menu .user-image {
+    float: left;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+    margin-top: -2px;
 }
-body #form .form-group .input-group input {
-  padding-left: 10px;
+
+a.dropdown-toggle.mind:hover,a.dropdown-toggle.mind:focus {
+    background:grey;
+    border-radius: 0.5em;
+    color:red;
 }
-body #form .form-group .input-group i {
-  color: #009edf;
+.circle{
+  width:40px;
 }
-body #form .form-group input {
-  padding: 3px;
-  width: 100%;
-  border: none;
-  border-radius: 0 5px 5px 0;
+.sidebar-menu li>a>.pull-right-container {
+    position: absolute;
+    /* right: 10px; */
+    top: 50%;
+    margin-top: -14px;
 }
+aside.main-sidebar {
+    position: fixed;
+}

header.php

@@ -31,6 +31,7 @@ return $str;
 <head>
   <meta charset="UTF-8">
   <title>Forward Staion Server</title>
+  <link rel = "icon" href =  "img/Autoleum Logo.jpg" type = "image/x-icon"> 
 
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
 <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
@@ -46,11 +47,6 @@ return $str;
 <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
 <link rel="stylesheet" href="dist/css/style.css">
 
-
-
-
-
-
 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
@@ -83,6 +79,13 @@ return $str;
        $(this).addClass("changeColor");
     });
 });
+ $(document).ready(function(){
+    var $targetElement = $("#mainSubMenu li a");
+    $targetElement.click(function() {
+       $targetElement.removeClass("change");
+       $(this).addClass("change");
+    });
+});
 
 
 </script>
@@ -144,6 +147,7 @@ iframe {
     margin-right: 5px;
     border-style: none;
     /*border:1px solid green;*/
+    /*overflow: hidden;*/
 }
 li.active >a{
   /*color: white;*/

home.php

@@ -1,3 +1,3 @@
 <?php 
-	echo "<CENTER><h1>WELCOME TO ADMIN PAGE</h1></CENTER>";
- ?>
+	//echo "<CENTER><h1>WELCOME TO ADMIN PAGE</h1></CENTER>";
+ ?>

index.php

@@ -1,26 +1,199 @@
-<?php include "header.php" ?>
-
-
-<body class="hold-transition skin-blue sidebar-mini">
-  <div>
-  	<?php include("nav.php"); ?>
-	<div class="content-wrapper navbar navbar-static-top">
-		<br>
-	  <iframe  src="home.php" id="loadFrame"></iframe>
-</div>
-
-</div>
-<script type="text/javascript">
-	function changePages(fileLocation) {
-		// alert(fileLocation);
-		document.getElementById('loadFrame').src = fileLocation;
-	} 	
-	
-var selector='.sidebar-menu li';
-	$(selector).on('click', function(){
-		// alert(selector);
-    $(selector).removeClass('active');
-    $(this).addClass('active');
-});
-</script>
-</body>
+<?php 
+session_start();
+?>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title> Forward Station Server Login</title>
+  <link rel = "icon" href =  "img/Autoleum Logo.jpg" type = "image/x-icon"> 
+  <style>
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+       margin-top: 50px; 
+    }
+    form {border: 3px solid #f1f1f1;}
+
+    input[type=text], input[type=password] {
+      width: 80%;
+      padding: 12px 20px;
+      margin: 8px 0;
+      display: inline-block;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+    }
+
+    .imgcontainer {
+      text-align: center;
+      margin: 24px 0 12px 0;
+      background:#5eeae7;
+      height:200px;
+      margin-top:0px;
+    }
+
+    img.avatar {
+      width: 40%;
+      border-radius: 50%;
+        margin-top: 32px;
+        width:80px;
+        height:80px;
+        margin-top:-57px;
+    }
+
+    .main {
+      padding: 16px;
+      background-color:#d4e0e6
+    }
+
+    .form-control.texthight {
+    		    font-size: 15px;
+            color:#028790;
+            border-radius: 1rem;
+    		}
+    input[type=text],input[type=password]{
+    			 border: 2px solid #5eeae7;
+    	
+    		}
+    .forgot:hover { color: #3b3b3b }
+    input[type="submit"] {
+      width:240px;
+      height:35px;
+      display:block;
+      font-family:Arial, "Helvetica", sans-serif;
+      font-size:16px;
+      font-weight:bold;
+      color:#fff;
+      text-decoration:none;
+      text-transform:uppercase;
+      text-align:center;
+      text-shadow:1px 1px 0px #37a69b;
+      padding-top:6px;
+      margin: 29px 0 0 29px;
+      position:relative;
+      cursor:pointer;
+      border: none;  
+      background-color: #37a69b;
+      background-image: linear-gradient(top,#3db0a6,#3111);
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border-bottom-left-radius:5px;
+      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #497a78, 0px 10px 5px #999;
+    }
+        input[type="submit"]:active {
+      top:3px;
+      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
+    }
+    .divider{
+      width:400px;
+      height:350px;
+      background:#dde3e4;
+      position:absolute;
+      margin-left:50px;
+      margin-top:-100px;
+      box-shadow: inset 0px 1px 0px #ffff, 0px 2px 0px 0px #ffff, 0px 5px 3px #999;
+    }
+    .login{
+      width:500px;
+      height:600px;
+      align:center;
+      background:white;
+      box-shadow: inset 0px 1px 0px #ffff, 0px 2px 0px 0px #ffff, 0px 5px 3px #999;
+    }
+    @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
+      .form-group {
+        position: relative;
+        color: #aaa;
+        font-size: 16px;
+      }
+
+    .form-group input { text-indent: 32px;}
+    .form-group .fa-user { 
+      position: absolute;
+      top: 20px;
+      left: 45px;
+      color:#0fb7a2;
+    }
+    .form-group input { text-indent: 32px;}
+    .form-group .fa-key { 
+      position: absolute;
+      top: 33px;
+      left: 45px;
+      color:#0fb7a2;
+    }
+    .form-group input { text-indent: 32px;}
+    .form-group .fa-eye { 
+      position: absolute;
+      top: 35px;
+      right: 50px;
+      color:#0fb7a2;
+    }
+    .form-errors p{
+      color:red;
+    }
+  </style>
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <center>
+      <form action="login.php" class="login" method="post">
+        <div class="imgcontainer">
+        </div>
+        <div style="" class="divider">
+            <div class="main">
+              <img src="dist/img/profile.jpg" alt="Avatar" class="avatar">
+
+                <?php if (isset($_SESSION['errors'])): ?>
+                  <div class="form-errors">
+                      <?php foreach($_SESSION['errors'] as $error): ?>
+                          <p><?php echo $error ?></p>
+                      <?php endforeach; 
+                      session_destroy();?>
+                  </div>
+                <?php endif; ?>
+
+              <div class="form-group" style="margin-top:40px;" id="floatContainer">
+                <label for="floatField"></label>
+                  <i class="far fa-user icon" ></i>
+                  <input type="text" id="floatField"  placeholder="Enter Username" id="name" name="uname" class="form-control texthight" required >
+              </div>
+              <div class="form-group ">
+                  <i class="fa fa-key icon" ></i>
+      						<input type="password" class="form-control texthight"  name="password" id="password-field" placeholder="Enter your password" style="margin-top:20px;">
+                  <i id="pass-status" class="fa fa-eye" aria-hidden="true" onClick="viewPassword()"></i>
+  			      </div>
+              <input type="submit" value="Login">
+            </div>  
+        </div>
+      </form>
+  </center>
+  <script type="text/javascript">
+
+    function viewPassword()
+      {
+        var passwordInput = document.getElementById('password-field');
+        var passStatus = document.getElementById('pass-status');
+       
+        if (passwordInput.type == 'password'){
+          passwordInput.type='text';
+          passStatus.className='fa fa-eye-slash'; 
+        }
+        else{
+          passwordInput.type='password';
+          passStatus.className='fa fa-eye';
+        }
+      }
+
+    const floatField = document.getElementById('floatField');
+    const floatContainer = document.getElementById('floatContainer');
+
+        floatField.addEventListener('focus', () => {
+          floatContainer.classList.add('active');
+        });
+        floatField.addEventListener('blur', () => {
+          floatContainer.classList.remove('active');
+        });
+
+    </script>
+  </body>
+</html>

login.php

@@ -0,0 +1,26 @@
+<?php
+    include("connectionDb.php");
+    session_start();  
+	
+
+	
+	$username = $_POST["uname"];
+	$password = $_POST["password"];
+	 $sql = "SELECT * FROM user WHERE password='$password' AND name='$username' ";
+	 $ret = $db->query($sql);
+   while($row = $ret->fetchArray() ){
+     print_r($row);
+      $uname=$row["name"];
+	  $pwd=$row['password'];
+	
+  }
+
+        if ($pwd==$_POST["password"] && $uname==$_POST["uname"]){
+           $_SESSION["login"]=$uname;
+           header('Location: main.php');    
+		}
+		else{
+			$_SESSION['errors'] = array("Your username or password was incorrect.");
+			header("Location:index.php");
+		  }
+?>

logout.php

@@ -0,0 +1,9 @@
+
+<?php
+session_start();
+unset($_SESSION['username']);
+session_destroy();
+
+header("Location: index.php");
+exit;
+?>

main.php

@@ -0,0 +1,67 @@
+<?php 
+
+session_start();
+if(!isset($_SESSION['login'])){
+  header('Location: index.php');
+  
+}else{ ?>
+<?php include "header.php" ?>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
+<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
+<body class="hold-transition skin-blue sidebar-mini">
+  <div>
+  	<?php include("nav.php"); ?>
+	<div class="content-wrapper navbar navbar-static-top">
+		
+		<br>
+	  <iframe  src="home.php" id="loadFrame" scrolling="no"></iframe>
+
+</div>
+
+</div>
+<script type="text/javascript">
+	function changePages(fileLocation) {
+		// alert(fileLocation);
+		document.getElementById('loadFrame').src = fileLocation;
+	} 	
+	
+var selector='.sidebar-menu li';
+	$(selector).on('click', function(){
+		// alert(selector);
+    $(selector).removeClass('active');
+    $(this).addClass('active');
+});
+  
+</script>
+<script type="text/javascript">
+	// Wrap every letter in a span
+$('.ml13').each(function(){
+  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
+});
+
+anime.timeline({loop: true})
+  .add({
+    targets: '.ml13 .letter',
+    translateY: [100,0],
+    translateZ: 0,
+    opacity: [0,1],
+    easing: "easeOutExpo",
+    duration: 1400,
+    delay: function(el, i) {
+      return 300 + 30 * i;
+    }
+  }).add({
+    targets: '.ml13 .letter',
+    translateY: [0,-100],
+    opacity: [1,0],
+    easing: "easeInExpo",
+    duration: 1200,
+    delay: function(el, i) {
+      return 100 + 30 * i;
+    }
+  });
+</script>
+
+</body>
+<?php } ?>

nav.php

@@ -8,16 +8,18 @@
       </a>
 
       <div class="navbar-custom-menu">
-        <ul class="nav navbar-nav">
-          <!-- User Account: style can be found in dropdown.less -->
-        <!--   <li><h5 style="color:#fff;text-align: center;font-size: 24px;font-family: 'Lobster', helvetica, arial;">Forward&nbsp;&nbsp;&nbsp; Station&nbsp;&nbsp;&nbsp; Server</h5></li>
-         -->  <li class="dropdown user user-menu pull-right">
+        <ul class="nav navbar-nav"> 
+          <li><center>
+    <div class="" style="margin-top: 10px;font-size:35px;color:#fff;font-family:'Lobster', helvetica, arial;margin-right:200px;">
+      Forward Station Server
+    </div></center></li>
+          <li class="dropdown user user-menu pull-right">
             <a href="#" class="dropdown-toggle mind" data-toggle="dropdown">
               <img src="dist/img/profile.jpg" class="user-image" alt="User Image">
               <span class="hidden-xs" style="color: white;">Admin</span>
             </a>
             <ul class="dropdown-menu">
-              <!-- User image -->
+              
               <li class="user-header">
                 <img src="dist/img/profile.jpg" class="img-circle" alt="User Image">
 
@@ -26,7 +28,7 @@
                   <small>Member since Nov. 2012</small>
                 </p>
               </li>
-              <!-- Menu Footer-->
+             
               <li class="user-footer">
                 <div class="pull-left">
                   <a href="#" class="btn btn-default btn-flat">Profile</a>
@@ -43,10 +45,8 @@
   </header>
   <!-- Left side column. contains the logo and sidebar -->
   <aside class="main-sidebar">
-    <!-- sidebar: style can be found in sidebar.less -->
     <section class="sidebar">
       <!-- Sidebar user panel -->
-
       <div class="user-panel">
         <div class="pull-left image">
             <img src="dist/img/Autoleum Logo.jpg" class="-circle" alt="User Image">
@@ -56,31 +56,31 @@
         </div>
       </div>
       <ul class="sidebar-menu" data-widget="tree" style="background:#c1cbd0;" id="mainNavMenu">
-        <li class="header">MAIN NAVIGATION</li>
+        <!-- <li class="header">MAIN NAVIGATION</li> -->
+        <br>
         <li class="active treeview" >
           <a href="#"  style="margin-bottom: 20px;">
             <i class="fa fa-calculator " style="font-size: 21px;"></i>&nbsp; &nbsp;&nbsp; <span>Operations</span>
-            <span class="pull-right-container">
-              <i class="fa fa-angle-left pull-right"></i>
-            </span>
+            <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
           </a>
-          <ul class="treeview-menu">
-            <li style="margin-top: 20px;"><a href="shifts.php" class="collapse-item"><i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Shifts</a></li>
-            <li> <a href="#" class="collapse-item" onclick="changePages('sales.php');"><i class="fa fa-industry"></i>&nbsp; Sales</a></li>
-           <li><a href="#" class="collapse-item" onclick="changePages('changePrices.php');"><i class="fas fa-money-check-alt"></i>&nbsp; Update Prices</a></li>
-            <li><a href="#" class="collapse-item" onclick="changePages('deliveries.php');"><i class="fas fa-truck"></i>&nbsp; Deliveries</a></li>
-            <li> <a href="#" class="collapse-item" onclick="changePages('about.php');"><i class="fas fa-award"></i>&nbsp; About</a></li>   
+          <ul class="treeview-menu" id="mainSubMenu">
+            <li style="margin-top: 20px;"><a href="#" class="collapse-item" onclick="changePages('shifts.php');">  <i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Shifts</a></li>
+            <li> <a href="#" class="collapse-item" onclick="changePages('sales.php');"><i class="fa fa-industry">  </i>&nbsp; Sales</a></li>
+            <li><a href="#" class="collapse-item" onclick="changePages('changePrices.php');">
+              <i class="fas fa-money-check-alt"></i>&nbsp; Update Prices</a></li>
+            <li><a href="#" class="collapse-item" onclick="changePages('deliveries.php');">
+              <i class="fas fa-truck"></i>&nbsp; Deliveries</a></li>
+            <li> <a href="#" class="collapse-item" onclick="changePages('about.php');">
+              <i class="fas fa-award"></i>&nbsp; About</a></li>   
           </ul>
         </li>
-        <li class="treeview" style="color:cyan;">
+        <li class="treeview">
           <a href="#">
             <i class="fa fa-pie-chart" style="font-size: 21px;"></i>&nbsp; &nbsp;&nbsp;
             <span>Reports</span>
-            <span class="pull-right-container">
-              <i class="fa fa-angle-left pull-right"></i>
-            </span>
+            <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
           </a>
-          <ul class="treeview-menu">
+          <ul class="treeview-menu" id="mainSubMenu">
             <li><a class="collapse-item" href="#" onclick="changePages('shiftPumpReport.php');"><i class="fas fa-gas-pump"></i>&nbsp;Shift Pump Report</a></li>
               <li><a class="collapse-item" href="#" onclick="changePages('shiftSaleReport.php');"><i class="fas fa-bars"></i>&nbsp;Shift Sale Report</a></li>
               <li><a class="collapse-item" href="#" onclick="changePages('shiftTankReport.php');"><i class="fas fa-sort-amount-up"></i>&nbsp;Shift Tank Report</a></li>
@@ -93,31 +93,27 @@
           <a href="#">
             <i class="fa fa-users" style="font-size: 21px;"></i>&nbsp; &nbsp;&nbsp;
             <span>Admin</span>
-            <span class="pull-right-container">
-              <i class="fa fa-angle-left pull-right"></i>
-            </span>
+            <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
           </a>
-          <ul class="treeview-menu">
+          <ul class="treeview-menu" id="mainSubMenu">
               <li><a class="collapse-item" href="#" onclick="changePages('customers.php');"><i class="fas fa-users"></i>&nbsp;Customers</a></li>
               <li><a class="collapse-item" href="#" onclick="changePages('suppliers.php');"><i class="fas fa-user-tie"></i>&nbsp;Suppliers</a></li>
               <li><a class="collapse-item" href="#" onclick="changePages('users.php');"><i class="fas fa-grin"></i>&nbsp;User</a></li>
           </ul>
         </li>
-        <li class="header">Footer</li>
-         <li class="treeview">
-          <a href="#">
-            <i class="fa fa-wrench" style="font-size: 21px;"></i>&nbsp; &nbsp;&nbsp;
-            <span>Configurations</span>
-            <span class="pull-right-container">
-              <i class="fa fa-angle-left pull-right"></i>
-            </span>
-          </a>
-          <ul class="treeview-menu">
-          <li><a class="collapse-item" href="#" onclick="changePages('configurations.php');"><i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Configurations</a></li>
-          <li><a class="collapse-item" href="#" onclick="changePages('fuelPoints.php');"><i class="fa fa-industry"></i>&nbsp;Fuel Points</a></li>
-          </ul>
+        <hr style="border:1px solid #a0c5c5;display: block;"></hr>
+        <li class="treeview">
+            <a href="#">
+              <i class="fa fa-wrench" style="font-size: 21px;"></i>&nbsp; &nbsp;&nbsp;
+              <span>Configurations</span>
+              <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
+            </a>
+            <ul class="treeview-menu" id="mainSubMenu">
+              <li><a class="collapse-item" href="#" onclick="changePages('configurations.php');"><i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Configurations</a></li>
+              <li><a class="collapse-item" href="#" onclick="changePages('fuelPoints.php');"><i class="fa fa-industry"></i>&nbsp;Fuel Points</a></li>
+            </ul>
         </li>
-        <li class="treeview"><a href="#"><i class="fas fa-fw fa-table"></i>&nbsp; &nbsp;&nbsp;&nbsp; <span>Exit</span></a></li>
+        <li class="exit"><a href="logout.php"><i class="fas fa-fw fa-table"></i>&nbsp; &nbsp;&nbsp;&nbsp; <span>Exit</span></a></li>
       </ul>
     </section>
     <!-- /.sidebar -->

shiftPumpReport.php

@@ -1,5 +1,5 @@
 <?php include "header.php" ?>
-<form method="post">
+<form method="post" class="mheader">
 	<input type="date" name="selectDateToFind">
 	<select name="shiftNumber" style="width: 50px;">
 		<option value="1" selected="true">1</option>