diff --git a/Models/eva_create_evaluation_detail_status/eva_create_evaluation_detail_statusService.cs b/Models/eva_create_evaluation_detail_status/eva_create_evaluation_detail_statusService.cs
index 0971785..5356b52 100644
--- a/Models/eva_create_evaluation_detail_status/eva_create_evaluation_detail_statusService.cs
+++ b/Models/eva_create_evaluation_detail_status/eva_create_evaluation_detail_statusService.cs
@@ -287,10 +287,10 @@ namespace TodoAPI2.Models
                     noti_url = "/eva/eva_create_evaluation_detail_agreementView/eva_create_evaluation_detail_agreement_d2?id=" + existingEntity.id.ToString();
                 }
 
-                //if (need_noti)
-                //{
-                //    SendNotification(noti_to_employee_id, owner_eva_employee_id, existingEntity.id, noti_message, noti_url);
-                //}                
+                if (need_noti)
+                {
+                    SendNotification(noti_to_employee_id, owner_eva_employee_id, existingEntity.id, noti_message, noti_url);
+                }
 
                 var updated = _repository.Update(id, existingEntity);
                 return Get(updated.id);
diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index 2c5f993..07806f3 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -75,6 +75,11 @@
                             <span class="allfontsize" data-fontsize="3" style="font-size:26px; width:20px; height:30px; display:flex; align-items:center; justify-content:center; font-weight:bold;">A</span>
                         </div>
 
+                        <div style="position: relative;" id="mynoti">
+
+                            
+                        </div>
+
                         <div data-toggle="dropdown" style="display: flex; cursor: pointer; align-items: center;">
                             <span class="username" style="font-size:19px; line-height:23px; font-weight:bold;" id="username">no user</span>
                             <b class="caret"></b>
@@ -230,8 +235,10 @@
     $(document).ready(function(){
         var module = "eva";
         //var menu_url = appsite+"/json/"+module+".json";
-        var menu_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/menu/"+module;
+        var menu_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/menu/" + module;
+        var noti_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/notifications";
         GetMenu(module, "#mymenu", menu_url);
+        GetNoti(noti_url, "#mynoti", "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")");
 
         $( document ).on( 'focus', ':input', function(){
             $( this ).attr( 'autocomplete', 'off' );
@@ -284,7 +291,7 @@
         }
     });
 
-        
+
     </script>
 
 
diff --git a/Views/Shared/_LayoutDirect.cshtml b/Views/Shared/_LayoutDirect.cshtml
index 2058824..57e336b 100644
--- a/Views/Shared/_LayoutDirect.cshtml
+++ b/Views/Shared/_LayoutDirect.cshtml
@@ -72,6 +72,10 @@
                             <span class="allfontsize" data-fontsize="3" style="font-size:26px; width:20px; height:30px; display:flex; align-items:center; justify-content:center; font-weight:bold;">A</span>
                         </div>
 
+                        <div style="position: relative;" id="mynoti">
+
+
+                        </div>
 
                         <div>
                             <div data-toggle="dropdown" style="display: flex; cursor: pointer; align-items: center;">
@@ -228,8 +232,10 @@
     $(document).ready(function(){
         var module = "eva";
         //var menu_url = appsite+"/json/"+module+".json";
-        var menu_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/menu/"+module;
+        var menu_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/menu/" + module;
+        var noti_url = "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")/api/notifications";
         GetMenu(module, "#mymenu", menu_url);
+        GetNoti(noti_url, "#mynoti", "@MyHelper.GetConfig(Configuration, "SiteInformation:mainsite")");
 
         $( document ).on( 'focus', ':input', function(){
             $( this ).attr( 'autocomplete', 'off' );
diff --git a/tb320eva.csproj b/tb320eva.csproj
index cc8ab0f..6caacfb 100644
--- a/tb320eva.csproj
+++ b/tb320eva.csproj
@@ -63,7 +63,6 @@
     <EmbeddedResource Remove="Uploads\**" />
     <EmbeddedResource Remove="wwwroot\js_app\**" />
     <Folder Include="Migrations\" />
-    <Folder Include="wwwroot\json\" />
     <None Remove="Data\**" />
     <None Remove="Files\**" />
     <None Remove="Uploads\**" />
diff --git a/wwwroot/BackendScript/css/style.css b/wwwroot/BackendScript/css/style.css
index 5d2d329..ebbe3c3 100644
--- a/wwwroot/BackendScript/css/style.css
+++ b/wwwroot/BackendScript/css/style.css
@@ -6,10 +6,10 @@ Website: http://thevectorlab.net/
 */
 
 /* Import fonts */
-@import url("//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic");
+@import url( //fonts.googleapis.com/css?family=Open+Sans:400, 300, 300italic, 400italic, 600, 600italic, 700, 700italic, 800, 800italic );
 
 body {
-    color: #000000;
+    color: #797979;
     background: #f1f2f7;
     font-family: "Open Sans", sans-serif;
     padding: 0px !important;
@@ -54,79 +54,79 @@ a:focus {
     -webkit-border-radius: 5px;
 }
 
-.form-signin h2.form-signin-heading {
-    margin: 0;
-    padding: 20px 15px;
-    text-align: center;
-    background: #41cac0;
-    border-radius: 5px 5px 0 0;
-    -webkit-border-radius: 5px 5px 0 0;
-    color: #fff;
-    font-size: 18px;
-    text-transform: uppercase;
-    font-weight: 300;
-    font-family: "Open Sans", sans-serif;
-}
+    .form-signin h2.form-signin-heading {
+        margin: 0;
+        padding: 20px 15px;
+        text-align: center;
+        background: #41cac0;
+        border-radius: 5px 5px 0 0;
+        -webkit-border-radius: 5px 5px 0 0;
+        color: #fff;
+        font-size: 18px;
+        text-transform: uppercase;
+        font-weight: 300;
+        font-family: "Open Sans", sans-serif;
+    }
 
-.form-signin .checkbox {
-    margin-bottom: 14px;
-}
+    .form-signin .checkbox {
+        margin-bottom: 14px;
+    }
 
-.form-signin .checkbox {
-    font-weight: normal;
-    color: #b6b6b6;
-    font-weight: 300;
-    font-family: "Open Sans", sans-serif;
-}
+    .form-signin .checkbox {
+        font-weight: normal;
+        color: #b6b6b6;
+        font-weight: 300;
+        font-family: "Open Sans", sans-serif;
+    }
 
-.form-signin .form-control {
-    position: relative;
-    font-size: 16px;
-    height: auto;
-    padding: 10px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
+    .form-signin .form-control {
+        position: relative;
+        font-size: 16px;
+        height: auto;
+        padding: 10px;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+    }
 
-.form-signin .form-control:focus {
-    z-index: 2;
-}
+        .form-signin .form-control:focus {
+            z-index: 2;
+        }
 
-.form-signin input[type="text"],
-.form-signin input[type="password"] {
-    margin-bottom: 15px;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border: 1px solid #eaeaea;
-    box-shadow: none;
-    font-size: 12px;
-}
+    .form-signin input[type="text"],
+    .form-signin input[type="password"] {
+        margin-bottom: 15px;
+        border-radius: 5px;
+        -webkit-border-radius: 5px;
+        border: 1px solid #eaeaea;
+        box-shadow: none;
+        font-size: 12px;
+    }
 
-.form-signin .btn-login {
-    background: #f67a6e;
-    color: #fff;
-    text-transform: uppercase;
-    font-weight: 300;
-    font-family: "Open Sans", sans-serif;
-    box-shadow: 0 4px #e56b60;
-    margin-bottom: 20px;
-}
+    .form-signin .btn-login {
+        background: #f67a6e;
+        color: #fff;
+        text-transform: uppercase;
+        font-weight: 300;
+        font-family: "Open Sans", sans-serif;
+        box-shadow: 0 4px #e56b60;
+        margin-bottom: 20px;
+    }
 
-.form-signin p {
-    text-align: center;
-    color: #b6b6b6;
-    font-size: 16px;
-    font-weight: 300;
-}
+    .form-signin p {
+        text-align: center;
+        color: #b6b6b6;
+        font-size: 16px;
+        font-weight: 300;
+    }
 
-.form-signin a {
-    color: #41cac0;
-}
+    .form-signin a {
+        color: #41cac0;
+    }
 
-.form-signin a:hover {
-    color: #b6b6b6;
-}
+        .form-signin a:hover {
+            color: #b6b6b6;
+        }
 
 .login-wrap {
     padding: 20px;
@@ -138,33 +138,33 @@ a:focus {
     margin-bottom: 15px;
 }
 
-.login-social-link a {
-    color: #fff;
-    padding: 15px 28px;
-    border-radius: 4px;
-}
+    .login-social-link a {
+        color: #fff;
+        padding: 15px 28px;
+        border-radius: 4px;
+    }
 
-.login-social-link a:hover {
-    color: #fff;
-}
+        .login-social-link a:hover {
+            color: #fff;
+        }
 
-.login-social-link a i {
-    font-size: 20px;
-    padding-right: 10px;
-}
+        .login-social-link a i {
+            font-size: 20px;
+            padding-right: 10px;
+        }
 
-.login-social-link a.facebook {
-    background: #5193ea;
-    margin-right: 22px;
-    box-shadow: 0 4px #2775e2;
-    float: left;
-}
+        .login-social-link a.facebook {
+            background: #5193ea;
+            margin-right: 22px;
+            box-shadow: 0 4px #2775e2;
+            float: left;
+        }
 
-.login-social-link a.twitter {
-    background: #44ccfe;
-    box-shadow: 0 4px #2bb4e8;
-    float: left;
-}
+        .login-social-link a.twitter {
+            background: #44ccfe;
+            box-shadow: 0 4px #2bb4e8;
+            float: left;
+        }
 
 /*sidebar navigation*/
 
@@ -176,17 +176,17 @@ a:focus {
     overflow-y: scroll;
 }
 
-#sidebar ul li {
-    position: relative;
-}
+    #sidebar ul li {
+        position: relative;
+    }
 
-#sidebar .sub-menu>.sub li {
-    padding-left: 32px;
-}
+    #sidebar .sub-menu > .sub li {
+        padding-left: 32px;
+    }
 
-#sidebar .sub-menu>.sub li:last-child {
-    padding-bottom: 10px;
-}
+        #sidebar .sub-menu > .sub li:last-child {
+            padding-bottom: 10px;
+        }
 
 /*LEFT NAVIGATION ICON*/
 .dcjq-icon {
@@ -208,7 +208,6 @@ a:focus {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
 }
-
 /*---*/
 
 .nav-collapse.collapse {
@@ -225,14 +224,14 @@ ul.sidebar-menu {
     margin-top: 75px;
 }
 
-#sidebar>ul>li>ul.sub {
+#sidebar > ul > li > ul.sub {
     display: none;
 }
 
-#sidebar>ul>li.active>ul.sub,
-#sidebar>ul>li>ul.sub>li>a {
-    display: block;
-}
+    #sidebar > ul > li.active > ul.sub,
+    #sidebar > ul > li > ul.sub > li > a {
+        display: block;
+    }
 
 ul.sidebar-menu li ul.sub li {
     background: #35404d;
@@ -241,34 +240,34 @@ ul.sidebar-menu li ul.sub li {
     margin-right: 0;
 }
 
-ul.sidebar-menu li ul.sub li:last-child {
-    border-radius: 0 0 4px 4px;
-    -webkit-border-radius: 0 0 4px 4px;
-}
+    ul.sidebar-menu li ul.sub li:last-child {
+        border-radius: 0 0 4px 4px;
+        -webkit-border-radius: 0 0 4px 4px;
+    }
 
-ul.sidebar-menu li ul.sub li a {
-    font-size: 12px;
-    padding: 6px 0;
-    line-height: 35px;
-    height: 35px;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    color: #aeb2b7;
-}
+    ul.sidebar-menu li ul.sub li a {
+        font-size: 12px;
+        padding: 6px 0;
+        line-height: 35px;
+        height: 35px;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+        color: #aeb2b7;
+    }
 
-ul.sidebar-menu li ul.sub li a:hover,
-ul.sidebar-menu li ul.sub li.active a {
-    color: #ff6c60;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    display: block;
-}
+        ul.sidebar-menu li ul.sub li a:hover,
+        ul.sidebar-menu li ul.sub li.active a {
+            color: #ff6c60;
+            -webkit-transition: all 0.3s ease;
+            -moz-transition: all 0.3s ease;
+            -o-transition: all 0.3s ease;
+            -ms-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+            display: block;
+        }
 
 ul.sidebar-menu li {
     /*line-height: 20px !important;*/
@@ -277,57 +276,56 @@ ul.sidebar-menu li {
     margin-right: 10px;
 }
 
-ul.sidebar-menu li.sub-menu {
-    line-height: 15px;
-}
+    ul.sidebar-menu li.sub-menu {
+        line-height: 15px;
+    }
 
-ul.sidebar-menu li a span {
-    display: inline-block;
-}
+    ul.sidebar-menu li a span {
+        display: inline-block;
+    }
 
-ul.sidebar-menu li a {
-    color: #aeb2b7;
-    text-decoration: none;
-    display: block;
-    padding: 15px 0 15px 10px;
-    font-size: 12px;
-    outline: none;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
+    ul.sidebar-menu li a {
+        color: #aeb2b7;
+        text-decoration: none;
+        display: block;
+        padding: 15px 0 15px 10px;
+        font-size: 12px;
+        outline: none;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
 
-ul.sidebar-menu li a.active,
-ul.sidebar-menu li a:hover,
-ul.sidebar-menu li a:focus {
-    background: #35404d;
-    color: #fff;
-    display: block;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
+        ul.sidebar-menu li a.active,
+        ul.sidebar-menu li a:hover,
+        ul.sidebar-menu li a:focus {
+            background: #35404d;
+            color: #fff;
+            display: block;
+            border-radius: 4px;
+            -webkit-border-radius: 4px;
+            -webkit-transition: all 0.3s ease;
+            -moz-transition: all 0.3s ease;
+            -o-transition: all 0.3s ease;
+            -ms-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+        }
 
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
+        ul.sidebar-menu li a i {
+            font-size: 15px;
+            padding-right: 6px;
+        }
 
-ul.sidebar-menu li a i {
-    font-size: 15px;
-    padding-right: 6px;
-}
+        ul.sidebar-menu li a:hover i,
+        ul.sidebar-menu li a:focus i {
+            color: #ff6c60;
+        }
 
-ul.sidebar-menu li a:hover i,
-ul.sidebar-menu li a:focus i {
-    color: #ff6c60;
-}
-
-ul.sidebar-menu li a.active i {
-    color: #ff6c60;
-}
+        ul.sidebar-menu li a.active i {
+            color: #ff6c60;
+        }
 
 .mail-info,
 .mail-info:hover {
@@ -354,10 +352,10 @@ ul.sidebar-menu li a.active i {
     z-index: 1302;
 }
 
-.header .top-menu .dropdown-toggle:after {
-    border: none;
-    display: none;
-}
+    .header .top-menu .dropdown-toggle:after {
+        border: none;
+        display: none;
+    }
 
 .white-bg {
     background: #fff;
@@ -379,20 +377,20 @@ a.logo {
     text-transform: uppercase;
 }
 
-a.logo:hover,
-a.logo:focus {
-    text-decoration: none;
-    outline: none;
-}
+    a.logo:hover,
+    a.logo:focus {
+        text-decoration: none;
+        outline: none;
+    }
 
-a.logo span {
-    color: #ff6c60;
-}
+    a.logo span {
+        color: #ff6c60;
+    }
 
 /*notification*/
 
-#top_menu .nav>li,
-ul.top-menu>li {
+#top_menu .nav > li,
+ul.top-menu > li {
     float: left;
 }
 
@@ -402,19 +400,19 @@ ul.top-menu>li {
     margin-left: 92px;
 }
 
-.notify-row .notification span.label {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    padding: 5px;
-    text-align: center;
-    color: #fff;
-    border-radius: 2px;
-    margin-right: 5px;
-    line-height: 12px;
-}
+    .notify-row .notification span.label {
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        padding: 5px;
+        text-align: center;
+        color: #fff;
+        border-radius: 2px;
+        margin-right: 5px;
+        line-height: 12px;
+    }
 
-ul.top-menu>li>a {
+ul.top-menu > li > a {
     color: #666666;
     font-size: 16px;
     border-radius: 4px;
@@ -424,16 +422,16 @@ ul.top-menu>li>a {
     margin-right: 15px;
 }
 
-ul.top-menu>li>a:hover,
-ul.top-menu>li>a:focus {
-    border: 1px solid #f0f0f8 !important;
-    background-color: #fff !important;
-    border-color: #f0f0f8 !important;
-    text-decoration: none;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    color: #2e2e2e !important;
-}
+    ul.top-menu > li > a:hover,
+    ul.top-menu > li > a:focus {
+        border: 1px solid #f0f0f8 !important;
+        background-color: #fff !important;
+        border-color: #f0f0f8 !important;
+        text-decoration: none;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        color: #2e2e2e !important;
+    }
 
 .notify-row .badge {
     position: absolute;
@@ -445,33 +443,36 @@ ul.top-menu>li>a:focus {
 }
 
 .dropdown-menu.extended {
-    max-width: 300px !important;
-    min-width: 160px !important;
+    max-width: 480px !important;
+    min-width: 380px !important;
     top: 42px;
-    width: 235px !important;
     padding: 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
     border: none !important;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-
-    /* Safari and Chrome */
-    .dropdown-menu.extended {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
+    .dropdown-menu.extended li {
+        padding: 0 !important;
     }
+
+        .dropdown-menu.extended li p {
+            /* background-color: #b2bcee;
+    color: #000; */
+            margin: 0;
+            padding: 10px 0 10px 10px;
+            font-size: 1.2em;
+            /* border-radius: 4px 4px 0px 0px; */
+            /* -webkit-border-radius: 4px 4px 0px 0px; */
+        }
+
+.badge-noti {
+    z-index: 100;
+    color: red;
+    border-radius: 30px;
 }
 
-.dropdown-menu.extended li p {
-    background-color: #f1f2f7;
-    color: #666666;
-    margin: 0;
-    padding: 10px;
-    font-size: 14px;
-    border-radius: 4px 4px 0px 0px;
-    -webkit-border-radius: 4px 4px 0px 0px;
+.dropdown-menu.extended li p.gray {
+    background-color: #ccc;
+    color: #fff;
 }
 
 .dropdown-menu.extended li p.green {
@@ -491,7 +492,7 @@ ul.top-menu>li>a:focus {
 
 .dropdown-menu.extended li a {
     border-bottom: 1px solid #ebebeb !important;
-    font-size: 12px;
+    font-size: 1.2em;
     list-style: none;
 }
 
@@ -501,10 +502,10 @@ ul.top-menu>li>a:focus {
     display: inline-block;
 }
 
-.dropdown-menu.extended li a:hover {
-    background-color: #f7f8f9 !important;
-    color: #2e2e2e;
-}
+    .dropdown-menu.extended li a:hover {
+        background-color: #f7f8f9 !important;
+        color: #2e2e2e;
+    }
 
 .dropdown-menu.tasks-bar .task-info .desc {
     font-size: 13px;
@@ -538,18 +539,18 @@ ul.top-menu>li>a:focus {
     padding-left: 50px;
 }
 
-.dropdown-menu.inbox li a .subject .from {
-    font-size: 12px;
-    font-weight: 600;
-}
+    .dropdown-menu.inbox li a .subject .from {
+        font-size: 12px;
+        font-weight: 600;
+    }
 
-.dropdown-menu.inbox li a .subject .time {
-    font-size: 11px;
-    font-style: italic;
-    font-weight: bold;
-    position: absolute;
-    right: 5px;
-}
+    .dropdown-menu.inbox li a .subject .time {
+        font-size: 11px;
+        font-style: italic;
+        font-weight: bold;
+        position: absolute;
+        right: 5px;
+    }
 
 .dropdown-menu.inbox li a .message {
     display: block !important;
@@ -561,64 +562,64 @@ ul.top-menu>li>a:focus {
     margin-top: 7px;
 }
 
-.top-nav ul.top-menu>li .dropdown-menu.logout {
-    width: 268px !important;
-}
+    .top-nav ul.top-menu > li .dropdown-menu.logout {
+        width: 268px !important;
+    }
 
-.top-nav li.dropdown .dropdown-menu {
-    float: right;
-    right: 0;
-    left: auto;
-}
+    .top-nav li.dropdown .dropdown-menu {
+        float: right;
+        right: 0;
+        left: auto;
+    }
 
-.dropdown-menu.extended.logout>li {
+.dropdown-menu.extended.logout > li {
     float: left;
     text-align: center;
     width: 33.3%;
 }
 
-.dropdown-menu.extended.logout>li:last-child {
-    float: left;
-    text-align: center;
-    width: 100%;
-    background: #a9d96c;
-    border-radius: 0 0 3px 3px;
-}
+    .dropdown-menu.extended.logout > li:last-child {
+        float: left;
+        text-align: center;
+        width: 100%;
+        background: #a9d96c;
+        border-radius: 0 0 3px 3px;
+    }
 
-.dropdown-menu.extended.logout>li:last-child>a,
-.dropdown-menu.extended.logout>li:last-child>a:hover {
-    color: #fff;
-    border-bottom: none !important;
-    text-transform: uppercase;
-}
+        .dropdown-menu.extended.logout > li:last-child > a,
+        .dropdown-menu.extended.logout > li:last-child > a:hover {
+            color: #fff;
+            border-bottom: none !important;
+            text-transform: uppercase;
+        }
 
-.dropdown-menu.extended.logout>li:last-child>a:hover>i {
-    color: #fff;
-}
+            .dropdown-menu.extended.logout > li:last-child > a:hover > i {
+                color: #fff;
+            }
 
-.dropdown-menu.extended.logout>li>a {
-    color: #a4abbb;
-    border-bottom: none !important;
-}
+    .dropdown-menu.extended.logout > li > a {
+        color: #a4abbb;
+        border-bottom: none !important;
+    }
 
-.full-width .dropdown-menu.extended.logout>li>a:hover {
+.full-width .dropdown-menu.extended.logout > li > a:hover {
     background: none !important;
     color: #50c8ea !important;
 }
 
-.dropdown-menu.extended.logout>li>a:hover {
+.dropdown-menu.extended.logout > li > a:hover {
     background: none !important;
 }
 
-.dropdown-menu.extended.logout>li>a:hover i {
-    color: #50c8ea;
-}
+    .dropdown-menu.extended.logout > li > a:hover i {
+        color: #50c8ea;
+    }
 
-.dropdown-menu.extended.logout>li>a i {
+.dropdown-menu.extended.logout > li > a i {
     font-size: 17px;
 }
 
-.dropdown-menu.extended.logout>li>a>i {
+.dropdown-menu.extended.logout > li > a > i {
     display: block;
 }
 
@@ -627,7 +628,7 @@ ul.top-menu>li>a:focus {
     color: #555555;
 }
 
-.top-nav ul.top-menu>li>a {
+.top-nav ul.top-menu > li > a {
     border: 1px solid #eeeeee;
     border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -636,16 +637,16 @@ ul.top-menu>li>a:focus {
     margin-right: 0;
 }
 
-.top-nav ul.top-menu>li {
+.top-nav ul.top-menu > li {
     margin-left: 10px;
     display: inherit;
 }
 
-.top-nav ul.top-menu>li>a:hover,
-.top-nav ul.top-menu>li>a:focus {
-    border: 1px solid #f1f2f7;
-    background: #f1f2f7;
-}
+    .top-nav ul.top-menu > li > a:hover,
+    .top-nav ul.top-menu > li > a:focus {
+        border: 1px solid #f1f2f7;
+        background: #f1f2f7;
+    }
 
 .top-nav .dropdown-menu.extended.logout {
     top: 50px;
@@ -656,7 +657,7 @@ ul.top-menu>li>a:focus {
     border-top-color: #a4aaba;
 }
 
-.top-nav ul.top-menu>li>a:hover .caret {
+.top-nav ul.top-menu > li > a:hover .caret {
     border-bottom-color: #000;
     border-top-color: #000;
 }
@@ -735,19 +736,19 @@ ul.top-menu>li>a:focus {
     color: #000;
 }
 
-.search:focus {
-    margin-top: 5px;
-    width: 180px;
-    border: 1px solid #f0f0f8;
-    box-shadow: none;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    color: #c8c8c8;
-    font-weight: 300;
-}
+    .search:focus {
+        margin-top: 5px;
+        width: 180px;
+        border: 1px solid #f0f0f8;
+        box-shadow: none;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+        color: #c8c8c8;
+        font-weight: 300;
+    }
 
 /*--sidebar toggle---*/
 
@@ -757,13 +758,13 @@ ul.top-menu>li>a:focus {
     margin-top: 20px;
 }
 
-.sidebar-toggle-box .fa-bars {
-    cursor: pointer;
-    display: inline-block;
-    font-size: 20px;
-}
+    .sidebar-toggle-box .fa-bars {
+        cursor: pointer;
+        display: inline-block;
+        font-size: 20px;
+    }
 
-.sidebar-closed>#sidebar>ul {
+.sidebar-closed > #sidebar > ul {
     display: none;
 }
 
@@ -792,16 +793,16 @@ ul.top-menu>li>a:focus {
     float: right;
 }
 
-.state-overview .value h1,
-.state-overview .value p {
-    margin: 0;
-    padding: 0;
-    color: #c6cad6;
-}
+    .state-overview .value h1,
+    .state-overview .value p {
+        margin: 0;
+        padding: 0;
+        color: #c6cad6;
+    }
 
-.state-overview .value h1 {
-    font-weight: 300;
-}
+    .state-overview .value h1 {
+        font-weight: 300;
+    }
 
 .state-overview .symbol i {
     color: #fff;
@@ -858,47 +859,47 @@ ul.top-menu>li>a:focus {
     border-bottom: 1px solid #c9cdd7;
 }
 
-.custom-bar-chart .bar {
-    height: 100%;
-    position: relative;
-    width: 4.3%;
-    margin: 0px 2%;
-    float: left;
-    text-align: center;
-    -webkit-border-radius: 5px 5px 0 0;
-    -moz-border-radius: 5px 5px 0 0x;
-    border-radius: 5px 5px 0 0;
-    z-index: 10;
-}
+    .custom-bar-chart .bar {
+        height: 100%;
+        position: relative;
+        width: 4.3%;
+        margin: 0px 2%;
+        float: left;
+        text-align: center;
+        -webkit-border-radius: 5px 5px 0 0;
+        -moz-border-radius: 5px 5px 0 0x;
+        border-radius: 5px 5px 0 0;
+        z-index: 10;
+    }
 
-.custom-bar-chart .bar .title {
-    position: absolute;
-    bottom: -30px;
-    width: 100%;
-    text-align: center;
-    font-size: 12px;
-}
+        .custom-bar-chart .bar .title {
+            position: absolute;
+            bottom: -30px;
+            width: 100%;
+            text-align: center;
+            font-size: 12px;
+        }
 
-.custom-bar-chart .bar .value {
-    position: absolute;
-    bottom: 0;
-    background: #bfc2cd;
-    color: #bfc2cd;
-    width: 100%;
-    -webkit-border-radius: 5px 5px 0 0;
-    -moz-border-radius: 5px 5px 0 0;
-    border-radius: 5px 5px 0 0;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
+        .custom-bar-chart .bar .value {
+            position: absolute;
+            bottom: 0;
+            background: #bfc2cd;
+            color: #bfc2cd;
+            width: 100%;
+            -webkit-border-radius: 5px 5px 0 0;
+            -moz-border-radius: 5px 5px 0 0;
+            border-radius: 5px 5px 0 0;
+            -webkit-transition: all 0.3s ease;
+            -moz-transition: all 0.3s ease;
+            -ms-transition: all 0.3s ease;
+            -o-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+        }
 
-.custom-bar-chart .bar .value:hover {
-    background: #e8403f;
-    color: #fff;
-}
+            .custom-bar-chart .bar .value:hover {
+                background: #e8403f;
+                color: #fff;
+            }
 
 .y-axis {
     color: #555555;
@@ -907,23 +908,23 @@ ul.top-menu>li>a:focus {
     width: 100%;
 }
 
-.y-axis li {
-    border-top: 1px dashed #dbdce0;
-    display: block;
-    height: 58px;
-    width: 100%;
-}
+    .y-axis li {
+        border-top: 1px dashed #dbdce0;
+        display: block;
+        height: 58px;
+        width: 100%;
+    }
 
-.y-axis li:last-child {
-    border-top: none;
-}
+        .y-axis li:last-child {
+            border-top: none;
+        }
 
-.y-axis li span {
-    display: block;
-    margin: -10px 0 0 -25px;
-    padding: 0 10px;
-    width: 40px;
-}
+        .y-axis li span {
+            display: block;
+            margin: -10px 0 0 -25px;
+            padding: 0 10px;
+            width: 40px;
+        }
 
 .y-axis {
     color: #555555;
@@ -937,13 +938,13 @@ ul.top-menu>li>a:focus {
     width: 100%;
 }
 
-.chart .heading {
-    text-align: left;
-}
+    .chart .heading {
+        text-align: left;
+    }
 
-.chart .heading span {
-    display: block;
-}
+        .chart .heading span {
+            display: block;
+        }
 
 .card.green-chart .chart-tittle {
     font-size: 16px;
@@ -961,7 +962,8 @@ ul.top-menu>li>a:focus {
     display: inline-block;
 }
 
-.chart-tittle .title {}
+.chart-tittle .title {
+}
 
 .card.green-chart .chart-tittle .value {
     float: right;
@@ -978,32 +980,32 @@ ul.top-menu>li>a:focus {
     color: #fff;
 }
 
-.card.terques-chart .chart-tittle .value {
-    float: right;
-    color: #fff;
-}
+    .card.terques-chart .chart-tittle .value {
+        float: right;
+        color: #fff;
+    }
 
-.card.terques-chart .chart-tittle .value a {
-    color: #fff;
-    font-size: 12px;
-}
+        .card.terques-chart .chart-tittle .value a {
+            color: #fff;
+            font-size: 12px;
+        }
 
-.card.terques-chart .chart-tittle .value a:hover,
-.card.terques-chart .chart-tittle .value a.active {
-    color: #55f2e7;
-    font-size: 12px;
-}
+            .card.terques-chart .chart-tittle .value a:hover,
+            .card.terques-chart .chart-tittle .value a.active {
+                color: #55f2e7;
+                font-size: 12px;
+            }
 
-.card.terques-chart .chart-tittle {
-    font-size: 16px;
-    padding: 15px;
-    display: inline-block;
-    font-weight: normal;
-    background: #39b7ac;
-    width: 100%;
-    -webkit-border-radius: 0px 0px 4px 4px;
-    border-radius: 0px 0px 4px 4px;
-}
+    .card.terques-chart .chart-tittle {
+        font-size: 16px;
+        padding: 15px;
+        display: inline-block;
+        font-weight: normal;
+        background: #39b7ac;
+        width: 100%;
+        -webkit-border-radius: 0px 0px 4px 4px;
+        border-radius: 0px 0px 4px 4px;
+    }
 
 .inline-block {
     display: inline-block;
@@ -1012,7 +1014,7 @@ ul.top-menu>li>a:focus {
 /**/
 
 .card-body.chart-texture {
-    background: url("/BackendScript/img/chart-texture.jpg");
+    background: url("../img/chart-texture.jpg");
     -webkit-border-radius: 4px 4px 0px 0px;
     border-radius: 4px 4px 0px 0px;
 }
@@ -1025,10 +1027,10 @@ ul.top-menu>li>a:focus {
     margin-bottom: 5px;
 }
 
-.task-thumb img {
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-}
+    .task-thumb img {
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+    }
 
 .task-thumb-details {
     display: inline-block;
@@ -1039,44 +1041,44 @@ ul.top-menu>li>a:focus {
     float: left;
 }
 
-.task-thumb-details h1,
-.task-thumb-details h1 a,
-.task-progress h1,
-.task-progress h1 a {
-    color: #39b5aa;
-    font-size: 18px;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-}
+    .task-thumb-details h1,
+    .task-thumb-details h1 a,
+    .task-progress h1,
+    .task-progress h1 a {
+        color: #39b5aa;
+        font-size: 18px;
+        margin: 0;
+        padding: 0;
+        font-weight: 400;
+    }
 
-.task-thumb-details p,
-.task-progress p {
-    padding-top: 5px;
-    color: #a4aaba;
-    margin-bottom: 0;
-}
+    .task-thumb-details p,
+    .task-progress p {
+        padding-top: 5px;
+        color: #a4aaba;
+        margin-bottom: 0;
+    }
 
 .personal-task tbody tr td {
     padding: 11px 15px;
     border-color: #eeeff1;
 }
 
-.personal-task tbody tr td i {
-    font-size: 20px;
-    color: #c7cbd4;
-}
+    .personal-task tbody tr td i {
+        font-size: 20px;
+        color: #c7cbd4;
+    }
 
-.personal-task.table-hover>tbody>tr:hover>td,
-.table-hover>tbody>tr:hover>th {
+.personal-task.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
     background-color: #f7f8fc;
 }
 
-.personal-task.table-hover>tbody>tr:hover>td i {
-    color: #39b5aa;
-}
+    .personal-task.table-hover > tbody > tr:hover > td i {
+        color: #39b5aa;
+    }
 
-.personal-task>tbody>tr>td:last-child {
+.personal-task > tbody > tr > td:last-child {
     text-align: right;
 }
 
@@ -1089,14 +1091,14 @@ ul.top-menu>li>a:focus {
     float: right;
 }
 
-.task-option select {
-    height: 35px;
-    border: 1px solid #eaeaea;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    padding: 8px;
-    color: #a4abbb;
-}
+    .task-option select {
+        height: 35px;
+        border: 1px solid #eaeaea;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        padding: 8px;
+        color: #a4abbb;
+    }
 
 .progress-panel {
     padding-bottom: 5px;
@@ -1145,20 +1147,20 @@ ul.top-menu>li>a:focus {
     width: 100%;
 }
 
-.timeline .card-body {
-    padding: 14px;
-}
+    .timeline .card-body {
+        padding: 14px;
+    }
 
-.timeline:before {
-    background-color: #c7cbd6;
-    bottom: 0px;
-    content: "";
-    left: 50%;
-    position: absolute;
-    top: 0;
-    width: 2px;
-    z-index: 0;
-}
+    .timeline:before {
+        background-color: #c7cbd6;
+        bottom: 0px;
+        content: "";
+        left: 50%;
+        position: absolute;
+        top: 0;
+        width: 2px;
+        z-index: 0;
+    }
 
 h3.timeline-title {
     margin: 0;
@@ -1190,19 +1192,19 @@ h3.timeline-title {
     width: 50%;
 }
 
-.timeline-desk h1 {
-    font-size: 16px;
-    font-weight: 300;
-    margin: 0 0 5px;
-}
+    .timeline-desk h1 {
+        font-size: 16px;
+        font-weight: 300;
+        margin: 0 0 5px;
+    }
 
-.timeline-desk .card {
-    /*display: block;*/
-    margin-left: 25px;
-    position: relative;
-    text-align: left;
-    background: #f4f4f4;
-}
+    .timeline-desk .card {
+        /*display: block;*/
+        margin-left: 25px;
+        position: relative;
+        text-align: left;
+        background: #f4f4f4;
+    }
 
 .timeline-item .timeline-desk .arrow {
     border-bottom: 8px solid transparent;
@@ -1250,30 +1252,30 @@ h3.timeline-title {
     text-transform: uppercase;
 }
 
-.timeline-desk h1.red,
-.timeline-desk span a.red {
-    color: #ef6f66;
-}
+    .timeline-desk h1.red,
+    .timeline-desk span a.red {
+        color: #ef6f66;
+    }
 
-.timeline-desk h1.green,
-.timeline-desk span a.green {
-    color: #39b6ae;
-}
+    .timeline-desk h1.green,
+    .timeline-desk span a.green {
+        color: #39b6ae;
+    }
 
-.timeline-desk h1.blue,
-.timeline-desk span a.blue {
-    color: #56c9f5;
-}
+    .timeline-desk h1.blue,
+    .timeline-desk span a.blue {
+        color: #56c9f5;
+    }
 
-.timeline-desk h1.purple,
-.timeline-desk span a.purple {
-    color: #8074c6;
-}
+    .timeline-desk h1.purple,
+    .timeline-desk span a.purple {
+        color: #8074c6;
+    }
 
-.timeline-desk h1.light-green,
-.timeline-desk span a.light-green {
-    color: #a8d76f;
-}
+    .timeline-desk h1.light-green,
+    .timeline-desk span a.light-green {
+        color: #a8d76f;
+    }
 
 .timeline .timeline-icon.red {
     background: #ef6f66;
@@ -1362,10 +1364,10 @@ h3.timeline-title {
     margin-top: 20px;
 }
 
-.timeline-desk .album a {
-    margin-right: 5px;
-    float: left;
-}
+    .timeline-desk .album a {
+        margin-right: 5px;
+        float: left;
+    }
 
 .timeline-desk .notification {
     background: none repeat scroll 0 0 #ffffff;
@@ -1398,31 +1400,31 @@ h3.timeline-title {
     line-height: 50px;
 }
 
-.revenue-head span {
-    background: #e56155;
-    padding: 16px;
-    -webkit-border-radius: 4px 0px 0px 0px;
-    border-radius: 4px 0px 0px 0px;
-}
+    .revenue-head span {
+        background: #e56155;
+        padding: 16px;
+        -webkit-border-radius: 4px 0px 0px 0px;
+        border-radius: 4px 0px 0px 0px;
+    }
 
-.revenue-head span i {
-    font-size: 18px;
-}
+        .revenue-head span i {
+            font-size: 18px;
+        }
 
-.revenue-head h3 {
-    display: inline;
-    padding: 0 10px;
-    font-size: 16px;
-    font-weight: 300;
-}
+    .revenue-head h3 {
+        display: inline;
+        padding: 0 10px;
+        font-size: 16px;
+        font-weight: 300;
+    }
 
-.revenue-head span.rev-combo {
-    background: #e56155;
-    padding: 16px;
-    line-height: normal;
-    -webkit-border-radius: 0px 4px 0px 0px;
-    border-radius: 0px 4px 0px 0px;
-}
+    .revenue-head span.rev-combo {
+        background: #e56155;
+        padding: 16px;
+        line-height: normal;
+        -webkit-border-radius: 0px 4px 0px 0px;
+        border-radius: 0px 4px 0px 0px;
+    }
 
 /*easy pie chart*/
 
@@ -1473,7 +1475,6 @@ h3.timeline-title {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-
     /* Safari and Chrome */
     .card-footer.revenue-foot {
         margin-bottom: -4px;
@@ -1487,51 +1488,51 @@ h3.timeline-title {
     display: inline-flex;
 }
 
-.card-footer.revenue-foot ul li {
-    float: left;
-    width: 33.33%;
-}
+    .card-footer.revenue-foot ul li {
+        float: left;
+        width: 33.33%;
+    }
 
-.card-footer.revenue-foot ul li.first a:hover,
-.card-footer.revenue-foot ul li.first a {
-    /*-webkit-border-radius: 0px 0px 0px 4px;*/
-    border-radius: 0px 0px 0px 4px;
-}
+        .card-footer.revenue-foot ul li.first a:hover,
+        .card-footer.revenue-foot ul li.first a {
+            /*-webkit-border-radius: 0px 0px 0px 4px;*/
+            border-radius: 0px 0px 0px 4px;
+        }
 
-.card-footer.revenue-foot ul li.last a:hover,
-.card-footer.revenue-foot ul li.last a {
-    -webkit-border-radius: 0px 0px 4px 0px;
-    border-radius: 0px 0px 4px 0px;
-    border-right: none;
-}
+        .card-footer.revenue-foot ul li.last a:hover,
+        .card-footer.revenue-foot ul li.last a {
+            -webkit-border-radius: 0px 0px 4px 0px;
+            border-radius: 0px 0px 4px 0px;
+            border-right: none;
+        }
 
-.card-footer.revenue-foot ul li a {
-    display: inline-block;
-    width: 100%;
-    padding: 14px 15px;
-    text-align: center;
-    border-right: 1px solid #d5d8df;
-    color: #000000;
-}
+        .card-footer.revenue-foot ul li a {
+            display: inline-block;
+            width: 100%;
+            padding: 14px 15px;
+            text-align: center;
+            border-right: 1px solid #d5d8df;
+            color: #797979;
+        }
 
-.card-footer.revenue-foot ul li a:hover,
-.card-footer.revenue-foot ul li.active a {
-    background: #fff;
-    position: relative;
-}
+            .card-footer.revenue-foot ul li a:hover,
+            .card-footer.revenue-foot ul li.active a {
+                background: #fff;
+                position: relative;
+            }
 
-.card-footer.revenue-foot ul li a i {
-    color: #c6cad5;
-    display: block;
-    font-size: 16px;
-}
+            .card-footer.revenue-foot ul li a i {
+                color: #c6cad5;
+                display: block;
+                font-size: 16px;
+            }
 
-.card-footer.revenue-foot ul li a:hover i,
-.card-footer.revenue-foot ul li.active a i {
-    color: #ff6c60;
-    display: block;
-    font-size: 16px;
-}
+            .card-footer.revenue-foot ul li a:hover i,
+            .card-footer.revenue-foot ul li.active a i {
+                color: #ff6c60;
+                display: block;
+                font-size: 16px;
+            }
 
 /*flatlab carousel model*/
 
@@ -1544,14 +1545,14 @@ h3.timeline-title {
     position: relative;
 }
 
-.flat-carousal h1 {
-    text-align: center;
-    font-size: 16px;
-    margin: 30px 20px;
-    line-height: 20px;
-    font-weight: 300;
-    font-style: italic;
-}
+    .flat-carousal h1 {
+        text-align: center;
+        font-size: 16px;
+        margin: 30px 20px;
+        line-height: 20px;
+        font-weight: 300;
+        font-style: italic;
+    }
 
 a.view-all {
     color: #fff;
@@ -1571,33 +1572,33 @@ ul.ft-link {
     padding: 0;
 }
 
-ul.ft-link li {
-    border-right: 1px solid #e6e7ec;
-    display: inline-block;
-    line-height: 30px;
-    margin: 8px 0;
-    text-align: center;
-    width: 24%;
-}
+    ul.ft-link li {
+        border-right: 1px solid #e6e7ec;
+        display: inline-block;
+        line-height: 30px;
+        margin: 8px 0;
+        text-align: center;
+        width: 24%;
+    }
 
-ul.ft-link li a {
-    color: #74829c;
-    text-transform: uppercase;
-    font-size: 12px;
-}
+        ul.ft-link li a {
+            color: #74829c;
+            text-transform: uppercase;
+            font-size: 12px;
+        }
 
-ul.ft-link li a:hover,
-ul.ft-link li.active a {
-    color: #58c9f3;
-}
+            ul.ft-link li a:hover,
+            ul.ft-link li.active a {
+                color: #58c9f3;
+            }
 
-ul.ft-link li:last-child {
-    border-right: none;
-}
+        ul.ft-link li:last-child {
+            border-right: none;
+        }
 
-ul.ft-link li a i {
-    display: block;
-}
+        ul.ft-link li a i {
+            display: block;
+        }
 
 #owl-demo .item img {
     display: block;
@@ -1622,7 +1623,7 @@ ul.ft-link li a i {
 
 .owl-buttons .owl-prev {
     text-indent: -9999px;
-    background: url("/BackendScript/img/left-arrow.png") no-repeat;
+    background: url("../img/left-arrow.png") no-repeat;
     width: 6px;
     height: 10px;
     display: inline-block;
@@ -1630,7 +1631,7 @@ ul.ft-link li a i {
 
 .owl-buttons .owl-next {
     text-indent: -9999px;
-    background: url("/BackendScript/img/right-arrow.png") no-repeat;
+    background: url("../img/right-arrow.png") no-repeat;
     width: 6px;
     height: 10px;
     display: inline-block;
@@ -1721,10 +1722,10 @@ ul.ft-link li a i {
     font-weight: 300;
 }
 
-.post-highlight.terques h2 span,
-.post-highlight.terques h2 a {
-    color: #92faf3;
-}
+    .post-highlight.terques h2 span,
+    .post-highlight.terques h2 a {
+        color: #92faf3;
+    }
 
 .post-info h1 strong {
     text-transform: uppercase;
@@ -1736,28 +1737,28 @@ ul.ft-link li a i {
     display: inline-block;
 }
 
-.post-info .desk h3 {
-    font-size: 16px;
-}
+    .post-info .desk h3 {
+        font-size: 16px;
+    }
 
-.post-info .desk.yellow h3 {
-    color: #f8d347;
-}
+    .post-info .desk.yellow h3 {
+        color: #f8d347;
+    }
 
 .post-btn {
     margin-bottom: 1.5rem;
 }
 
-.post-btn a {
-    float: left;
-    margin-right: 8px;
-    font-size: 18px;
-    color: #9a9a9a;
-}
+    .post-btn a {
+        float: left;
+        margin-right: 8px;
+        font-size: 18px;
+        color: #9a9a9a;
+    }
 
-.post-btn a:hover {
-    color: #727272;
-}
+        .post-btn a:hover {
+            color: #727272;
+        }
 
 .pro-thumb {
     text-align: center;
@@ -1767,13 +1768,13 @@ ul.ft-link li a i {
     border: 10px solid rgba(255, 255, 255, 0.4);
 }
 
-.pro-thumb img {
-    text-align: center;
-    width: 112px;
-    height: 112px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+    .pro-thumb img {
+        text-align: center;
+        width: 112px;
+        height: 112px;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+    }
 
 .v-align {
     vertical-align: middle !important;
@@ -1788,41 +1789,41 @@ ul.ft-link li a i {
     text-align: center;
 }
 
-.social-footer ul {
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
+    .social-footer ul {
+        text-align: center;
+        margin: 0;
+        padding: 0;
+    }
 
-.social-footer ul li {
-    display: inline-block;
-    margin: 0 20px;
-}
+        .social-footer ul li {
+            display: inline-block;
+            margin: 0 20px;
+        }
 
-.social-footer ul li a {
-    font-size: 25px;
-    color: #ceced0;
-}
+            .social-footer ul li a {
+                font-size: 25px;
+                color: #ceced0;
+            }
 
-.social-footer ul li a:hover i.fa-facebook,
-.social-footer ul li.active a i.fa-facebook {
-    color: #486eac;
-}
+                .social-footer ul li a:hover i.fa-facebook,
+                .social-footer ul li.active a i.fa-facebook {
+                    color: #486eac;
+                }
 
-.social-footer ul li a:hover i.fa-twitter,
-.social-footer ul li.active a i.fa-twitter {
-    color: #58c9f3;
-}
+                .social-footer ul li a:hover i.fa-twitter,
+                .social-footer ul li.active a i.fa-twitter {
+                    color: #58c9f3;
+                }
 
-.social-footer ul li a:hover i.fa-google-plus,
-.social-footer ul li.active a i.fa-google-plus {
-    color: #4a4a4a;
-}
+                .social-footer ul li a:hover i.fa-google-plus,
+                .social-footer ul li.active a i.fa-google-plus {
+                    color: #4a4a4a;
+                }
 
-.social-footer ul li a:hover i.fa-pinterest,
-.social-footer ul li.active a i.fa-pinterest {
-    color: #d1282d;
-}
+                .social-footer ul li a:hover i.fa-pinterest,
+                .social-footer ul li.active a i.fa-pinterest {
+                    color: #d1282d;
+                }
 
 /*pie chart */
 
@@ -1855,26 +1856,26 @@ ul.ft-link li a i {
     font-weight: 300;
 }
 
-.follower-foot ul {
-    padding: 0;
-    margin: 0;
-}
+    .follower-foot ul {
+        padding: 0;
+        margin: 0;
+    }
 
-.follower-foot ul li {
-    display: inline-block;
-    text-align: center;
-    width: 48%;
-    line-height: normal;
-}
+        .follower-foot ul li {
+            display: inline-block;
+            text-align: center;
+            width: 48%;
+            line-height: normal;
+        }
 
-.follower-foot ul li h5 {
-    margin: 5px 0 0 0;
-    font-size: 14px;
-}
+            .follower-foot ul li h5 {
+                margin: 5px 0 0 0;
+                font-size: 14px;
+            }
 
-.follower-foot ul li p {
-    margin-bottom: 6px;
-}
+            .follower-foot ul li p {
+                margin-bottom: 6px;
+            }
 
 .follower h4 {
     margin: 0 0 10px 0;
@@ -1909,47 +1910,48 @@ ul.ft-link li a i {
     font-weight: 300;
 }
 
-.weather-bg i {
-    font-size: 60px;
-    display: block;
-}
+    .weather-bg i {
+        font-size: 60px;
+        display: block;
+    }
 
-.weather-bg .degree {
-    font-size: 60px;
-}
+    .weather-bg .degree {
+        font-size: 60px;
+    }
 
 .weather-category {
     padding: 15px 0;
     color: #74829c;
 }
 
-.weather-category ul {
-    padding: 0;
-    margin: 0;
-    display: inline-block;
-    width: 100%;
-}
+    .weather-category ul {
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        width: 100%;
+    }
 
-.weather-category ul li {
-    display: inline-block;
-    width: 32%;
-    text-align: center;
-    border-right: 1px solid #e6e6e6;
-    display: inline-block;
-}
+        .weather-category ul li {
+            display: inline-block;
+            width: 32%;
+            text-align: center;
+            border-right: 1px solid #e6e6e6;
+            display: inline-block;
+        }
 
-.weather-category ul li h5 {
-    margin: 0 0 5px 0;
-    text-transform: uppercase;
-    font-weight: 300;
-    font-size: 14px;
-}
+            .weather-category ul li h5 {
+                margin: 0 0 5px 0;
+                text-transform: uppercase;
+                font-weight: 300;
+                font-size: 14px;
+            }
 
-.weather-category ul li a {}
+            .weather-category ul li a {
+            }
 
-.weather-category ul li:last-child {
-    border-right: none;
-}
+            .weather-category ul li:last-child {
+                border-right: none;
+            }
 
 /*fontawesome*/
 
@@ -1970,12 +1972,12 @@ ul.ft-link li a i {
 }
 
 .fontawesome-icon-list a {
-    color: #000000;
+    color: #797979;
 }
 
-.fontawesome-icon-list a:hover {
-    color: #35404d;
-}
+    .fontawesome-icon-list a:hover {
+        color: #35404d;
+    }
 
 .fontawesome-icon-list i {
     font-size: 16px;
@@ -1987,34 +1989,34 @@ ul.ft-link li a i {
     font-size: 19px;
 }
 
-.menu-list h2 {
-    margin-top: 0;
-    font-size: 20px;
-    font-weight: 300;
-}
+    .menu-list h2 {
+        margin-top: 0;
+        font-size: 20px;
+        font-weight: 300;
+    }
 
-.menu-list .col-sm-4,
-.menu-list .col-md-3,
-.menu-list .col-xs-6 {
-    margin-bottom: 10px;
-}
+    .menu-list .col-sm-4,
+    .menu-list .col-md-3,
+    .menu-list .col-xs-6 {
+        margin-bottom: 10px;
+    }
 
-.menu-list .page-header {
-    border-bottom: 1px solid #c9cdd7;
-}
+    .menu-list .page-header {
+        border-bottom: 1px solid #c9cdd7;
+    }
 
-.menu-list a {
-    color: #000000;
-}
+    .menu-list a {
+        color: #797979;
+    }
 
-.menu-list a:hover {
-    color: #35404d;
-}
+        .menu-list a:hover {
+            color: #35404d;
+        }
 
-.menu-list i {
-    font-size: 19px;
-    padding-right: 10px;
-}
+    .menu-list i {
+        font-size: 19px;
+        padding-right: 10px;
+    }
 
 #web-application,
 #text-editor,
@@ -2036,67 +2038,67 @@ ul.ft-link li a i {
     width: 100%;
 }
 
-.mail-box aside {
-    display: table-cell;
-    float: none;
-    height: 100%;
-    padding: 0;
-    vertical-align: top;
-}
+    .mail-box aside {
+        display: table-cell;
+        float: none;
+        height: 100%;
+        padding: 0;
+        vertical-align: top;
+    }
 
-.mail-box .sm-side {
-    width: 25%;
-    background: #e5e8ef;
-    border-radius: 4px 0 0 4px;
-    -webkit-border-radius: 4px 0 0 4px;
-}
+    .mail-box .sm-side {
+        width: 25%;
+        background: #e5e8ef;
+        border-radius: 4px 0 0 4px;
+        -webkit-border-radius: 4px 0 0 4px;
+    }
 
-.mail-box .lg-side {
-    width: 75%;
-    background: #fff;
-    border-radius: 0px 4px 4px 0;
-    -webkit-border-radius: 0px 4px 4px 0;
-}
+    .mail-box .lg-side {
+        width: 75%;
+        background: #fff;
+        border-radius: 0px 4px 4px 0;
+        -webkit-border-radius: 0px 4px 4px 0;
+    }
 
-.mail-box .sm-side .user-head {
-    background: #00a8b3;
-    border-radius: 4px 0px 0px 0;
-    -webkit-border-radius: 4px 0px 0px 0;
-    padding: 10px;
-    color: #fff;
-    min-height: 80px;
-}
+    .mail-box .sm-side .user-head {
+        background: #00a8b3;
+        border-radius: 4px 0px 0px 0;
+        -webkit-border-radius: 4px 0px 0px 0;
+        padding: 10px;
+        color: #fff;
+        min-height: 80px;
+    }
 
 .user-head .inbox-avatar {
     width: 65px;
     float: left;
 }
 
-.user-head .inbox-avatar img {
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-}
+    .user-head .inbox-avatar img {
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+    }
 
 .user-head .user-name {
     display: inline-block;
     margin: 0 0 0 10px;
 }
 
-.user-head .user-name h5 {
-    font-size: 14px;
-    margin-top: 15px;
-    margin-bottom: 0;
-    font-weight: 300;
-}
+    .user-head .user-name h5 {
+        font-size: 14px;
+        margin-top: 15px;
+        margin-bottom: 0;
+        font-weight: 300;
+    }
 
-.user-head .user-name h5 a {
-    color: #fff;
-}
+        .user-head .user-name h5 a {
+            color: #fff;
+        }
 
-.user-head .user-name span a {
-    font-size: 12px;
-    color: #87e2e7;
-}
+    .user-head .user-name span a {
+        font-size: 12px;
+        color: #87e2e7;
+    }
 
 a.mail-dropdown {
     background: #80d3d9;
@@ -2123,10 +2125,10 @@ a.mail-dropdown {
     color: #fff;
 }
 
-.btn-compose:hover {
-    background: #f5675c;
-    color: #fff;
-}
+    .btn-compose:hover {
+        background: #f5675c;
+        color: #fff;
+    }
 
 ul.inbox-nav {
     display: inline-block;
@@ -2145,30 +2147,30 @@ ul.inbox-nav li {
     width: 100%;
 }
 
-ul.inbox-nav li a {
-    color: #6a6a6a;
-    line-height: 45px;
-    width: 100%;
-    display: inline-block;
-    padding: 0 20px;
-}
+    ul.inbox-nav li a {
+        color: #6a6a6a;
+        line-height: 45px;
+        width: 100%;
+        display: inline-block;
+        padding: 0 20px;
+    }
 
-ul.inbox-nav li a:hover,
-ul.inbox-nav li.active a,
-ul.inbox-nav li a:focus {
-    color: #6a6a6a;
-    background: #d5d7de;
-}
+        ul.inbox-nav li a:hover,
+        ul.inbox-nav li.active a,
+        ul.inbox-nav li a:focus {
+            color: #6a6a6a;
+            background: #d5d7de;
+        }
 
-ul.inbox-nav li a i {
-    padding-right: 10px;
-    font-size: 16px;
-    color: #6a6a6a;
-}
+        ul.inbox-nav li a i {
+            padding-right: 10px;
+            font-size: 16px;
+            color: #6a6a6a;
+        }
 
-ul.inbox-nav li a span.label {
-    margin-top: 13px;
-}
+        ul.inbox-nav li a span.label {
+            margin-top: 13px;
+        }
 
 ul.labels-info li h4 {
     padding-left: 15px;
@@ -2183,20 +2185,20 @@ ul.labels-info li {
     margin: 0;
 }
 
-ul.labels-info li a {
-    color: #6a6a6a;
-    border-radius: 0;
-}
+    ul.labels-info li a {
+        color: #6a6a6a;
+        border-radius: 0;
+    }
 
-ul.labels-info li a:hover,
-ul.labels-info li a:focus {
-    color: #6a6a6a;
-    background: #d5d7de;
-}
+        ul.labels-info li a:hover,
+        ul.labels-info li a:focus {
+            color: #6a6a6a;
+            background: #d5d7de;
+        }
 
-ul.labels-info li a i {
-    padding-right: 10px;
-}
+        ul.labels-info li a i {
+            padding-right: 10px;
+        }
 
 .nav.nav-pills.nav-stacked.labels-info p {
     margin-bottom: 0;
@@ -2214,67 +2216,67 @@ ul.labels-info li a i {
     min-height: 80px;
 }
 
-.inbox-head h3 {
-    margin: 0;
-    display: inline-block;
-    padding-top: 6px;
-    font-weight: 300;
-}
+    .inbox-head h3 {
+        margin: 0;
+        display: inline-block;
+        padding-top: 6px;
+        font-weight: 300;
+    }
 
-.inbox-head .sr-input {
-    height: 40px;
-    border: none;
-    box-shadow: none;
-    padding: 0 10px;
-    float: left;
-    border-radius: 4px 0 0 4px;
-    color: #8a8a8a;
-}
+    .inbox-head .sr-input {
+        height: 40px;
+        border: none;
+        box-shadow: none;
+        padding: 0 10px;
+        float: left;
+        border-radius: 4px 0 0 4px;
+        color: #8a8a8a;
+    }
 
-.inbox-head .sr-btn {
-    height: 40px;
-    border: none;
-    background: #00a6b2;
-    color: #fff;
-    padding: 0 20px;
-    border-radius: 0 4px 4px 0;
-    -webkit-border-radius: 0 4px 4px 0;
-}
+    .inbox-head .sr-btn {
+        height: 40px;
+        border: none;
+        background: #00a6b2;
+        color: #fff;
+        padding: 0 20px;
+        border-radius: 0 4px 4px 0;
+        -webkit-border-radius: 0 4px 4px 0;
+    }
 
 .table-inbox {
     border: 1px solid #dee2e6;
     margin-bottom: 0;
 }
 
-.table-inbox tr td {
-    padding: 12px !important;
-}
+    .table-inbox tr td {
+        padding: 12px !important;
+    }
 
-.table-inbox tr td:hover {
-    cursor: pointer;
-}
+        .table-inbox tr td:hover {
+            cursor: pointer;
+        }
 
-.table-inbox tr td .fa-star.inbox-started,
-.table-inbox tr td .fa-star:hover {
-    color: #f78a09;
-}
+        .table-inbox tr td .fa-star.inbox-started,
+        .table-inbox tr td .fa-star:hover {
+            color: #f78a09;
+        }
 
-.table-inbox tr td .fa-star {
-    color: #d5d5d5;
-}
+        .table-inbox tr td .fa-star {
+            color: #d5d5d5;
+        }
 
-.table-inbox tr.unread td {
-    font-weight: 600;
-    background: #f7f7f7;
-}
+    .table-inbox tr.unread td {
+        font-weight: 600;
+        background: #f7f7f7;
+    }
 
 ul.inbox-pagination {
     float: right;
 }
 
-ul.inbox-pagination li {
-    float: left;
-}
+    ul.inbox-pagination li {
+        float: left;
+    }
 
 .mail-option {
     display: inline-block;
@@ -2282,21 +2284,21 @@ ul.inbox-pagination li {
     width: 100%;
 }
 
-.mail-option .chk-all,
-.mail-option .btn-group {
-    margin-right: 5px;
-}
+    .mail-option .chk-all,
+    .mail-option .btn-group {
+        margin-right: 5px;
+    }
 
-.mail-option .chk-all,
-.mail-option .btn-group a.btn {
-    border: 1px solid #e7e7e7;
-    padding: 5px 10px;
-    display: inline-block;
-    background: #fcfcfc;
-    color: #afafaf;
-    border-radius: 3px !important;
-    -webkit-border-radius: 3px !important;
-}
+        .mail-option .chk-all,
+        .mail-option .btn-group a.btn {
+            border: 1px solid #e7e7e7;
+            padding: 5px 10px;
+            display: inline-block;
+            background: #fcfcfc;
+            color: #afafaf;
+            border-radius: 3px !important;
+            -webkit-border-radius: 3px !important;
+        }
 
 .inbox-pagination a.np-btn {
     border: 1px solid #e7e7e7;
@@ -2344,9 +2346,9 @@ ul.inbox-pagination li {
     color: #fff;
 }
 
-.btn-send:hover {
-    background: #009da7;
-}
+    .btn-send:hover {
+        background: #009da7;
+    }
 
 .modal-header h4.modal-title {
     font-weight: 300;
@@ -2370,15 +2372,15 @@ ul.inbox-pagination li {
     margin-bottom: 20px;
 }
 
-.sender-info img {
-    width: 30px;
-    height: 30px;
-}
+    .sender-info img {
+        width: 30px;
+        height: 30px;
+    }
 
 .sender-dropdown {
     background: #eaeaea;
     padding: 0 3px;
-    color: #000000;
+    color: #777;
     font-size: 10px;
 }
 
@@ -2390,35 +2392,35 @@ ul.inbox-pagination li {
     margin-top: 30px;
 }
 
-.attachment-mail ul {
-    width: 100%;
-    display: inline-block;
-    margin-bottom: 30px;
-}
+    .attachment-mail ul {
+        width: 100%;
+        display: inline-block;
+        margin-bottom: 30px;
+    }
 
-.attachment-mail ul li {
-    float: left;
-    width: 150px;
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
+        .attachment-mail ul li {
+            float: left;
+            width: 150px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
 
-.attachment-mail ul li img {
-    width: 100%;
-}
+            .attachment-mail ul li img {
+                width: 100%;
+            }
 
-.attachment-mail ul li span {
-    float: right;
-}
+            .attachment-mail ul li span {
+                float: right;
+            }
 
-.attachment-mail .file-name {
-    float: left;
-}
+    .attachment-mail .file-name {
+        float: left;
+    }
 
-.attachment-mail .links {
-    width: 100%;
-    display: inline-block;
-}
+    .attachment-mail .links {
+        width: 100%;
+        display: inline-block;
+    }
 
 /*404 page*/
 
@@ -2432,42 +2434,42 @@ ul.inbox-pagination li {
     margin-top: 10%;
 }
 
-.error-wrapper .icon-404 {
-    background: url("../img/404_icon.png") no-repeat;
-    width: 289px;
-    height: 274px;
-    display: inline-block;
-    margin-left: 30px;
-}
+    .error-wrapper .icon-404 {
+        background: url("../img/404_icon.png") no-repeat;
+        width: 289px;
+        height: 274px;
+        display: inline-block;
+        margin-left: 30px;
+    }
 
-.error-wrapper h1 {
-    font-size: 90px;
-    font-weight: 300;
-    margin: -50px 0 0 0;
-}
+    .error-wrapper h1 {
+        font-size: 90px;
+        font-weight: 300;
+        margin: -50px 0 0 0;
+    }
 
-.error-wrapper h2 {
-    font-size: 20px;
-    font-weight: 300;
-    margin: 0 0 30px 0;
-}
+    .error-wrapper h2 {
+        font-size: 20px;
+        font-weight: 300;
+        margin: 0 0 30px 0;
+    }
 
-.error-wrapper p,
-.error-wrapper p a {
-    font-size: 18px;
-    font-weight: 300;
-}
+    .error-wrapper p,
+    .error-wrapper p a {
+        font-size: 18px;
+        font-weight: 300;
+    }
 
-.error-wrapper p.page-404 {
-    color: #7dfff7;
-}
+        .error-wrapper p.page-404 {
+            color: #7dfff7;
+        }
 
-.error-wrapper p.page-404 a,
-.error-wrapper p.page-500 a,
-.error-wrapper p.page-404 a:hover,
-.error-wrapper p.page-500 a:hover {
-    color: #fff;
-}
+            .error-wrapper p.page-404 a,
+            .error-wrapper p.page-500 a,
+            .error-wrapper p.page-404 a:hover,
+            .error-wrapper p.page-500 a:hover {
+                color: #fff;
+            }
 
 /*500 page*/
 
@@ -2499,71 +2501,71 @@ ul.inbox-pagination li {
     text-align: center;
 }
 
-.profile-nav .user-heading.round a {
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border: 10px solid rgba(255, 255, 255, 0.3);
-    display: inline-block;
-}
+    .profile-nav .user-heading.round a {
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+        border: 10px solid rgba(255, 255, 255, 0.3);
+        display: inline-block;
+    }
 
-.profile-nav .user-heading a img {
-    width: 112px;
-    height: 112px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+    .profile-nav .user-heading a img {
+        width: 112px;
+        height: 112px;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+    }
 
-.profile-nav .user-heading h1 {
-    font-size: 22px;
-    font-weight: 300;
-    margin-bottom: 5px;
-}
+    .profile-nav .user-heading h1 {
+        font-size: 22px;
+        font-weight: 300;
+        margin-bottom: 5px;
+    }
 
-.profile-nav .user-heading p {
-    font-size: 12px;
-}
+    .profile-nav .user-heading p {
+        font-size: 12px;
+    }
 
 .profile-nav ul {
     margin-top: 1px;
 }
 
-.profile-nav ul>li {
-    border-bottom: 1px solid #ebeae6;
-    margin-top: 0;
-    line-height: 30px;
-    width: 100%;
-    display: inline-block;
-}
+    .profile-nav ul > li {
+        border-bottom: 1px solid #ebeae6;
+        margin-top: 0;
+        line-height: 30px;
+        width: 100%;
+        display: inline-block;
+    }
 
-.profile-nav ul>li:last-child {
-    border-bottom: none;
-}
+        .profile-nav ul > li:last-child {
+            border-bottom: none;
+        }
 
-.profile-nav ul>li>a {
-    border-radius: 0;
-    -webkit-border-radius: 0;
-    color: #89817f;
-    border-left: 5px solid #fff;
-}
+        .profile-nav ul > li > a {
+            border-radius: 0;
+            -webkit-border-radius: 0;
+            color: #89817f;
+            border-left: 5px solid #fff;
+        }
 
-.profile-nav ul>li>a:hover,
-.profile-nav ul>li>a:focus,
-.profile-nav ul li.active a {
-    background: #f8f7f5 !important;
-    border-left: 5px solid #ff766c;
-    color: #89817f !important;
-}
+            .profile-nav ul > li > a:hover,
+            .profile-nav ul > li > a:focus,
+            .profile-nav ul li.active a {
+                background: #f8f7f5 !important;
+                border-left: 5px solid #ff766c;
+                color: #89817f !important;
+            }
 
-.profile-nav ul>li:last-child>a:last-child {
-    border-radius: 0 0 4px 4px;
-    -webkit-border-radius: 0 0 4px 4px;
-}
+        .profile-nav ul > li:last-child > a:last-child {
+            border-radius: 0 0 4px 4px;
+            -webkit-border-radius: 0 0 4px 4px;
+        }
 
-.profile-nav ul>li>a>i {
-    font-size: 16px;
-    padding-right: 10px;
-    color: #bcb3aa;
-}
+        .profile-nav ul > li > a > i {
+            font-size: 16px;
+            padding-right: 10px;
+            color: #bcb3aa;
+        }
 
 .r-activity {
     margin: 6px 0 0;
@@ -2584,13 +2586,13 @@ ul.inbox-pagination li {
     border-top: 1px solid #e7ebee;
 }
 
-.profile-info .card-footer ul li a {
-    color: #7a7a7a;
-}
+    .profile-info .card-footer ul li a {
+        color: #7a7a7a;
+    }
 
-.profile-info .card-footer ul li a:hover {
-    background: #eee;
-}
+        .profile-info .card-footer ul li a:hover {
+            background: #eee;
+        }
 
 .bio-graph-heading {
     background: #41cac0;
@@ -2608,11 +2610,11 @@ ul.inbox-pagination li {
     color: #89817e;
 }
 
-.bio-graph-info h1 {
-    font-size: 22px;
-    font-weight: 300;
-    margin: 0 0 20px;
-}
+    .bio-graph-info h1 {
+        font-size: 22px;
+        font-weight: 300;
+        margin: 0 0 20px;
+    }
 
 .bio-row {
     width: 50%;
@@ -2621,10 +2623,10 @@ ul.inbox-pagination li {
     padding: 0 15px;
 }
 
-.bio-row p span {
-    width: 100px;
-    display: inline-block;
-}
+    .bio-row p span {
+        width: 100px;
+        display: inline-block;
+    }
 
 .bio-chart,
 .bio-desk {
@@ -2639,26 +2641,26 @@ ul.inbox-pagination li {
     width: 60%;
 }
 
-.bio-desk h4 {
-    font-size: 15px;
-    font-weight: 400;
-}
+    .bio-desk h4 {
+        font-size: 15px;
+        font-weight: 400;
+    }
 
-.bio-desk h4.terques {
-    color: #4cc5cd;
-}
+        .bio-desk h4.terques {
+            color: #4cc5cd;
+        }
 
-.bio-desk h4.red {
-    color: #e26b7f;
-}
+        .bio-desk h4.red {
+            color: #e26b7f;
+        }
 
-.bio-desk h4.green {
-    color: #97be4b;
-}
+        .bio-desk h4.green {
+            color: #97be4b;
+        }
 
-.bio-desk h4.purple {
-    color: #caa3da;
-}
+        .bio-desk h4.purple {
+            color: #caa3da;
+        }
 
 .file-pos {
     margin: 6px 0 10px 0;
@@ -2678,15 +2680,15 @@ ul.inbox-pagination li {
     border-bottom: 1px solid #ee7272;
 }
 
-.summary-head h4 {
-    font-weight: 300;
-    text-transform: uppercase;
-    margin-bottom: 5px;
-}
+    .summary-head h4 {
+        font-weight: 300;
+        text-transform: uppercase;
+        margin-bottom: 5px;
+    }
 
-.summary-head p {
-    color: rgba(255, 255, 255, 0.6);
-}
+    .summary-head p {
+        color: rgba(255, 255, 255, 0.6);
+    }
 
 ul.summary-list {
     display: inline-block;
@@ -2695,31 +2697,31 @@ ul.summary-list {
     margin-bottom: 0;
 }
 
-ul.summary-list>li {
-    display: inline-block;
-    width: 19.5%;
-    text-align: center;
-}
+    ul.summary-list > li {
+        display: inline-block;
+        width: 19.5%;
+        text-align: center;
+    }
 
-ul.summary-list>li>a>i {
-    display: block;
-    font-size: 18px;
-    padding-bottom: 5px;
-}
+        ul.summary-list > li > a > i {
+            display: block;
+            font-size: 18px;
+            padding-bottom: 5px;
+        }
 
-ul.summary-list>li>a {
-    padding: 10px 0;
-    display: inline-block;
-    color: #818181;
-}
+        ul.summary-list > li > a {
+            padding: 10px 0;
+            display: inline-block;
+            color: #818181;
+        }
 
-ul.summary-list>li {
-    border-right: 1px solid #eaeaea;
-}
+    ul.summary-list > li {
+        border-right: 1px solid #eaeaea;
+    }
 
-ul.summary-list>li:last-child {
-    border-right: none;
-}
+        ul.summary-list > li:last-child {
+            border-right: none;
+        }
 
 .activity {
     width: 100%;
@@ -2727,97 +2729,97 @@ ul.summary-list>li:last-child {
     margin-bottom: 10px;
 }
 
-.activity.alt {
-    width: 100%;
-    float: right;
-    margin-bottom: 10px;
-}
+    .activity.alt {
+        width: 100%;
+        float: right;
+        margin-bottom: 10px;
+    }
 
-.activity span {
-    float: left;
-}
+    .activity span {
+        float: left;
+    }
 
-.activity.alt span {
-    float: right;
-}
+    .activity.alt span {
+        float: right;
+    }
 
-.activity span,
-.activity.alt span {
-    width: 45px;
-    height: 45px;
-    line-height: 45px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    background: #eee;
-    text-align: center;
-    color: #fff;
-    font-size: 16px;
-}
+    .activity span,
+    .activity.alt span {
+        width: 45px;
+        height: 45px;
+        line-height: 45px;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+        background: #eee;
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+    }
 
-.activity.terques span {
-    background: #8dd7d6;
-}
+    .activity.terques span {
+        background: #8dd7d6;
+    }
 
-.activity.terques h4 {
-    color: #8dd7d6;
-}
+    .activity.terques h4 {
+        color: #8dd7d6;
+    }
 
-.activity.purple span {
-    background: #b984dc;
-}
+    .activity.purple span {
+        background: #b984dc;
+    }
 
-.activity.purple h4 {
-    color: #b984dc;
-}
+    .activity.purple h4 {
+        color: #b984dc;
+    }
 
-.activity.blue span {
-    background: #90b4e6;
-}
+    .activity.blue span {
+        background: #90b4e6;
+    }
 
-.activity.blue h4 {
-    color: #90b4e6;
-}
+    .activity.blue h4 {
+        color: #90b4e6;
+    }
 
-.activity.green span {
-    background: #aec785;
-}
+    .activity.green span {
+        background: #aec785;
+    }
 
-.activity.green h4 {
-    color: #aec785;
-}
+    .activity.green h4 {
+        color: #aec785;
+    }
 
-.activity h4 {
-    margin-top: 0;
-    font-size: 16px;
-}
+    .activity h4 {
+        margin-top: 0;
+        font-size: 16px;
+    }
 
-.activity p {
-    margin-bottom: 0;
-    font-size: 13px;
-}
+    .activity p {
+        margin-bottom: 0;
+        font-size: 13px;
+    }
 
-.activity .activity-desk i,
-.activity.alt .activity-desk i {
-    float: left;
-    font-size: 18px;
-    margin-right: 10px;
-    color: #bebebe;
-}
+    .activity .activity-desk i,
+    .activity.alt .activity-desk i {
+        float: left;
+        font-size: 18px;
+        margin-right: 10px;
+        color: #bebebe;
+    }
 
-.activity .activity-desk {
-    margin-left: 70px;
-    position: relative;
-}
+    .activity .activity-desk {
+        margin-left: 70px;
+        position: relative;
+    }
 
-.activity.alt .activity-desk {
-    margin-right: 70px;
-    position: relative;
-}
+    .activity.alt .activity-desk {
+        margin-right: 70px;
+        position: relative;
+    }
 
-.activity.alt .activity-desk .card {
-    float: right;
-    position: relative;
-}
+        .activity.alt .activity-desk .card {
+            float: right;
+            position: relative;
+        }
 
 .activity-desk .card {
     background: #f4f4f4;
@@ -2859,13 +2861,13 @@ ul.summary-list>li:last-child {
     margin-top: 10px;
 }
 
-.activity-desk .album a {
-    margin-right: 10px;
-}
+    .activity-desk .album a {
+        margin-right: 10px;
+    }
 
-.activity-desk .album a:last-child {
-    margin-right: 0px;
-}
+        .activity-desk .album a:last-child {
+            margin-right: 0px;
+        }
 
 /*invoice*/
 
@@ -2873,10 +2875,10 @@ ul.summary-list>li:last-child {
     margin-bottom: 30px;
 }
 
-.invoice-list h4 {
-    font-weight: 300;
-    font-size: 16px;
-}
+    .invoice-list h4 {
+        font-weight: 300;
+        font-size: 16px;
+    }
 
 .invoice-block {
     text-align: right;
@@ -2903,7 +2905,7 @@ ul.amounts li {
 
 /*panel heading color*/
 
-.card-primary>.card-heading.navyblue {
+.card-primary > .card-heading.navyblue {
     background-color: #2a3542;
     border-color: #2a3542;
     color: #ffffff;
@@ -2946,9 +2948,9 @@ ul.amounts li {
     width: 100%;
 }
 
-.dataTables_filter label input {
-    width: 78%;
-}
+    .dataTables_filter label input {
+        width: 78%;
+    }
 
 .border-top {
     border-top: 1px solid #ddd;
@@ -2962,23 +2964,23 @@ ul.amounts li {
     -webkit-border-radius: 3px;
 }
 
-.dataTables_paginate.paging_bootstrap.pagination li.disabled a {
-    color: #c7c7c7;
-}
+    .dataTables_paginate.paging_bootstrap.pagination li.disabled a {
+        color: #c7c7c7;
+    }
 
-.dataTables_paginate.paging_bootstrap.pagination li a {
-    color: #000000;
-    padding: 5px 10px;
-    display: inline-block;
-}
+    .dataTables_paginate.paging_bootstrap.pagination li a {
+        color: #797979;
+        padding: 5px 10px;
+        display: inline-block;
+    }
 
-.dataTables_paginate.paging_bootstrap.pagination li:hover a,
-.dataTables_paginate.paging_bootstrap.pagination li.active a {
-    color: #000000;
-    background: #eee;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-}
+    .dataTables_paginate.paging_bootstrap.pagination li:hover a,
+    .dataTables_paginate.paging_bootstrap.pagination li.active a {
+        color: #797979;
+        background: #eee;
+        border-radius: 3px;
+        -webkit-border-radius: 3px;
+    }
 
 .dataTables_paginate.paging_bootstrap.pagination {
     float: right;
@@ -3103,20 +3105,20 @@ ul.amounts li {
     margin-top: 10px;
 }
 
-.tab-head .nav-tabs>li>a {
+.tab-head .nav-tabs > li > a {
     border-radius: 0;
     margin-right: 1px;
     color: #fff;
 }
 
-.tab-head .nav-tabs>li.active>a,
-.tab-head .nav-tabs>li>a:hover,
-.tab-head .nav-tabs>li.active>a:hover,
-.tab-head .nav-tabs>li.active>a:focus {
-    background-color: #f1f2f7;
-    border-color: #f1f2f7;
-    color: #000000;
-}
+    .tab-head .nav-tabs > li.active > a,
+    .tab-head .nav-tabs > li > a:hover,
+    .tab-head .nav-tabs > li.active > a:hover,
+    .tab-head .nav-tabs > li.active > a:focus {
+        background-color: #f1f2f7;
+        border-color: #f1f2f7;
+        color: #797979;
+    }
 
 /*general page*/
 
@@ -3141,37 +3143,37 @@ ul.amounts li {
     border-bottom: none;
 }
 
-.tab-bg-dark-navy-blue .nav .nav-link {
-    color: #fff;
-    border: none;
-    border-radius: 0;
-    font-size: 14px;
-}
+    .tab-bg-dark-navy-blue .nav .nav-link {
+        color: #fff;
+        border: none;
+        border-radius: 0;
+        font-size: 14px;
+    }
 
-.tab-bg-dark-navy-blue .nav .nav-link.active {
-    color: #7087a3;
-}
+        .tab-bg-dark-navy-blue .nav .nav-link.active {
+            color: #7087a3;
+        }
 
-.card-heading .nav>li>a,
-.card-heading .nav>li.active>a,
-.card-heading .nav>li.active>a:hover,
-.card-heading .nav>li.active>a:focus {
+.card-heading .nav > li > a,
+.card-heading .nav > li.active > a,
+.card-heading .nav > li.active > a:hover,
+.card-heading .nav > li.active > a:focus {
     border-width: 0;
     border-radius: 0;
 }
 
-.card-heading .nav>li>a {
+.card-heading .nav > li > a {
     color: #fff;
 }
 
-.card-heading .nav>li.active>a,
-.card-heading .nav>li>a:hover {
-    color: #47596f;
-    background: #fff;
-}
+    .card-heading .nav > li.active > a,
+    .card-heading .nav > li > a:hover {
+        color: #47596f;
+        background: #fff;
+    }
 
-.card-heading .nav>li:first-child.active>a,
-.card-heading .nav>li:first-child>a:hover {
+.card-heading .nav > li:first-child.active > a,
+.card-heading .nav > li:first-child > a:hover {
     border-radius: 4px 0 0 0;
     -webkit-border-radius: 4px 0 0 0;
 }
@@ -3180,19 +3182,19 @@ ul.amounts li {
     height: 38px;
 }
 
-.card-heading.tab-right .nav>li:first-child.active>a,
-.tab-right.card-heading .nav>li:first-child>a:hover {
-    border-radius: 0;
-    -webkit-border-radius: 0;
-}
+    .card-heading.tab-right .nav > li:first-child.active > a,
+    .tab-right.card-heading .nav > li:first-child > a:hover {
+        border-radius: 0;
+        -webkit-border-radius: 0;
+    }
 
-.card-heading.tab-right .nav>li:last-child.active>a,
-.tab-right.card-heading .nav>li:last-child>a:hover {
-    border-radius: 0 4px 0 0;
-    -webkit-border-radius: 0 4px 0 0;
-}
+    .card-heading.tab-right .nav > li:last-child.active > a,
+    .tab-right.card-heading .nav > li:last-child > a:hover {
+        border-radius: 0 4px 0 0;
+        -webkit-border-radius: 0 4px 0 0;
+    }
 
-.card-heading.tab-right .nav-tabs>li>a {
+.card-heading.tab-right .nav-tabs > li > a {
     margin-left: 1px;
     margin-right: 0px;
 }
@@ -3244,30 +3246,30 @@ ul.amounts li {
     width: 45px;
 }
 
-.carousel-control i {
-    display: inline-block;
-    height: 25px;
-    left: 50%;
-    margin-left: -10px;
-    margin-top: -10px;
-    position: absolute;
-    top: 50%;
-    width: 20px;
-    z-index: 5;
-}
+    .carousel-control i {
+        display: inline-block;
+        height: 25px;
+        left: 50%;
+        margin-left: -10px;
+        margin-top: -10px;
+        position: absolute;
+        top: 50%;
+        width: 20px;
+        z-index: 5;
+    }
 
-.carousel-control.left,
-.carousel-control.right {
-    background: none;
-    filter: none;
-}
+    .carousel-control.left,
+    .carousel-control.right {
+        background: none;
+        filter: none;
+    }
 
-.carousel-control:hover,
-.carousel-control:focus {
-    color: #cccccc;
-    opacity: 0.9;
-    text-decoration: none;
-}
+    .carousel-control:hover,
+    .carousel-control:focus {
+        color: #cccccc;
+        opacity: 0.9;
+        text-decoration: none;
+    }
 
 .carousel-inner h3 {
     font-weight: 300;
@@ -3297,15 +3299,15 @@ ul.amounts li {
     margin-bottom: 15px;
 }
 
-.form-horizontal.tasi-form .form-group:last-child {
-    border-bottom: none;
-    padding-bottom: 0px;
-    margin-bottom: 0px;
-}
+    .form-horizontal.tasi-form .form-group:last-child {
+        border-bottom: none;
+        padding-bottom: 0px;
+        margin-bottom: 0px;
+    }
 
-.form-horizontal.tasi-form .form-group .help-block {
-    margin-bottom: 0;
-}
+    .form-horizontal.tasi-form .form-group .help-block {
+        margin-bottom: 0;
+    }
 
 .round-input {
     border-radius: 500px;
@@ -3316,7 +3318,7 @@ ul.amounts li {
     margin-bottom: 15px;
 }
 
-.form-horizontal.tasi-form .checkbox-inline>input {
+.form-horizontal.tasi-form .checkbox-inline > input {
     margin-top: 1px;
     border: none;
 }
@@ -3325,30 +3327,30 @@ ul.amounts li {
     position: relative;
 }
 
-.iconic-input i {
-    color: #cccccc;
-    display: block;
-    font-size: 16px;
-    height: 16px;
-    margin: 12px 5px 8px 10px;
-    position: absolute;
-    text-align: center;
-    width: 16px;
-}
+    .iconic-input i {
+        color: #cccccc;
+        display: block;
+        font-size: 16px;
+        height: 16px;
+        margin: 12px 5px 8px 10px;
+        position: absolute;
+        text-align: center;
+        width: 16px;
+    }
 
-.iconic-input input {
-    padding-left: 40px !important;
-}
+    .iconic-input input {
+        padding-left: 40px !important;
+    }
 
-.iconic-input.right input {
-    padding-left: 10px !important;
-    padding-right: 40px !important;
-}
+    .iconic-input.right input {
+        padding-left: 10px !important;
+        padding-right: 40px !important;
+    }
 
-.iconic-input.right i {
-    float: right;
-    right: 5px;
-}
+    .iconic-input.right i {
+        float: right;
+        right: 5px;
+    }
 
 input.spinner[type="text"],
 input.spinner[type="password"],
@@ -3364,7 +3366,7 @@ input.spinner[type="url"],
 input.spinner[type="search"],
 input.spinner[type="tel"],
 input.spinner[type="color"] {
-    background: url("/BackendScript/img/input-spinner.gif") right no-repeat !important;
+    background: url("../img/input-spinner.gif") right no-repeat !important;
 }
 
 /*form validation*/
@@ -3462,9 +3464,9 @@ table.sliders tr td {
     height: 8px !important;
 }
 
-.ui-slider-horizontal .ui-slider-handle {
-    top: -0.57em !important;
-}
+    .ui-slider-horizontal .ui-slider-handle {
+        top: -0.57em !important;
+    }
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
@@ -3479,9 +3481,9 @@ table.sliders tr td {
     width: 8px !important;
 }
 
-.ui-slider-vertical .ui-slider-handle {
-    left: -0.5em !important;
-}
+    .ui-slider-vertical .ui-slider-handle {
+        left: -0.5em !important;
+    }
 
 .ui-slider .ui-slider-handle {
     cursor: default;
@@ -3650,54 +3652,54 @@ table.sliders tr td {
     text-align: left;
 }
 
-.tagsinput .tag {
-    border-radius: 4px;
-    background-color: #41cac0;
-    color: #ffffff;
-    cursor: pointer;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    overflow: hidden;
-    line-height: 15px;
-    padding: 6px 13px 8px 19px;
-    position: relative;
-    vertical-align: middle;
-    display: inline-block;
-    zoom: 1;
-    *display: inline;
-    -webkit-transition: 0.14s linear;
-    -moz-transition: 0.14s linear;
-    -o-transition: 0.14s linear;
-    transition: 0.14s linear;
-    -webkit-backface-visibility: hidden;
-}
+    .tagsinput .tag {
+        border-radius: 4px;
+        background-color: #41cac0;
+        color: #ffffff;
+        cursor: pointer;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        line-height: 15px;
+        padding: 6px 13px 8px 19px;
+        position: relative;
+        vertical-align: middle;
+        display: inline-block;
+        zoom: 1;
+        *display: inline;
+        -webkit-transition: 0.14s linear;
+        -moz-transition: 0.14s linear;
+        -o-transition: 0.14s linear;
+        transition: 0.14s linear;
+        -webkit-backface-visibility: hidden;
+    }
 
-.tagsinput .tag:hover {
-    background-color: #39b1a8;
-    color: #ffffff;
-    padding-left: 12px;
-    padding-right: 20px;
-}
+        .tagsinput .tag:hover {
+            background-color: #39b1a8;
+            color: #ffffff;
+            padding-left: 12px;
+            padding-right: 20px;
+        }
 
-.tagsinput .tag:hover .tagsinput-remove-link {
-    color: #ffffff;
-    opacity: 1;
-    display: block\9;
-}
+            .tagsinput .tag:hover .tagsinput-remove-link {
+                color: #ffffff;
+                opacity: 1;
+                display: block\9;
+            }
 
-.tagsinput input {
-    background: transparent;
-    border: none;
-    color: #34495e;
-    font-family: "Lato", sans-serif;
-    font-size: 14px;
-    margin: 0px;
-    padding: 0 0 0 5px;
-    outline: 0;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    width: 12px;
-}
+    .tagsinput input {
+        background: transparent;
+        border: none;
+        color: #34495e;
+        font-family: "Lato", sans-serif;
+        font-size: 14px;
+        margin: 0px;
+        padding: 0 0 0 5px;
+        outline: 0;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        width: 12px;
+    }
 
 .tagsinput-remove-link {
     bottom: 0;
@@ -3716,11 +3718,11 @@ table.sliders tr td {
     display: none\9;
 }
 
-.tagsinput-remove-link:before {
-    color: #ffffff;
-    content: "\f00d";
-    font-family: "FontAwesome";
-}
+    .tagsinput-remove-link:before {
+        color: #ffffff;
+        content: "\f00d";
+        font-family: "FontAwesome";
+    }
 
 .tagsinput-add-container {
     vertical-align: middle;
@@ -3746,14 +3748,14 @@ table.sliders tr td {
     -webkit-backface-visibility: hidden;
 }
 
-.tagsinput-add:hover {
-    background-color: #3bb8af;
-}
+    .tagsinput-add:hover {
+        background-color: #3bb8af;
+    }
 
-.tagsinput-add:before {
-    content: "\f067";
-    font-family: "FontAwesome";
-}
+    .tagsinput-add:before {
+        content: "\f067";
+        font-family: "FontAwesome";
+    }
 
 .tags_clear {
     clear: both;
@@ -3820,9 +3822,9 @@ table.sliders tr td {
 }
 
 .form-control-lg,
-.input-group-lg>.form-control,
-.input-group-lg>.input-group-addon,
-.input-group-lg>.input-group-btn>.btn {
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
     padding: 0.9rem 1rem;
 }
 
@@ -3831,14 +3833,13 @@ select.form-control-lg {
 }
 
 .form-control-sm,
-.input-group-sm>.form-control,
-.input-group-sm>.input-group-addon,
-.input-group-sm>.input-group-btn>.btn {
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
     padding: 0.15rem 0.5rem;
 }
 
 @media (min-width: 992px) {
-
     .picker-form .form-group label,
     .right-text-label-form .form-group label {
         text-align: right;
@@ -3872,16 +3873,16 @@ select.form-control-lg {
     padding: 10px;
 }
 
-.datepicker table,
-.datetimepicker table {
-    width: 100%;
-}
+    .datepicker table,
+    .datetimepicker table {
+        width: 100%;
+    }
 
-.datepicker table tbody tr>td.day.today,
-.datetimepicker table tbody tr>td.day.today {
-    color: #fff;
-    background: #328dff;
-}
+        .datepicker table tbody tr > td.day.today,
+        .datetimepicker table tbody tr > td.day.today {
+            color: #fff;
+            background: #328dff;
+        }
 
 .dt-cont {
     position: relative;
@@ -3931,25 +3932,25 @@ select.form-control-lg {
     background-color: #b756ff;
 }
 
-.datepicker table tr td.active,
-.datepicker table tr td.active.disabled,
-.datepicker table tr td.active.disabled:hover,
-.datepicker table tr td.active:hover,
-.datetimepicker table tr td.active,
-.datetimepicker table tr td.active:hover,
-.datetimepicker table tr td.active.disabled,
-.datetimepicker table tr td.active.disabled:hover,
-.datetimepicker table tr td span.active:active,
-.datetimepicker table tr td span.active:hover:active,
-.datetimepicker table tr td span.active.disabled:active,
-.datetimepicker table tr td span.active.disabled:hover:active,
-.datetimepicker table tr td span.active.active,
-.datetimepicker table tr td span.active:hover.active,
-.datetimepicker table tr td span.active.disabled.active,
-.datetimepicker table tr td span.active.disabled:hover.active {
-    background-image: none;
-    text-shadow: none;
-}
+    .datepicker table tr td.active,
+    .datepicker table tr td.active.disabled,
+    .datepicker table tr td.active.disabled:hover,
+    .datepicker table tr td.active:hover,
+    .datetimepicker table tr td.active,
+    .datetimepicker table tr td.active:hover,
+    .datetimepicker table tr td.active.disabled,
+    .datetimepicker table tr td.active.disabled:hover,
+    .datetimepicker table tr td span.active:active,
+    .datetimepicker table tr td span.active:hover:active,
+    .datetimepicker table tr td span.active.disabled:active,
+    .datetimepicker table tr td span.active.disabled:hover:active,
+    .datetimepicker table tr td span.active.active,
+    .datetimepicker table tr td span.active:hover.active,
+    .datetimepicker table tr td span.active.disabled.active,
+    .datetimepicker table tr td span.active.disabled:hover.active {
+        background-image: none;
+        text-shadow: none;
+    }
 
 .datepicker table tr td.day.focused,
 .datepicker table tr td.day:hover,
@@ -3968,11 +3969,11 @@ select.form-control-lg {
     color: #949494;
 }
 
-.bootstrap-timepicker table td a:hover {
-    border-color: #e5e8eb;
-    border-radius: 4px;
-    background-color: #f4f6f9;
-}
+    .bootstrap-timepicker table td a:hover {
+        border-color: #e5e8eb;
+        border-radius: 4px;
+        background-color: #f4f6f9;
+    }
 
 .bootstrap-timepicker table td input {
     width: 35px;
@@ -4013,13 +4014,13 @@ select.form-control-lg {
     text-align: center;
 }
 
-.stepy-tab ul {
-    display: inline-block;
-}
+    .stepy-tab ul {
+        display: inline-block;
+    }
 
-.stepy-tab ul li {
-    float: left;
-}
+        .stepy-tab ul li {
+            float: left;
+        }
 
 .step legend {
     border: none;
@@ -4045,9 +4046,9 @@ select.form-control-lg {
     clear: left;
 }
 
-.step label {
-    display: block;
-}
+    .step label {
+        display: block;
+    }
 
 .stepy-titles li {
     color: #757575;
@@ -4056,31 +4057,31 @@ select.form-control-lg {
     margin: 10px 15px;
 }
 
-.stepy-titles li span {
-    display: block;
-}
+    .stepy-titles li span {
+        display: block;
+    }
 
-.stepy-titles li.current-step div {
-    color: #fff;
-    cursor: auto;
-    background: #a9d86e;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
-}
+    .stepy-titles li.current-step div {
+        color: #fff;
+        cursor: auto;
+        background: #a9d86e;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        line-height: 100px;
+    }
 
-.stepy-titles li div {
-    font-size: 16px;
-    font-weight: 300;
-    background: #eee;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
-}
+    .stepy-titles li div {
+        font-size: 16px;
+        font-weight: 300;
+        background: #eee;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        line-height: 100px;
+    }
 
 /*widget*/
 
@@ -4094,8 +4095,8 @@ select.form-control-lg {
     background: #aec785;
 }
 
-.profile-nav.alt.green-border ul>li>a:hover,
-.profile-nav.alt.green-border ul>li>a:focus,
+.profile-nav.alt.green-border ul > li > a:hover,
+.profile-nav.alt.green-border ul > li > a:focus,
 .profile-nav.alt.green-border ul li.active a {
     border-left: 5px solid #aec785;
 }
@@ -4110,12 +4111,12 @@ select.form-control-lg {
     -webkit-border-radius: 50%;
 }
 
-.user-heading.alt a img {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+    .user-heading.alt a img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+    }
 
 .twt-feed {
     border-radius: 4px 4px 0 0;
@@ -4126,30 +4127,30 @@ select.form-control-lg {
     text-align: center;
 }
 
-.twt-feed.blue-bg {
-    background: #58c9f3;
-}
+    .twt-feed.blue-bg {
+        background: #58c9f3;
+    }
 
-.twt-feed h1 {
-    font-size: 22px;
-    font-weight: 300;
-    margin-bottom: 5px;
-}
+    .twt-feed h1 {
+        font-size: 22px;
+        font-weight: 300;
+        margin-bottom: 5px;
+    }
 
-.twt-feed a {
-    border: 8px solid #fff;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    display: inline-block;
-    margin-bottom: -55px;
-}
+    .twt-feed a {
+        border: 8px solid #fff;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+        display: inline-block;
+        margin-bottom: -55px;
+    }
 
-.twt-feed a img {
-    height: 112px;
-    width: 112px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+        .twt-feed a img {
+            height: 112px;
+            width: 112px;
+            border-radius: 50%;
+            -webkit-border-radius: 50%;
+        }
 
 .twt-category {
     display: inline-block;
@@ -4158,15 +4159,15 @@ select.form-control-lg {
     width: 100%;
 }
 
-.twt-category ul li {
-    color: #89817f;
-    font-size: 13px;
-}
+    .twt-category ul li {
+        color: #89817f;
+        font-size: 13px;
+    }
 
-.twt-category h5 {
-    font-size: 20px;
-    font-weight: 300;
-}
+    .twt-category h5 {
+        font-size: 20px;
+        font-weight: 300;
+    }
 
 .twt-write .t-text-area {
     border: 1px solid #eeeeee;
@@ -4219,31 +4220,31 @@ select.form-control-lg {
     clear: both;
 }
 
-.chat-form .input-cont {
-    margin-bottom: 10px;
-}
+    .chat-form .input-cont {
+        margin-bottom: 10px;
+    }
 
-.chat-form .input-cont input {
-    margin-bottom: 0px;
-}
+        .chat-form .input-cont input {
+            margin-bottom: 0px;
+        }
 
-.chat-form .input-cont input {
-    border: 1px solid #d3d3d3 !important;
-    margin-top: 0;
-    min-height: 45px;
-}
+        .chat-form .input-cont input {
+            border: 1px solid #d3d3d3 !important;
+            margin-top: 0;
+            min-height: 45px;
+        }
 
-.chat-form .input-cont input {
-    background-color: #fff !important;
-}
+        .chat-form .input-cont input {
+            background-color: #fff !important;
+        }
 
 .chat-features a {
     margin-left: 10px;
 }
 
-.chat-features a i {
-    color: #d0d0d0;
-}
+    .chat-features a i {
+        color: #d0d0d0;
+    }
 
 .timeline-messages:before {
     background: rgba(0, 0, 0, 0.1);
@@ -4268,58 +4269,58 @@ select.form-control-lg {
     position: relative;
 }
 
-.timeline-messages .msg-in .arrow {
-    /*border-right: 8px solid #F4F4F4 !important;*/
-}
+    .timeline-messages .msg-in .arrow {
+        /*border-right: 8px solid #F4F4F4 !important;*/
+    }
 
-.timeline-messages .msg-in .arrow {
-    border-bottom: 8px solid transparent;
-    border-top: 8px solid transparent;
-    display: block;
-    height: 0;
-    left: -8px;
-    position: absolute;
-    top: 13px;
-    width: 0;
-}
+    .timeline-messages .msg-in .arrow {
+        border-bottom: 8px solid transparent;
+        border-top: 8px solid transparent;
+        display: block;
+        height: 0;
+        left: -8px;
+        position: absolute;
+        top: 13px;
+        width: 0;
+    }
 
-.timeline-messages .msg-out .arrow {
-    /*border-right: 8px solid #41cac0 !important;*/
-}
+    .timeline-messages .msg-out .arrow {
+        /*border-right: 8px solid #41cac0 !important;*/
+    }
 
-.timeline-messages .msg-out .arrow {
-    border-bottom: 8px solid transparent;
-    border-top: 8px solid transparent;
-    display: block;
-    height: 0;
-    left: -8px;
-    position: absolute;
-    top: 13px;
-    width: 0;
-}
+    .timeline-messages .msg-out .arrow {
+        border-bottom: 8px solid transparent;
+        border-top: 8px solid transparent;
+        display: block;
+        height: 0;
+        left: -8px;
+        position: absolute;
+        top: 13px;
+        width: 0;
+    }
 
-.msg-time-chat:first-child:before {
-    margin-top: 16px;
-}
+    .msg-time-chat:first-child:before {
+        margin-top: 16px;
+    }
 
-.msg-time-chat:before {
-    background: #cccccc;
-    border: 2px solid #fafafa;
-    border-radius: 100px;
-    -moz-border-radius: 100px;
-    -webkit-border-radius: 100px;
-    height: 14px;
-    margin: 23px 0 0 -6px;
-    width: 14px;
-}
+    .msg-time-chat:before {
+        background: #cccccc;
+        border: 2px solid #fafafa;
+        border-radius: 100px;
+        -moz-border-radius: 100px;
+        -webkit-border-radius: 100px;
+        height: 14px;
+        margin: 23px 0 0 -6px;
+        width: 14px;
+    }
 
-.msg-time-chat:hover:before {
-    background: #41cac0;
-}
+    .msg-time-chat:hover:before {
+        background: #41cac0;
+    }
 
-.msg-time-chat:first-child {
-    padding-top: 0;
-}
+    .msg-time-chat:first-child {
+        padding-top: 0;
+    }
 
 .message-img {
     float: left;
@@ -4327,11 +4328,11 @@ select.form-control-lg {
     overflow: hidden;
 }
 
-.message-img img {
-    display: block;
-    height: 44px;
-    width: 44px;
-}
+    .message-img img {
+        display: block;
+        height: 44px;
+        width: 44px;
+    }
 
 .message-body {
     margin-left: 80px;
@@ -4400,9 +4401,9 @@ span.customSelect {
     color: #a4aaba;
 }
 
-span.customSelect.changed {
-    background-color: #fff;
-}
+    span.customSelect.changed {
+        background-color: #fff;
+    }
 
 .customSelectInner {
     background: url(../img/customSelect-arrow.gif) no-repeat center right;
@@ -4414,28 +4415,28 @@ span.customSelect.changed {
     background-color: #ccc !important;
 }
 
-.boxed-page .container {
-    background: #2a3542;
-    padding-left: 0;
-    padding-right: 0;
-}
+    .boxed-page .container {
+        background: #2a3542;
+        padding-left: 0;
+        padding-right: 0;
+    }
 
-.boxed-page .container #sidebar {
-    position: inherit;
-}
+        .boxed-page .container #sidebar {
+            position: inherit;
+        }
 
-.boxed-page .container .header .container {
-    background: #fff;
-}
+        .boxed-page .container .header .container {
+            background: #fff;
+        }
 
-.boxed-page .container aside {
-    float: left;
-}
+        .boxed-page .container aside {
+            float: left;
+        }
 
-.boxed-page .container .wrapper {
-    background: #f1f2f7;
-    min-height: 900px;
-}
+        .boxed-page .container .wrapper {
+            background: #f1f2f7;
+            min-height: 900px;
+        }
 
 /*collapsible*/
 
@@ -4458,33 +4459,33 @@ span.customSelect.changed {
     font-size: 30px;
 }
 
-.rating span.star,
-.rating span.star {
-    font-family: FontAwesome;
-    font-weight: normal;
-    font-style: normal;
-    display: inline-block;
-}
+    .rating span.star,
+    .rating span.star {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+    }
 
-.rating span.star:hover,
-.rating span.star:hover {
-    cursor: pointer;
-}
+        .rating span.star:hover,
+        .rating span.star:hover {
+            cursor: pointer;
+        }
 
-.rating span.star:before,
-.rating span.star:before {
-    content: "\f006";
-    padding-right: 5px;
-    color: #bec3c7;
-}
+        .rating span.star:before,
+        .rating span.star:before {
+            content: "\f006";
+            padding-right: 5px;
+            color: #bec3c7;
+        }
 
-.rating span.star:hover:before,
-.rating span.star:hover:before,
-.rating span.star:hover~span.star:before,
-.rating span.star:hover~span.star:before {
-    content: "\f005";
-    color: #41cac0;
-}
+        .rating span.star:hover:before,
+        .rating span.star:hover:before,
+        .rating span.star:hover ~ span.star:before,
+        .rating span.star:hover ~ span.star:before {
+            content: "\f005";
+            color: #41cac0;
+        }
 
 /*search page*/
 
@@ -4492,19 +4493,19 @@ span.customSelect.changed {
     margin-bottom: 30px;
 }
 
-.classic-search h4 {
-    margin-bottom: 3px;
-    font-weight: 300;
-    font-size: 16px;
-}
+    .classic-search h4 {
+        margin-bottom: 3px;
+        font-weight: 300;
+        font-size: 16px;
+    }
 
-.classic-search h4 a {
-    color: #314558;
-}
+        .classic-search h4 a {
+            color: #314558;
+        }
 
-.classic-search h4 a:hover {
-    text-decoration: underline;
-}
+            .classic-search h4 a:hover {
+                text-decoration: underline;
+            }
 
 /*ckEditor*/
 
@@ -4531,50 +4532,50 @@ span.customSelect.changed {
     padding: 10px 1px 1px;
 }
 
-#headerLeft h2,
-#headerLeft h3 {
-    margin: 0;
-    overflow: hidden;
-    font-weight: normal;
-    font-family: "Open Sans", sans-serif;
-}
+    #headerLeft h2,
+    #headerLeft h3 {
+        margin: 0;
+        overflow: hidden;
+        font-weight: normal;
+        font-family: "Open Sans", sans-serif;
+    }
 
-#headerLeft h2 {
-    font-size: 2.6em;
-    line-height: 1.1em;
-    text-transform: capitalize;
-    color: #314558;
-    margin-bottom: 20px;
-}
+    #headerLeft h2 {
+        font-size: 2.6em;
+        line-height: 1.1em;
+        text-transform: capitalize;
+        color: #314558;
+        margin-bottom: 20px;
+    }
 
-#headerLeft h3 {
-    font-size: 1.5em;
-    line-height: 1.1em;
-    margin: 0.2em 0 0;
-    color: #757575;
-}
+    #headerLeft h3 {
+        font-size: 1.5em;
+        line-height: 1.1em;
+        margin: 0.2em 0 0;
+        color: #757575;
+    }
 
 #headerRight {
     float: right;
     padding: 1px;
 }
 
-#headerRight p {
-    line-height: 1.8em;
-    text-align: justify;
-    margin: 0;
-}
+    #headerRight p {
+        line-height: 1.8em;
+        text-align: justify;
+        margin: 0;
+    }
 
-#headerRight p+p {
-    margin-top: 20px;
-}
+        #headerRight p + p {
+            margin-top: 20px;
+        }
 
-#headerRight>div {
-    padding: 20px;
-    margin: 0 0 0 30px;
-    font-size: 1.1em;
-    color: #757575;
-}
+    #headerRight > div {
+        padding: 20px;
+        margin: 0 0 0 30px;
+        font-size: 1.1em;
+        color: #757575;
+    }
 
 #columns {
     color: #757575;
@@ -4582,31 +4583,31 @@ span.customSelect.changed {
     padding: 20px 0;
 }
 
-#columns h3 {
-    color: #314558;
-}
+    #columns h3 {
+        color: #314558;
+    }
 
-#columns>div {
-    float: left;
-    width: 33.3%;
-}
+    #columns > div {
+        float: left;
+        width: 33.3%;
+    }
 
-#columns #column1>div {
-    margin-left: 1px;
-}
+    #columns #column1 > div {
+        margin-left: 1px;
+    }
 
-#columns #column3>div {
-    margin-right: 1px;
-}
+    #columns #column3 > div {
+        margin-right: 1px;
+    }
 
-#columns>div>div {
-    margin: 0px 10px;
-    padding: 10px 20px;
-}
+    #columns > div > div {
+        margin: 0px 10px;
+        padding: 10px 20px;
+    }
 
-#columns blockquote {
-    margin-left: 15px;
-}
+    #columns blockquote {
+        margin-left: 15px;
+    }
 
 #taglist {
     display: inline-block;
@@ -4643,10 +4644,10 @@ td.details {
     background-color: #eee;
 }
 
-td.details table tr td,
-.dataTable tr:last-child {
-    border: none;
-}
+    td.details table tr td,
+    .dataTable tr:last-child {
+        border: none;
+    }
 
 .adv-table table.display tr.odd.gradeA {
     background-color: #f9f9f9;
@@ -4734,27 +4735,27 @@ tr.odd.gradeU td.sorting_1 {
     padding: 0;
 }
 
-.horizontal-menu .navbar-nav>li>a {
-    padding-bottom: 20px;
-    padding-top: 20px;
-    font-size: 14px;
-}
+    .horizontal-menu .navbar-nav > li > a {
+        padding-bottom: 20px;
+        padding-top: 20px;
+        font-size: 14px;
+    }
 
-.horizontal-menu .dropdown-item {
-    font-size: 14px;
-}
+    .horizontal-menu .dropdown-item {
+        font-size: 14px;
+    }
 
 .full-width .navbar-header {
     width: 100%;
 }
 
-.full-width .nav>li>a:hover,
+.full-width .nav > li > a:hover,
 .full-width .nav li.active a,
 .full-width .nav li.dropdown a:hover,
 .full-width .nav li.dropdown.open a:focus,
-.full-width .nav .open>a,
-.full-width .nav .open>a:hover,
-.full-width .nav .open>a:focus {
+.full-width .nav .open > a,
+.full-width .nav .open > a:hover,
+.full-width .nav .open > a:focus {
     background-color: #f77b6f;
     text-decoration: none;
     color: #fff;
@@ -4766,10 +4767,10 @@ tr.odd.gradeU td.sorting_1 {
     box-shadow: none;
 }
 
-.full-width .dropdown-menu>li>a {
-    padding: 10px 20px;
-    font-size: 13px;
-}
+    .full-width .dropdown-menu > li > a {
+        padding: 10px 20px;
+        font-size: 13px;
+    }
 
 /*advanced form*/
 
@@ -4792,9 +4793,9 @@ tr.odd.gradeU td.sorting_1 {
     box-shadow: none !important;
 }
 
-.ms-container .ms-list.ms-focus {
-    border: 1px solid #2a3542;
-}
+    .ms-container .ms-list.ms-focus {
+        border: 1px solid #2a3542;
+    }
 
 .ms-selectable .search-input,
 .ms-selection .search-input {
@@ -4814,19 +4815,19 @@ tr.odd.gradeU td.sorting_1 {
     padding: 0;
 }
 
-.spinner-buttons.btn-group-vertical .btn i {
-    margin-top: -3px;
-}
+    .spinner-buttons.btn-group-vertical .btn i {
+        margin-top: -3px;
+    }
 
-.spinner-buttons.btn-group-vertical .btn:first-child {
-    border-radius: 0 4px 0 0 !important;
-    -webkit-border-radius: 0 4px 0 0 !important;
-}
+    .spinner-buttons.btn-group-vertical .btn:first-child {
+        border-radius: 0 4px 0 0 !important;
+        -webkit-border-radius: 0 4px 0 0 !important;
+    }
 
-.spinner-buttons.btn-group-vertical .btn:last-child {
-    border-radius: 0 0 4px !important;
-    -webkit-border-radius: 0 0 4px !important;
-}
+    .spinner-buttons.btn-group-vertical .btn:last-child {
+        border-radius: 0 0 4px !important;
+        -webkit-border-radius: 0 0 4px !important;
+    }
 
 .spinner-input.form-control[readonly] {
     background: transparent;
@@ -4848,23 +4849,23 @@ tr.odd.gradeU td.sorting_1 {
     width: 100%;
 }
 
-#sortable li {
-    padding-left: 3em;
-    font-size: 12px;
-}
+    #sortable li {
+        padding-left: 3em;
+        font-size: 12px;
+    }
 
-#sortable li i {
-    position: absolute;
-    left: 6px;
-    padding: 4px 10px 0 10px;
-    cursor: pointer;
-}
+        #sortable li i {
+            position: absolute;
+            left: 6px;
+            padding: 4px 10px 0 10px;
+            cursor: pointer;
+        }
 
-#sortable li input[type="checkbox"] {
-    margin-top: 0;
-}
+        #sortable li input[type="checkbox"] {
+            margin-top: 0;
+        }
 
-.ui-sortable>li {
+.ui-sortable > li {
     padding: 15px 0 15px 35px !important;
     position: relative;
     background: #f5f6f8;
@@ -4899,7 +4900,7 @@ tr.odd.gradeU td.sorting_1 {
 /*lock screen*/
 
 .lock-screen {
-    background: #02bac6 url("/BackendScript/img/lock-bg.jpg");
+    background: #02bac6 url("../img/lock-bg.jpg");
     background-size: cover;
     background-repeat: repeat;
 }
@@ -4970,24 +4971,24 @@ tr.odd.gradeU td.sorting_1 {
     margin-top: 4px;
 }
 
-.language .dropdown-menu {
-    border: 1px solid #eee;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.176) !important;
-}
+    .language .dropdown-menu {
+        border: 1px solid #eee;
+        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.176) !important;
+    }
 
-.language .dropdown-menu li a {
-    border-bottom: 1px solid #eee;
-    padding: 10px;
-    display: block;
-}
+        .language .dropdown-menu li a {
+            border-bottom: 1px solid #eee;
+            padding: 10px;
+            display: block;
+        }
 
-.language .dropdown-menu li:last-child a {
-    border-bottom: none;
-}
+        .language .dropdown-menu li:last-child a {
+            border-bottom: none;
+        }
 
-.language .dropdown-menu li a {
-    font-size: 13px;
-}
+        .language .dropdown-menu li a {
+            font-size: 13px;
+        }
 
 /*product list*/
 
@@ -5003,19 +5004,19 @@ tr.odd.gradeU td.sorting_1 {
     margin-left: 30px;
 }
 
-.prod-cat li ul li a {
-    border-bottom: none;
-}
+    .prod-cat li ul li a {
+        border-bottom: none;
+    }
 
-.prod-cat li ul li a:hover,
-.prod-cat li ul li a:focus,
-.prod-cat li ul li.active a,
-.prod-cat li a:hover,
-.prod-cat li a:focus,
-.prod-cat li a.active {
-    background: none;
-    color: #ff7261;
-}
+        .prod-cat li ul li a:hover,
+        .prod-cat li ul li a:focus,
+        .prod-cat li ul li.active a,
+        .prod-cat li a:hover,
+        .prod-cat li a:focus,
+        .prod-cat li a.active {
+            background: none;
+            color: #ff7261;
+        }
 
 .pro-lab {
     margin-right: 20px;
@@ -5056,11 +5057,11 @@ tr.odd.gradeU td.sorting_1 {
     position: absolute;
 }
 
-.adtocart i {
-    color: #fff;
-    font-size: 25px;
-    line-height: 42px;
-}
+    .adtocart i {
+        color: #fff;
+        font-size: 25px;
+        line-height: 42px;
+    }
 
 .pro-title {
     color: #5a5a5a;
@@ -5078,9 +5079,9 @@ tr.odd.gradeU td.sorting_1 {
     margin-left: -15px;
 }
 
-.pro-img-details img {
-    width: 100%;
-}
+    .pro-img-details img {
+        width: 100%;
+    }
 
 .pro-d-title {
     font-size: 16px;
@@ -5094,15 +5095,15 @@ tr.odd.gradeU td.sorting_1 {
     margin: 15px 0;
 }
 
-.product_meta span {
-    display: block;
-    margin-bottom: 10px;
-}
+    .product_meta span {
+        display: block;
+        margin-bottom: 10px;
+    }
 
-.product_meta a,
-.pro-price {
-    color: #fc5959;
-}
+    .product_meta a,
+    .pro-price {
+        color: #fc5959;
+    }
 
 .pro-price,
 .amount-old {
@@ -5124,11 +5125,11 @@ tr.odd.gradeU td.sorting_1 {
     display: inline-block;
 }
 
-.pro-img-list a {
-    float: left;
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
+    .pro-img-list a {
+        float: left;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
 
 .pro-d-head {
     font-size: 18px;
@@ -5153,9 +5154,9 @@ tr.odd.gradeU td.sorting_1 {
     -webkit-border-radius: 50%;
 }
 
-.go-top i {
-    color: #2a3542;
-}
+    .go-top i {
+        color: #2a3542;
+    }
 
 .site-min-height {
     min-height: 900px;
@@ -5173,10 +5174,10 @@ tr.odd.gradeU td.sorting_1 {
     padding: 10px 0 50px;
 }
 
-.feature-head h1 {
-    font-size: 25px;
-    font-weight: normal;
-}
+    .feature-head h1 {
+        font-size: 25px;
+        font-weight: normal;
+    }
 
 .pricing-table {
     background: #fff;
@@ -5187,36 +5188,36 @@ tr.odd.gradeU td.sorting_1 {
     -webkit-border-radius: 5px;
 }
 
-.pricing-table.most-popular {
-    top: -20px;
-    position: relative;
-}
+    .pricing-table.most-popular {
+        top: -20px;
+        position: relative;
+    }
 
 .most-popular {
     background: #f77b6f;
     color: #fff;
 }
 
-.most-popular h1 {
-    font-size: 25px !important;
-    padding-bottom: 10px;
-    padding-top: 17px !important;
-}
+    .most-popular h1 {
+        font-size: 25px !important;
+        padding-bottom: 10px;
+        padding-top: 17px !important;
+    }
 
-.most-popular h2 {
-    background: #d76b61 !important;
-    margin-top: 20px !important;
-}
+    .most-popular h2 {
+        background: #d76b61 !important;
+        margin-top: 20px !important;
+    }
 
-.most-popular ul li {
-    border-bottom: 1px dotted #d76b61 !important;
-}
+    .most-popular ul li {
+        border-bottom: 1px dotted #d76b61 !important;
+    }
 
-.most-popular .price-actions .btn {
-    background: #d76b61 !important;
-    margin: 10px 0;
-    cursor: pointer;
-}
+    .most-popular .price-actions .btn {
+        background: #d76b61 !important;
+        margin: 10px 0;
+        cursor: pointer;
+    }
 
 .pricing-table .price-actions .btn {
     border-radius: 5px;
@@ -5239,7 +5240,7 @@ tr.odd.gradeU td.sorting_1 {
 
 .pricing-head h2 {
     padding: 30px 0;
-    background: #000000777;
+    background: #777777;
     color: #fff;
     font-size: 50px;
     font-weight: 100;
@@ -5250,13 +5251,13 @@ tr.odd.gradeU td.sorting_1 {
     padding: 0;
 }
 
-.pricing-table ul li {
-    border-bottom: 1px dotted #cccccc;
-    margin: 0 2em;
-    padding: 1em 0;
-    text-align: center;
-    font-weight: 300;
-}
+    .pricing-table ul li {
+        border-bottom: 1px dotted #cccccc;
+        margin: 0 2em;
+        padding: 1em 0;
+        text-align: center;
+        font-weight: 300;
+    }
 
 .pricing-head span.note {
     display: inline;
@@ -5279,15 +5280,15 @@ tr.odd.gradeU td.sorting_1 {
     -webkit-border-radius: 5px;
 }
 
-.pricing-quotation h3,
-.team-info h3 {
-    font-weight: 300;
-}
+    .pricing-quotation h3,
+    .team-info h3 {
+        font-weight: 300;
+    }
 
-.pricing-quotation p,
-.team-info p {
-    margin-bottom: 0px;
-}
+    .pricing-quotation p,
+    .team-info p {
+        margin-bottom: 0px;
+    }
 
 .pricing-plan,
 .team-info-wrap {
@@ -5329,7 +5330,7 @@ tr.odd.gradeU td.sorting_1 {
     margin-bottom: 5px;
     border-radius: 4px;
     -webkit-border-radius: 4px;
-    color: #000000;
+    color: #797979;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
@@ -5337,23 +5338,23 @@ tr.odd.gradeU td.sorting_1 {
     transition: all 0.3s ease;
 }
 
-.vertical-menu li a:hover,
-.vertical-menu li a:focus,
-.vertical-menu li.active a {
-    background: #2a3542;
-    width: 100%;
-    float: left;
-    padding: 10px;
-    margin-bottom: 5px;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    color: #fff;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
+    .vertical-menu li a:hover,
+    .vertical-menu li a:focus,
+    .vertical-menu li.active a {
+        background: #2a3542;
+        width: 100%;
+        float: left;
+        padding: 10px;
+        margin-bottom: 5px;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        color: #fff;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
 
 /*fb time line*/
 
@@ -5392,12 +5393,12 @@ tr.odd.gradeU td.sorting_1 {
     position: absolute;
 }
 
-.fb-name h2 a {
-    color: #ffffff;
-    text-rendering: optimizelegibility;
-    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
-    font-size: 25px;
-}
+    .fb-name h2 a {
+        color: #ffffff;
+        text-rendering: optimizelegibility;
+        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+        font-size: 25px;
+    }
 
 .fb-user-thumb {
     float: left;
@@ -5405,12 +5406,12 @@ tr.odd.gradeU td.sorting_1 {
     margin-right: 15px;
 }
 
-.fb-user-thumb img {
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+    .fb-user-thumb img {
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        -webkit-border-radius: 50%;
+    }
 
 .fb-user-details h3 {
     margin: 15px 0 0;
@@ -5444,9 +5445,9 @@ tr.odd.gradeU td.sorting_1 {
     color: #2972a1;
 }
 
-.fb-time-action a:hover {
-    text-decoration: underline;
-}
+    .fb-time-action a:hover {
+        text-decoration: underline;
+    }
 
 .fb-time-action span {
     color: #5a5a5a;
@@ -5473,33 +5474,33 @@ tr.odd.gradeU td.sorting_1 {
     margin-right: 15px;
 }
 
-.fb-comments .cmt-thumb img {
-    width: 50px;
-}
+    .fb-comments .cmt-thumb img {
+        width: 50px;
+    }
 
 .fb-comments .cmt-details {
     padding-top: 5px;
 }
 
-.fb-comments .cmt-details a {
-    font-size: 14px;
-    font-weight: bold;
-}
+    .fb-comments .cmt-details a {
+        font-size: 14px;
+        font-weight: bold;
+    }
 
-.fb-comments .cmt-details a.like-link {
-    font-size: 12px;
-    font-weight: normal;
-}
+        .fb-comments .cmt-details a.like-link {
+            font-size: 12px;
+            font-weight: normal;
+        }
 
 .cmt-form {
     display: inline-block;
     width: 90%;
 }
 
-.cmt-form textarea {
-    height: 50px;
-    line-height: 35px;
-}
+    .cmt-form textarea {
+        height: 50px;
+        line-height: 35px;
+    }
 
 .fb-timeliner h2 {
     background: #828283;
@@ -5517,30 +5518,30 @@ tr.odd.gradeU td.sorting_1 {
     margin-bottom: 20px;
 }
 
-.fb-timeliner ul li {
-    margin-bottom: 3px;
-}
+    .fb-timeliner ul li {
+        margin-bottom: 3px;
+    }
 
-.fb-timeliner ul li a {
-    color: #999797;
-    border-left: 4px solid #d3d7dd;
-    padding-left: 10px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    display: block;
-}
+        .fb-timeliner ul li a {
+            color: #999797;
+            border-left: 4px solid #d3d7dd;
+            padding-left: 10px;
+            padding-top: 3px;
+            padding-bottom: 3px;
+            display: block;
+        }
 
-.fb-timeliner ul li a:hover {
-    color: #999797;
-    border-left: 4px solid #b1b1b1;
-    padding-left: 10px;
-}
+            .fb-timeliner ul li a:hover {
+                color: #999797;
+                border-left: 4px solid #b1b1b1;
+                padding-left: 10px;
+            }
 
-.fb-timeliner ul li.active a {
-    color: #7a7a7a;
-    border-left: 4px solid #7a7a7a;
-    padding-left: 10px;
-}
+        .fb-timeliner ul li.active a {
+            color: #7a7a7a;
+            border-left: 4px solid #7a7a7a;
+            padding-left: 10px;
+        }
 
 .recent-highlight {
     background: #ff6c60 !important;
@@ -5557,66 +5558,66 @@ tr.odd.gradeU td.sorting_1 {
     position: relative;
 }
 
-.chat-room aside {
-    display: table-cell;
-    float: none;
-    height: 100%;
-    padding: 0;
-    vertical-align: top;
-}
+    .chat-room aside {
+        display: table-cell;
+        float: none;
+        height: 100%;
+        padding: 0;
+        vertical-align: top;
+    }
 
-.chat-room .left-side {
-    width: 25%;
-    background: #e5e8ef;
-    border-radius: 4px 0 0 4px;
-    -webkit-border-radius: 4px 0 0 4px;
-}
+    .chat-room .left-side {
+        width: 25%;
+        background: #e5e8ef;
+        border-radius: 4px 0 0 4px;
+        -webkit-border-radius: 4px 0 0 4px;
+    }
 
-.chat-room .mid-side {
-    width: 50%;
-    background: #fff;
-    border-right: 1px solid #e5e8ef;
-}
+    .chat-room .mid-side {
+        width: 50%;
+        background: #fff;
+        border-right: 1px solid #e5e8ef;
+    }
 
-.chat-room .right-side {
-    width: 25%;
-    background: #fff;
-    border-radius: 0 4px 4px 0;
-    -webkit-border-radius: 0 4px 4px 0;
-}
+    .chat-room .right-side {
+        width: 25%;
+        background: #fff;
+        border-radius: 0 4px 4px 0;
+        -webkit-border-radius: 0 4px 4px 0;
+    }
 
-.chat-room .left-side .user-head {
-    background: #00a8b3;
-    border-radius: 4px 0 0;
-    -webkit-border-radius: 4px 0 0;
-    color: #ffffff;
-    min-height: 70px;
-    padding: 15px;
-}
+    .chat-room .left-side .user-head {
+        background: #00a8b3;
+        border-radius: 4px 0 0;
+        -webkit-border-radius: 4px 0 0;
+        color: #ffffff;
+        min-height: 70px;
+        padding: 15px;
+    }
 
-.chat-room .right-side .user-head {
-    background: #00a8b3;
-    border-radius: 0 4px 0 0;
-    -webkit-border-radius: 0 4px 0 0;
-    color: #ffffff;
-    min-height: 70px;
-    padding: 10px;
-    border-left: 1px solid #00a8b3;
-    margin-left: -1px;
-    position: relative;
-}
+    .chat-room .right-side .user-head {
+        background: #00a8b3;
+        border-radius: 0 4px 0 0;
+        -webkit-border-radius: 0 4px 0 0;
+        color: #ffffff;
+        min-height: 70px;
+        padding: 10px;
+        border-left: 1px solid #00a8b3;
+        margin-left: -1px;
+        position: relative;
+    }
 
-.chat-room .user-head i {
-    float: left;
-    font-size: 40px;
-    margin-right: 10px;
-}
+    .chat-room .user-head i {
+        float: left;
+        font-size: 40px;
+        margin-right: 10px;
+    }
 
-.chat-room .user-head h3 {
-    margin: 6px 0 0 0;
-    font-weight: 100;
-    letter-spacing: 1px;
-}
+    .chat-room .user-head h3 {
+        margin: 6px 0 0 0;
+        font-weight: 100;
+        letter-spacing: 1px;
+    }
 
 .chat-room-head {
     background: #41cac0;
@@ -5625,44 +5626,44 @@ tr.odd.gradeU td.sorting_1 {
     padding: 15px;
 }
 
-.chat-room-head h3 {
-    margin: 5px 0 0;
-    font-weight: 100;
-    letter-spacing: 1px;
-    display: inline-block;
-}
+    .chat-room-head h3 {
+        margin: 5px 0 0;
+        font-weight: 100;
+        letter-spacing: 1px;
+        display: inline-block;
+    }
 
-.chat-room-head .search-btn {
-    width: 20px;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    box-shadow: none;
-    background: #01a6b2 url("/BackendScript/img/chat-search.png") no-repeat 12px 9px;
-    padding: 0 5px 0 35px;
-    margin-top: 2px;
-    border: none;
-    color: #fff;
-}
+    .chat-room-head .search-btn {
+        width: 20px;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+        box-shadow: none;
+        background: #01a6b2 url("../img/chat-search.png") no-repeat 12px 9px;
+        padding: 0 5px 0 35px;
+        margin-top: 2px;
+        border: none;
+        color: #fff;
+    }
 
-.chat-room-head .search-btn:focus {
-    width: 180px;
-    box-shadow: none;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    /*background: #01a6b2;*/
-    font-weight: 300;
-    color: #fff;
-}
+        .chat-room-head .search-btn:focus {
+            width: 180px;
+            box-shadow: none;
+            -webkit-transition: all 0.3s ease;
+            -moz-transition: all 0.3s ease;
+            -ms-transition: all 0.3s ease;
+            -o-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+            /*background: #01a6b2;*/
+            font-weight: 300;
+            color: #fff;
+        }
 
-.chat-room-head .search-btn:focus::-moz-placeholder {
-    color: #fff;
-}
+            .chat-room-head .search-btn:focus::-moz-placeholder {
+                color: #fff;
+            }
 
 ul.chat-list li a {
     color: #6a6a6a;
@@ -5671,11 +5672,11 @@ ul.chat-list li a {
     font-weight: 300;
 }
 
-ul.chat-list li a:hover,
-ul.chat-list li.active a {
-    color: #00a9b4;
-    background: #f2f4f7;
-}
+    ul.chat-list li a:hover,
+    ul.chat-list li.active a {
+        color: #00a9b4;
+        background: #f2f4f7;
+    }
 
 ul.chat-list li h4 {
     padding: 17px 15px;
@@ -5685,9 +5686,9 @@ ul.chat-list li h4 {
     border-bottom: 1px solid #d5d7de;
 }
 
-ul.chat-list li h4 i {
-    padding-right: 5px;
-}
+    ul.chat-list li h4 i {
+        padding-right: 5px;
+    }
 
 ul.chat-list li a span {
     padding-left: 10px;
@@ -5710,14 +5711,14 @@ ul.chat-user {
     margin-bottom: 200px;
 }
 
-ul.chat-user li {
-    border-bottom: none;
-}
+    ul.chat-user li {
+        border-bottom: none;
+    }
 
-ul.chat-user li a:hover {
-    background: none;
-    color: #6a6a6a;
-}
+        ul.chat-user li a:hover {
+            background: none;
+            color: #6a6a6a;
+        }
 
 .chat-room .left-side footer {
     background: #d5d7de;
@@ -5764,9 +5765,9 @@ ul.chat-user li a:hover {
     margin: 10px;
 }
 
-.chat-room .left-side footer .user-status i {
-    padding-right: 5px;
-}
+    .chat-room .left-side footer .user-status i {
+        padding-right: 5px;
+    }
 
 .chat-room .left-side footer a.chat-dropdown {
     background: #96979a;
@@ -5784,12 +5785,12 @@ ul.chat-user li a:hover {
     padding: 15px;
 }
 
-.room-desk h4 {
-    text-transform: uppercase;
-    font-weight: 300;
-    font-size: 16px;
-    margin: 5px 0 0 0;
-}
+    .room-desk h4 {
+        text-transform: uppercase;
+        font-weight: 300;
+        font-size: 16px;
+        margin: 5px 0 0 0;
+    }
 
 .room-box {
     border: 1px solid #e7e7e7;
@@ -5802,15 +5803,15 @@ ul.chat-user li a:hover {
     -webkit-border-radius: 4px;
 }
 
-.room-box h5 {
-    margin: 0 0 5px 0;
-    font-weight: 300;
-    font-size: 16px;
-}
+    .room-box h5 {
+        margin: 0 0 5px 0;
+        font-weight: 300;
+        font-size: 16px;
+    }
 
-.room-box h5 a {
-    color: #00a9b4;
-}
+        .room-box h5 a {
+            color: #00a9b4;
+        }
 
 .chat-tools {
     float: right;
@@ -5825,20 +5826,20 @@ ul.chat-user li a:hover {
     margin-left: 10px;
 }
 
-.chat-tools i {
-    font-size: 16px !important;
-    float: none !important;
-    margin-right: 0 !important;
-    color: #fff;
-}
+    .chat-tools i {
+        font-size: 16px !important;
+        float: none !important;
+        margin-right: 0 !important;
+        color: #fff;
+    }
 
 .btn-key {
     background: #4ac9c0;
 }
 
-.btn-key:hover {
-    background: #44bab2;
-}
+    .btn-key:hover {
+        background: #44bab2;
+    }
 
 .invite-row {
     background: #e5e8ef;
@@ -5847,27 +5848,27 @@ ul.chat-user li a:hover {
     width: 100%;
 }
 
-.invite-row h4 {
-    font-size: 16px;
-    font-weight: 300;
-}
+    .invite-row h4 {
+        font-size: 16px;
+        font-weight: 300;
+    }
 
 ul.chat-available-user {
     padding: 10px;
 }
 
-ul.chat-available-user li {
-    margin-bottom: 15px;
-}
+    ul.chat-available-user li {
+        margin-bottom: 15px;
+    }
 
-ul.chat-available-user li a {
-    color: #6a6a6a;
-}
+        ul.chat-available-user li a {
+            color: #6a6a6a;
+        }
 
-ul.chat-available-user li i {
-    padding-right: 5px;
-    font-size: 10px;
-}
+        ul.chat-available-user li i {
+            padding-right: 5px;
+            font-size: 10px;
+        }
 
 .group-rom {
     width: 100%;
@@ -5875,31 +5876,31 @@ ul.chat-available-user li i {
     border-bottom: 1px solid #eaebee;
 }
 
-.group-rom .first-part,
-.group-rom .second-part,
-.group-rom .third-part {
-    float: left;
-    padding: 15px;
-}
+    .group-rom .first-part,
+    .group-rom .second-part,
+    .group-rom .third-part {
+        float: left;
+        padding: 15px;
+    }
 
-.group-rom .first-part {
-    width: 25%;
-}
+    .group-rom .first-part {
+        width: 25%;
+    }
 
-.group-rom .first-part.odd {
-    background: #f7f8fa;
-    color: #6a6a6a;
-    font-weight: 600;
-}
+        .group-rom .first-part.odd {
+            background: #f7f8fa;
+            color: #6a6a6a;
+            font-weight: 600;
+        }
 
-.group-rom .second-part {
-    width: 60%;
-}
+    .group-rom .second-part {
+        width: 60%;
+    }
 
-.group-rom .third-part {
-    width: 15%;
-    color: #d4d3d3;
-}
+    .group-rom .third-part {
+        width: 15%;
+        color: #d4d3d3;
+    }
 
 a.guest-on {
     color: #6a6a6a;
@@ -5907,14 +5908,14 @@ a.guest-on {
     display: inline-block;
 }
 
-a.guest-on i {
-    background: #40cabe;
-    color: #fff;
-    padding: 4px;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    margin-right: 5px;
-}
+    a.guest-on i {
+        background: #40cabe;
+        color: #fff;
+        padding: 4px;
+        border-radius: 3px;
+        -webkit-border-radius: 3px;
+        margin-right: 5px;
+    }
 
 .chat-txt {
     float: left;
@@ -5935,50 +5936,50 @@ a.guest-on i {
     padding-top: 1rem;
 }
 
-.sb-slidebar .side-title {
-    padding: 10px 15px;
-    text-transform: uppercase;
-    color: #ff6c60;
-    font-size: 14px;
-}
+    .sb-slidebar .side-title {
+        padding: 10px 15px;
+        text-transform: uppercase;
+        color: #ff6c60;
+        font-size: 14px;
+    }
 
 .sb-toggle-right {
     cursor: pointer;
     margin-top: 12px;
 }
 
-.sb-toggle-right i {
-    font-size: 20px;
-}
+    .sb-toggle-right i {
+        font-size: 20px;
+    }
 
 .quick-chat-list {
     margin-bottom: 20px;
 }
 
-.quick-chat-list:last-child {
-    /*padding: 0;*/
-    padding-bottom: 50px;
-}
+    .quick-chat-list:last-child {
+        /*padding: 0;*/
+        padding-bottom: 50px;
+    }
 
-.quick-chat-list li {
-    padding: 10px 15px;
-    border-bottom: 1px dashed #35404d;
-    cursor: pointer;
-}
+    .quick-chat-list li {
+        padding: 10px 15px;
+        border-bottom: 1px dashed #35404d;
+        cursor: pointer;
+    }
 
-.quick-chat-list li .media img {
-    width: 45px;
-    height: auto;
-}
+        .quick-chat-list li .media img {
+            width: 45px;
+            height: auto;
+        }
 
-.quick-chat-list li:hover {
-    background: #35404d;
-}
+        .quick-chat-list li:hover {
+            background: #35404d;
+        }
 
-.quick-chat-list li .media-object {
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-}
+        .quick-chat-list li .media-object {
+            border-radius: 50%;
+            -webkit-border-radius: 50%;
+        }
 
 .media .media-status {
     display: inline-block;
@@ -6004,40 +6005,40 @@ a.guest-on i {
     padding-bottom: 50px;
 }
 
-.p-task li {
-    padding: 10px 15px 15px 15px;
-    border-bottom: 1px dashed #35404d;
-}
+    .p-task li {
+        padding: 10px 15px 15px 15px;
+        border-bottom: 1px dashed #35404d;
+    }
 
-.p-task li:last-child {
-    padding: 10px 15px 15px 15px;
-    border-bottom: none;
-}
+        .p-task li:last-child {
+            padding: 10px 15px 15px 15px;
+            border-bottom: none;
+        }
 
-.p-task li a {
-    color: #aeb2b7;
-}
+        .p-task li a {
+            color: #aeb2b7;
+        }
 
-.p-task.tasks-bar .task-info .percent {
-    display: inline-block;
-    float: right;
-    font-size: 12px;
-    margin-top: -15px;
-}
+    .p-task.tasks-bar .task-info .percent {
+        display: inline-block;
+        float: right;
+        font-size: 12px;
+        margin-top: -15px;
+    }
 
-.p-task .progress {
-    height: 10px;
-    margin-top: 5px;
-    margin-bottom: 0;
-}
+    .p-task .progress {
+        height: 10px;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
 
-.p-task .external a {
-    color: #40cabe;
-}
+    .p-task .external a {
+        color: #40cabe;
+    }
 
-.p-task .external a:hover {
-    color: #ff6c60;
-}
+        .p-task .external a:hover {
+            color: #ff6c60;
+        }
 
 /*Directory Styles*/
 
@@ -6048,32 +6049,32 @@ a.guest-on i {
     margin: 0;
 }
 
-.directory-list li {
-    border-left: 3px solid #f1f2f7;
-    display: table-cell;
-    width: 1%;
-}
+    .directory-list li {
+        border-left: 3px solid #f1f2f7;
+        display: table-cell;
+        width: 1%;
+    }
 
-.directory-list li a {
-    display: block;
-    padding: 8px 0;
-    text-align: center;
-    text-transform: uppercase;
-    background: #fff;
-    color: #7a7676;
-    -moz-transition: all 0.2s ease-out 0s;
-    -webkit-transition: all 0.2s ease-out 0s;
-    transition: all 0.2s ease-out 0s;
-    text-decoration: none;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-}
+        .directory-list li a {
+            display: block;
+            padding: 8px 0;
+            text-align: center;
+            text-transform: uppercase;
+            background: #fff;
+            color: #7a7676;
+            -moz-transition: all 0.2s ease-out 0s;
+            -webkit-transition: all 0.2s ease-out 0s;
+            transition: all 0.2s ease-out 0s;
+            text-decoration: none;
+            border-radius: 5px;
+            -webkit-border-radius: 5px;
+        }
 
-.directory-list li a:hover,
-.directory-info-row .social-links li a:hover {
-    background: #ff6c60;
-    color: #fff;
-}
+            .directory-list li a:hover,
+            .directory-info-row .social-links li a:hover {
+                background: #ff6c60;
+                color: #fff;
+            }
 
 .directory-info-row {
     display: inline-block;
@@ -6081,39 +6082,39 @@ a.guest-on i {
     margin-top: 20px;
 }
 
-.directory-info-row .social-links {
-    display: inline-block;
-    margin-bottom: 10px;
-}
+    .directory-info-row .social-links {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
 
-.directory-info-row .social-links li {
-    display: inline-block;
-}
+        .directory-info-row .social-links li {
+            display: inline-block;
+        }
 
-.directory-info-row .social-links li a {
-    background: #eff0f4;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    display: inline-block;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    color: #7a7676;
-}
+            .directory-info-row .social-links li a {
+                background: #eff0f4;
+                width: 30px;
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                display: inline-block;
+                border-radius: 5px;
+                -webkit-border-radius: 5px;
+                color: #7a7676;
+            }
 
-.directory-info-row h4,
-.directory-info-row a {
-    color: #424f63;
-}
+    .directory-info-row h4,
+    .directory-info-row a {
+        color: #424f63;
+    }
 
-.directory-info-row .thumb {
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    height: auto;
-    width: 175px;
-    margin-right: 10px;
-}
+    .directory-info-row .thumb {
+        border-radius: 5px;
+        -webkit-border-radius: 5px;
+        height: auto;
+        width: 175px;
+        margin-right: 10px;
+    }
 
 /*mega-menu*/
 
@@ -6122,41 +6123,41 @@ a.guest-on i {
     margin: 5px 0 0 10px;
 }
 
-.mega-menu .navbar-nav {
-    /*height: 55px;*/
-}
+    .mega-menu .navbar-nav {
+        /*height: 55px;*/
+    }
 
-/*.wide-full {*/
-/*width: 98%;*/
-/*}*/
+    /*.wide-full {*/
+    /*width: 98%;*/
+    /*}*/
 
-.mega-menu ul li a {
-    margin-bottom: 5px;
-    display: block;
-    color: #323232;
-    font-size: 14px;
-}
+    .mega-menu ul li a {
+        margin-bottom: 5px;
+        display: block;
+        color: #323232;
+        font-size: 14px;
+    }
 
-.mega-menu ul li a:hover,
-.mega-menu ul li a:focus {
-    color: #ff6c60;
-    background-color: #fff;
-}
+        .mega-menu ul li a:hover,
+        .mega-menu ul li a:focus {
+            color: #ff6c60;
+            background-color: #fff;
+        }
 
-.mega-menu .nav .open>a,
-.mega-menu .nav .open>a:hover,
-.mega-menu .nav .open>a:focus {
-    background-color: #fff;
-}
+    .mega-menu .nav .open > a,
+    .mega-menu .nav .open > a:hover,
+    .mega-menu .nav .open > a:focus {
+        background-color: #fff;
+    }
 
-.mega-menu ul li a i {
-    padding-right: 5px;
-    width: 20px;
-}
+    .mega-menu ul li a i {
+        padding-right: 5px;
+        width: 20px;
+    }
 
-.mega-menu ul li.dropdown a:hover {
-    background: none;
-}
+    .mega-menu ul li.dropdown a:hover {
+        background: none;
+    }
 
 .mega-nav #main-content {
     margin-left: 0px;
@@ -6193,7 +6194,7 @@ a.guest-on i {
 }
 
 .mega-bg {
-    background-image: url("/BackendScript/img/mega-menu/corner_image.jpg");
+    background-image: url("../img/mega-menu/corner_image.jpg");
     background-repeat: no-repeat;
     background-position: bottom right;
     position: absolute;
@@ -6219,10 +6220,10 @@ a.guest-on i {
     padding: 1.5rem;
 }
 
-.mega-menu .dropdown-menu .nav-link {
-    padding-left: 0;
-    padding-right: 0;
-}
+    .mega-menu .dropdown-menu .nav-link {
+        padding-left: 0;
+        padding-right: 0;
+    }
 
 .yamm-content .accordion h5 .btn-link {
     font-size: 14px;
@@ -6264,9 +6265,9 @@ a.guest-on i {
     width: auto;
 }
 
-.p-details .bio-row p span.bold {
-    width: 100px;
-}
+    .p-details .bio-row p span.bold {
+        width: 100px;
+    }
 
 .p-team a {
     display: inline-block;
@@ -6296,20 +6297,20 @@ a.guest-on i {
     margin: 0 5px 7px 0;
 }
 
-.p-tag-list li a {
-    display: inline-block;
-    border: 1px solid #ddd;
-    padding: 3px 10px;
-    color: #000000;
-    border-radius: 4px;
-    font-size: 12px;
-}
+    .p-tag-list li a {
+        display: inline-block;
+        border: 1px solid #ddd;
+        padding: 3px 10px;
+        color: #797979;
+        border-radius: 4px;
+        font-size: 12px;
+    }
 
-.p-tag-list li a:hover {
-    background: #ff6c60;
-    border-color: #ff6c60;
-    color: #fff;
-}
+        .p-tag-list li a:hover {
+            background: #ff6c60;
+            border-color: #ff6c60;
+            color: #fff;
+        }
 
 .m-thumb img {
     width: 100%;
@@ -6355,15 +6356,15 @@ a.guest-on i {
     /* top: auto; */
 }
 
-.modal.fade.modal-dialog-center .modal-dialog {
-    display: table;
-    height: 100%;
-}
+    .modal.fade.modal-dialog-center .modal-dialog {
+        display: table;
+        height: 100%;
+    }
 
-.modal.fade.modal-dialog-center .modal-content-wrap {
-    display: table-cell;
-    vertical-align: middle;
-}
+    .modal.fade.modal-dialog-center .modal-content-wrap {
+        display: table-cell;
+        vertical-align: middle;
+    }
 
 /*-----*/
 
@@ -6435,51 +6436,51 @@ header.blue-bg {
     border-bottom: 1px solid #16aad8;
 }
 
-header.green-bg .sidebar-toggle-box .fa-bars,
-header.green-bg .sb-toggle-right,
-header.dark-bg .sidebar-toggle-box .fa-bars,
-header.dark-bg .sb-toggle-right,
-header.purple-bg .sidebar-toggle-box .fa-bars,
-header.purple-bg .sb-toggle-right,
-header.blue-bg .sidebar-toggle-box .fa-bars,
-header.blue-bg .sb-toggle-right {
-    color: #fff;
-}
+    header.green-bg .sidebar-toggle-box .fa-bars,
+    header.green-bg .sb-toggle-right,
+    header.dark-bg .sidebar-toggle-box .fa-bars,
+    header.dark-bg .sb-toggle-right,
+    header.purple-bg .sidebar-toggle-box .fa-bars,
+    header.purple-bg .sb-toggle-right,
+    header.blue-bg .sidebar-toggle-box .fa-bars,
+    header.blue-bg .sb-toggle-right {
+        color: #fff;
+    }
 
-header.green-bg ul.top-menu>li>a,
+header.green-bg ul.top-menu > li > a,
 header.green-bg .search {
     border-color: #9dc867 !important;
     color: #fff;
 }
 
-header.dark-bg ul.top-menu>li>a,
+header.dark-bg ul.top-menu > li > a,
 header.dark-bg .search {
     border-color: #3a495b !important;
     color: #fff;
 }
 
-header.purple-bg ul.top-menu>li>a,
+header.purple-bg ul.top-menu > li > a,
 header.purple-bg .search {
     border-color: #9587e6 !important;
     color: #fff;
 }
 
-header.blue-bg ul.top-menu>li>a,
+header.blue-bg ul.top-menu > li > a,
 header.blue-bg .search {
     border-color: #18b7e8 !important;
     color: #fff;
 }
 
-header.green-bg ul.top-menu>li>a:hover .username,
-header.green-bg ul.top-menu>li>a:focus .username,
-header.dark-bg ul.top-menu>li>a:hover .username,
-header.dark-bg ul.top-menu>li>a:focus .username,
-header.purple-bg ul.top-menu>li>a:hover .username,
-header.purple-bg ul.top-menu>li>a:focus .username,
-header.blue-bg ul.top-menu>li>a:hover .username,
-header.blue-bg ul.top-menu>li>a:focus .username {
-    color: #323232 !important;
-}
+    header.green-bg ul.top-menu > li > a:hover .username,
+    header.green-bg ul.top-menu > li > a:focus .username,
+    header.dark-bg ul.top-menu > li > a:hover .username,
+    header.dark-bg ul.top-menu > li > a:focus .username,
+    header.purple-bg ul.top-menu > li > a:hover .username,
+    header.purple-bg ul.top-menu > li > a:focus .username,
+    header.blue-bg ul.top-menu > li > a:hover .username,
+    header.blue-bg ul.top-menu > li > a:focus .username {
+        color: #323232 !important;
+    }
 
 header.green-bg .search,
 header.dark-bg .search,
@@ -6503,14 +6504,14 @@ header.blue-bg .top-nav .nav .caret {
     border-top-color: #fff;
 }
 
-header.green-bg ul.top-menu>li>a:hover .caret,
-header.green-bg ul.top-menu>li>a:focus .caret,
-header.dark-bg ul.top-menu>li>a:hover .caret,
-header.dark-bg ul.top-menu>li>a:focus .caret,
-header.purple-bg ul.top-menu>li>a:hover .caret,
-header.purple-bg ul.top-menu>li>a:focus .caret,
-header.blue-bg ul.top-menu>li>a:hover .caret,
-header.blue-bg ul.top-menu>li>a:focus .caret {
+header.green-bg ul.top-menu > li > a:hover .caret,
+header.green-bg ul.top-menu > li > a:focus .caret,
+header.dark-bg ul.top-menu > li > a:hover .caret,
+header.dark-bg ul.top-menu > li > a:focus .caret,
+header.purple-bg ul.top-menu > li > a:hover .caret,
+header.purple-bg ul.top-menu > li > a:focus .caret,
+header.blue-bg ul.top-menu > li > a:hover .caret,
+header.blue-bg ul.top-menu > li > a:focus .caret {
     border-bottom-color: #000;
     border-top-color: #000;
 }
@@ -6533,22 +6534,22 @@ header.blue-bg .search {
     color: #000;
 }
 
-header.green-bg .search:focus,
-header.dark-bg .search:focus,
-header.purple-bg .search:focus,
-header.blue-bg .search:focus {
-    margin-top: 5px;
-    width: 180px;
-    border: 1px solid #eaeaea;
-    box-shadow: none;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    color: #c8c8c8;
-    font-weight: 300;
-}
+    header.green-bg .search:focus,
+    header.dark-bg .search:focus,
+    header.purple-bg .search:focus,
+    header.blue-bg .search:focus {
+        margin-top: 5px;
+        width: 180px;
+        border: 1px solid #eaeaea;
+        box-shadow: none;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+        color: #c8c8c8;
+        font-weight: 300;
+    }
 
 /*toaster*/
 
@@ -6578,8 +6579,8 @@ header.blue-bg .search:focus {
     margin-bottom: 10px;
 }
 
-#toast-container>div,
-#toast-container> :hover {
+#toast-container > div,
+#toast-container > :hover {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
@@ -6609,31 +6610,32 @@ header.blue-bg .search:focus {
     border-radius: 4px;
 }
 
-.note-editor .note-statusbar .note-resizebar {
-    border-top: 1px solid #e2e2e4;
-}
+    .note-editor .note-statusbar .note-resizebar {
+        border-top: 1px solid #e2e2e4;
+    }
 
-.note-editor .note-statusbar {
-    background: #fff;
-    border-radius: 4px;
-}
+    .note-editor .note-statusbar {
+        background: #fff;
+        border-radius: 4px;
+    }
 
-.note-editor .note-editable ul {
-    padding-left: 40px;
-}
+    .note-editor .note-editable ul {
+        padding-left: 40px;
+    }
 
-.note-editor .note-editable ul li {
-    list-style: disc;
-}
+        .note-editor .note-editable ul li {
+            list-style: disc;
+        }
 
 /*select 2*/
 
 .select2-container {
     width: 100% !important;
-    z-index: 5000;
 }
 
-.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+.select2-container--default
+.select2-selection--multiple
+.select2-selection__rendered {
     padding: 3px;
 }
 
@@ -6647,15 +6649,18 @@ header.blue-bg .search:focus {
     height: 36px;
 }
 
-.select2-container--default .select2-selection--single .select2-selection__rendered {
+.select2-container--default
+.select2-selection--single
+.select2-selection__rendered {
     line-height: 34px;
 }
 
-.select2-container--default .select2-selection--single .select2-selection__arrow {
+.select2-container--default
+.select2-selection--single
+.select2-selection__arrow {
     height: 34px;
 }
 
-
 /*-----*/
 
 .is-sidebar-nav-open #sidebar {
@@ -6678,6 +6683,6 @@ header.blue-bg .search:focus {
     text-align: right;
 }
 
-.comp-currency-input:focus {
-    opacity: 1 !important;
-}
\ No newline at end of file
+    .comp-currency-input:focus {
+        opacity: 1 !important;
+    }
diff --git a/wwwroot/js/coregen.js b/wwwroot/js/coregen.js
index 9006b28..11da202 100644
--- a/wwwroot/js/coregen.js
+++ b/wwwroot/js/coregen.js
@@ -562,6 +562,59 @@ function GetSubMenu(result){
     return x;
 }
 
+function GetNoti(noti_url, mynoti, root) {
+    var refresh_noti = function (result) {
+        //console.log(result);
+        //console.log(result.unread.length);
+
+        var dropdown = "";
+
+        if (result.unread.length <= 0) {
+            dropdown = '<div data-toggle="dropdown" class="dropdown-toggle" href="#" style="display: flex;"><i class="fa fa-bell" style="font-size: 19px;color:#ccc"></i></div>';
+        } else {
+            dropdown = '<div data-toggle="dropdown" class="dropdown-toggle" href="#" style="display: flex;"><i class="fa fa-bell" style="font-size: 19px;color:red"></i><div style="color: red;font-size:18px">+' + result.unread.length+'</div></div>';
+        }
+        $(mynoti).append(dropdown);
+
+        var tag = "";
+        var temp = "'";
+
+        if (result.readed.length + result.unread.length > 0) {
+
+            tag += '<ul class="dropdown-menu extended notification" style="min-width: 500px;">';            
+
+            if (result.unread.length > 0) {
+                tag += '<li><p class="red">แจ้งเตือนมาใหม่</p></li>';
+                $.each(result.unread, function (i, data) {
+                    tag += '<li><a href="javascript:window_open_from_root(' + temp + root + '/read_notification_url/' + data.id + '?url=' + data.data.url + temp +');"><div class="badge-noti">New</div><span class="message">' + data.data.title+'</span><span class="time"> วันที่ 16/02/2564 เวลา 16:02 น.</span></a></li>';
+                });
+            }
+
+            if (result.readed.length > 0) {
+                tag += '<li><p class="green">แจ้งเตือนที่อ่านแล้ว</p></li>';
+                $.each(result.readed, function (i, data) {
+                    tag += '<li><a href="javascript:window_open_from_root(' + temp + root + '/read_notification_url/' + data.id + '?url=' + data.data.url + temp +');"><span class="message">' + data.data.title +'</span><span class="time"> วันที่ 16/02/2564 เวลา 16:02 น.</span></a></li>';
+                });
+            }            
+
+            tag += '</ul>';
+        }        
+
+        $(mynoti).append(tag);
+
+        endLoad();
+    };
+
+    var noti_error = function (xhr, status, error) {
+        var errorMessage = xhr.responseText;
+        console.log("noti error = " + errorMessage);
+        endLoad();
+    }
+
+    startLoad();
+    AjaxGetRequest(noti_url, refresh_noti, noti_error);
+}
+
 function GetMenu(module, mymenu, menu_url){
     var refresh_menu = function (result) {
         $.each(result, function (i, data) {