diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 7f521de34b..90a754b1a9 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -131,10 +131,10 @@
                                         <div class="version-select">
                                             <div class="input-group">
                                                 @*<div class="input-group-prepend">
-                                                    <label class="input-group-text">
-                                                        <i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
-                                                    </label>
-                                                </div>*@
+                                                        <label class="input-group-text">
+                                                            <i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
+                                                        </label>
+                                                    </div>*@
                                                 <select asp-items="Model.LanguageSelectListItems"
                                                         class="form-control"
                                                         onchange="window.location.replace(this.value)">
@@ -163,25 +163,6 @@
                             </div>
                         </div>
 
-                        @if (Model.FullSearchEnabled)
-                        {
-                            <div class="docs-version mt-2 mb-4">
-                                <div class="version-select">
-                                    <div class="input-group">
-                                        <div class="input-group-prepend">
-                                            <label class="input-group-text"><i class="fa fa-search"></i></label>
-                                        </div>
-
-                                        <input class="form-control"
-                                               id="fullsearch"
-                                               type="search"
-                                               data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
-                                               placeholder="@L["FullSearch"].Value"
-                                               aria-label="Filter">
-                                    </div>
-                                </div>
-                            </div>
-                        }
 
                         @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
                         {
@@ -209,48 +190,60 @@
             {
                 <div class="col-md-7 docs-content bg-white">
                     <div class="docs-link-btns">
-                        <div class="float-left">
-                            @(L["ShareOn"].Value + " :")
-                            <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                                <i class="fa fa-twitter"></i>
-                            </a>
-                            <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                                <i class="fa fa-linkedin"></i>
-                            </a>
-                            <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                                <i class="fa fa-envelope-square"></i>
-                            </a>
-                        </div>
-
-                        <div class="float-right">
-                            @if (!string.IsNullOrEmpty(Model.Document.EditLink))
-                            {
-                                <a href="@Model.Document.EditLink" target="_blank">
-                                    <i class="fa fa-edit"></i>
-                                    @(L["Edit"])
-                                    <span class="for-desktop">(@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString())</span>
-                                </a>
-                            }
-                        </div>
+                        <div class="row">
+                            <div class="col">
+                                @if (Model.FullSearchEnabled)
+                                {
+                                    <div class="search-area">
+                                        <div class="input-group">
+                                            <div class="input-group-prepend">
+                                                <label class="input-group-text"><i class="fa fa-search"></i></label>
+                                            </div>
 
-                        <div class="float-right mr-3">
-                            @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
-                            {
-                            <span class="for-desktop">
-                                @(L["Contributors"].Value + " :") </span>
-                                @foreach (var contributor in Model.Document.Contributors)
+                                            <input class="form-control"
+                                                   id="fullsearch"
+                                                   type="search"
+                                                   data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
+                                                   placeholder="@L["FullSearch"].Value"
+                                                   aria-label="Filter">
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+                            <div class="col-auto">
+                                <div class="cont-container">
+                                    @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
+                                    {
+                                        <span class="for-desktop mr-3">
+                                            @(L["Contributors"].Value)
+                                        </span>
+                                        @foreach (var contributor in Model.Document.Contributors)
+                                        {
+                                            <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                                <img src="@contributor.AvatarUrl"
+                                                     class="rounded-circle"
+                                                     alt="Avatar"
+                                                     height="21"
+                                                     width="21"
+                                                     title="@contributor.Username" />
+                                            </a>
+                                        }
+                                    }
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                @if (!string.IsNullOrEmpty(Model.Document.EditLink))
                                 {
-                                    <a href="@contributor.UserProfileUrl" target="_blank">
-                                        <img src="@contributor.AvatarUrl"
-                                             class="rounded-circle"
-                                             alt="Avatar"
-                                             height="21"
-                                             width="21"
-                                             title="@contributor.Username" />
+                                    <a href="@Model.Document.EditLink" target="_blank">
+                                        <i class="fa fa-edit"></i>
+                                        @(L["Edit"])
+                                        <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
                                     </a>
                                 }
-                                }
-</div>
+
+                            </div>
+                        </div> 
+                         
 
                     </div>
 
@@ -318,8 +311,20 @@
                         </div>
                     </div>
                 </div>
-
+                <!-- Right Bar -->
                 <div class="col-md-2 docs-page-index position-relative bg-light">
+                    <div class="doc-social-btns">
+                        @(L["ShareOn"].Value + " :")
+                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                            <i class="fa fa-twitter"></i>
+                        </a>
+                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                            <i class="fa fa-linkedin"></i>
+                        </a>
+                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                            <i class="fa fa-envelope-square"></i>
+                        </a>
+                    </div>
                     <div id="scroll-index" class="docs-inner-anchors mt-2">
                         <h5>@L["InThisDocument"]</h5>
                         <nav id="docs-sticky-index" class="navbar index-scroll">
@@ -350,17 +355,17 @@
 else
 {
     if (!Model.ProjectFound)
-        {
-             @(await Component.InvokeAsync<ErrorViewComponent>(new
-              {
-                  model = new ErrorPageModel
-                  {
-                      RedirectUrl = Model.DocumentsUrlPrefix,
-                      ErrorCode =  "404",
-                      ErrorMessage = L.GetString("ProjectNotFound")
-                  }
-              }))
-        }
+    {
+        @(await Component.InvokeAsync<ErrorViewComponent>(new
+         {
+             model = new ErrorPageModel
+             {
+                 RedirectUrl = Model.DocumentsUrlPrefix,
+                 ErrorCode = "404",
+                 ErrorMessage = L.GetString("ProjectNotFound")
+             }
+         }))
+    }
 
     if (!Model.DocumentFound)
     {
@@ -370,9 +375,9 @@ else
               {
                   RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
                                 + (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
-                  ErrorCode =  "404",
+                  ErrorCode = "404",
                   ErrorMessage = L.GetString("DocumentNotFound"),
-                  AutoRedirect =  !Model.DocumentName.IsNullOrWhiteSpace()
+                  AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
               }
           }))
     }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
index 1b0246f2bb..aaffc53ddf 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
@@ -109,11 +109,13 @@
         var wWidth = $(window).width();
         if (wWidth > 766) {
             $("#sidebar-scroll").mCustomScrollbar({
-                theme: "minimal"
+                theme: "minimal",
+                alwaysShowScrollbar: 0,
             });
 
             $("#scroll-index").mCustomScrollbar({
-                theme: "minimal-dark"
+                theme: "minimal-dark",
+                alwaysShowScrollbar: 0,
             });
         }
     }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index c25daac526..92834197e6 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -65,10 +65,12 @@
         height: 100vh; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
           display: block;
-          height: calc(100vh - 320px);
-          overflow-y: auto; }
+          height: calc(100vh - 230px);
+          overflow-y: auto;
+          margin-right: 12px !important;
+          margin-top: 20px !important; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
-          font-size: .935em;
+          font-size: .9em;
           list-style: none;
           padding: 0 1rem;
           margin: 0; }
@@ -179,26 +181,34 @@
         .docs-page .docs-content .contributors a:hover {
           text-decoration: none; }
     .docs-page .docs-content .docs-link-btns {
-      border-bottom: 1px solid #f4f5f7;
-      background: #fdfdfd;
-      padding: 10px 20px;
+      background: #f5f7fa;
+      padding: 15px 30px;
       margin: 0 -15px;
       text-align: right;
       font-size: .8em;
-      min-height: 40px; }
+      min-height: 48px; }
       .docs-page .docs-content .docs-link-btns a {
-        color: #999; }
+        color: #222; }
+        .docs-page .docs-content .docs-link-btns a .text-muted {
+          color: #ccc !important; }
         .docs-page .docs-content .docs-link-btns a:hover {
-          color: #444;
+          color: #000;
           text-decoration: none; }
-      .docs-page .docs-content .docs-link-btns .twitter {
-        color: #00ACEE; }
-      .docs-page .docs-content .docs-link-btns .linkedin {
-        color: #0077B5; }
-      .docs-page .docs-content .docs-link-btns .email {
-        color: #5a5a5a; }
-      .docs-page .docs-content .docs-link-btns .share-button {
-        margin-left: 10px; }
+      .docs-page .docs-content .docs-link-btns .search-area {
+        margin: -5px 0 -5px -10px;
+        box-shadow: 0 0 10px #e8e8e8; }
+        .docs-page .docs-content .docs-link-btns .search-area .input-group-text {
+          background: white;
+          border: 0;
+          color: #000;
+          font-size: 1em; }
+        .docs-page .docs-content .docs-link-btns .search-area .form-control {
+          background: #fff;
+          border: 0;
+          font-size: 1em;
+          padding-left: 0;
+          outline: 0;
+          box-shadow: none; }
     .docs-page .docs-content .docs-text-field {
       padding: 2rem; }
     .docs-page .docs-content article.docs-body {
@@ -259,13 +269,46 @@
           background-color: #f6f8fa; }
         .docs-page .docs-content article.docs-body table img {
           background-color: initial; }
+  .docs-page .doc-social-btns {
+    margin: 0 -15px 0;
+    font-size: .8em;
+    background: #e9ecf0;
+    height: 53px;
+    padding: 15px 20px;
+    position: fixed;
+    top: 0px;
+    width: 100%; }
+    .docs-page .doc-social-btns a:hover {
+      text-decoration: none; }
+    .docs-page .doc-social-btns .twitter {
+      color: #00ACEE; }
+    .docs-page .doc-social-btns .linkedin {
+      color: #0077B5; }
+    .docs-page .doc-social-btns .email {
+      color: #5a5a5a; }
+    .docs-page .doc-social-btns .share-button {
+      margin-left: 10px; }
+  .docs-page .cont-container a.cont-avatar {
+    position: relative; }
+    .docs-page .cont-container a.cont-avatar img {
+      width: 24px;
+      height: 24px;
+      box-shadow: 0 0 8px #c1bbbb;
+      border: 2px solid #fff;
+      margin-left: -10px;
+      display: inline-block;
+      margin-top: -2px;
+      transition: .2s; }
+  .docs-page .cont-container:hover a.cont-avatar img {
+    margin-left: -2px; }
   .docs-page .docs-page-index {
-    min-height: 96vh; }
+    min-height: 90vh;
+    background-color: #f5f7fa !important; }
     .docs-page .docs-page-index #scroll-index {
-      max-height: 96vh; }
+      max-height: 90vh; }
     .docs-page .docs-page-index .docs-inner-anchors {
       position: fixed;
-      top: 0px;
+      top: 50px;
       padding: 10px;
       font-size: .90em; }
       .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
@@ -617,3 +660,9 @@ div.code-toolbar > .toolbar a {
         margin-left: -36px; } }
     .scrolledMore .alert-criteria p.alert-p {
       display: none; }
+
+.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+  opacity: 1 !important;
+  filter: "alpha(opacity=1)";
+  -ms-filter: "alpha(opacity=1)"; }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
index 9a3b7d32e5..9c02e19529 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
@@ -1 +1 @@
-body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{text-decoration:none;}.docs-page .docs-sidebar{padding-right:1rem;position:relative;top:0;left:0;position:fixed;background:#1d1d1d;}.docs-page .docs-sidebar .input-group{border-radius:5px;overflow:hidden;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:0 10px;font-size:.9rem;width:26px;height:34px;line-height:1;border-radius:0;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i{color:#666;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px 2px 10px;border:0;min-height:34px;height:34px;font-size:.9em;border-radius:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding:0 10px 2px 6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 320px);overflow-y:auto;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.935em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge{text-transform:uppercase;font-size:9px;position:relative;letter-spacing:.125px;top:-2px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.35rem;color:#000;font-weight:700;padding:15px 0 15px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;min-height:100vh;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;min-height:40px;}.docs-page .docs-content .docs-link-btns a{color:#999;}.docs-page .docs-content .docs-link-btns a:hover{color:#444;text-decoration:none;}.docs-page .docs-content .docs-link-btns .twitter{color:#00acee;}.docs-page .docs-content .docs-link-btns .linkedin{color:#0077b5;}.docs-page .docs-content .docs-link-btns .email{color:#5a5a5a;}.docs-page .docs-content .docs-link-btns .share-button{margin-left:10px;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:3px solid #d2dbe4;padding:1em 1.5em;background-color:#e9edf1;padding-bottom:.2em;font-size:1em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .docs-page-index{min-height:96vh;}.docs-page .docs-page-index #scroll-index{max-height:96vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#fff;opacity:.5;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#000;border-color:#000;color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;text-align:center;display:block;width:100%;background:#444;padding:6px 0 8px;border-radius:5px;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}@media(min-width:1100px){.container{max-width:1080px;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#1d1d1d;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.25rem;font-weight:700;display:block;margin-right:0;padding:10px 0 15px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;}
\ No newline at end of file
+body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{text-decoration:none;}.docs-page .docs-sidebar{padding-right:1rem;position:relative;top:0;left:0;position:fixed;background:#1d1d1d;}.docs-page .docs-sidebar .input-group{border-radius:5px;overflow:hidden;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:0 10px;font-size:.9rem;width:26px;height:34px;line-height:1;border-radius:0;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i{color:#666;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px 2px 10px;border:0;min-height:34px;height:34px;font-size:.9em;border-radius:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding:0 10px 2px 6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 230px);overflow-y:auto;margin-right:12px !important;margin-top:20px !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.9em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge{text-transform:uppercase;font-size:9px;position:relative;letter-spacing:.125px;top:-2px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.35rem;color:#000;font-weight:700;padding:15px 0 15px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;min-height:100vh;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{background:#f5f7fa;padding:15px 30px;margin:0 -15px;text-align:right;font-size:.8em;min-height:48px;}.docs-page .docs-content .docs-link-btns a{color:#222;}.docs-page .docs-content .docs-link-btns a .text-muted{color:#ccc !important;}.docs-page .docs-content .docs-link-btns a:hover{color:#000;text-decoration:none;}.docs-page .docs-content .docs-link-btns .search-area{margin:-5px 0 -5px -10px;box-shadow:0 0 10px #e8e8e8;}.docs-page .docs-content .docs-link-btns .search-area .input-group-text{background:#fff;border:0;color:#000;font-size:1em;}.docs-page .docs-content .docs-link-btns .search-area .form-control{background:#fff;border:0;font-size:1em;padding-left:0;outline:0;box-shadow:none;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:3px solid #d2dbe4;padding:1em 1.5em;background-color:#e9edf1;padding-bottom:.2em;font-size:1em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .doc-social-btns{margin:0 -15px 0;font-size:.8em;background:#e9ecf0;height:53px;padding:15px 20px;position:fixed;top:0;width:100%;}.docs-page .doc-social-btns a:hover{text-decoration:none;}.docs-page .doc-social-btns .twitter{color:#00acee;}.docs-page .doc-social-btns .linkedin{color:#0077b5;}.docs-page .doc-social-btns .email{color:#5a5a5a;}.docs-page .doc-social-btns .share-button{margin-left:10px;}.docs-page .cont-container a.cont-avatar{position:relative;}.docs-page .cont-container a.cont-avatar img{width:24px;height:24px;box-shadow:0 0 8px #c1bbbb;border:2px solid #fff;margin-left:-10px;display:inline-block;margin-top:-2px;transition:.2s;}.docs-page .cont-container:hover a.cont-avatar img{margin-left:-2px;}.docs-page .docs-page-index{min-height:90vh;background-color:#f5f7fa !important;}.docs-page .docs-page-index #scroll-index{max-height:90vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:50px;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#fff;opacity:.5;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#000;border-color:#000;color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;text-align:center;display:block;width:100%;background:#444;padding:6px 0 8px;border-radius:5px;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}@media(min-width:1100px){.container{max-width:1080px;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#1d1d1d;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.25rem;font-weight:700;display:block;margin-right:0;padding:10px 0 15px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:1 !important;filter:"alpha(opacity=1)";-ms-filter:"alpha(opacity=1)";}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index de56885610..cf25d91c4d 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -26,7 +26,7 @@ body {
         left: 0;
         position: fixed;
         background: #1d1d1d;
-         
+
         .input-group {
             border-radius: 5px;
             overflow: hidden;
@@ -103,12 +103,14 @@ body {
 
                 > ul {
                     display: block;
-                    height: calc(100vh - 320px);
+                    height: calc(100vh - 230px);
                     overflow-y: auto;
+                    margin-right: 12px !important;
+                    margin-top: 20px !important;
                 }
 
                 ul {
-                    font-size: .935em;
+                    font-size: .9em;
                     list-style: none;
                     padding: 0 1rem;
                     margin: 0;
@@ -298,37 +300,45 @@ body {
         }
 
         .docs-link-btns {
-            border-bottom: 1px solid #f4f5f7;
-            background: #fdfdfd;
-            padding: 10px 20px;
+            background: #f5f7fa;
+            padding: 15px 30px;
             margin: 0 -15px;
             text-align: right;
             font-size: .8em;
-            min-height: 40px;
+            min-height: 48px;
 
             a {
-                color: #999;
+                color: #222;
+
+                .text-muted {
+                    color: #ccc !important;
+                }
 
                 &:hover {
-                    color: #444;
+                    color: #000;
                     text-decoration: none;
                 }
             }
 
-            .twitter {
-                color: #00ACEE;
-            }
-
-            .linkedin {
-                color: #0077B5;
-            }
+            .search-area {
+                margin: -5px 0 -5px -10px;
+                box-shadow: 0 0 10px #e8e8e8;
 
-            .email {
-                color: #5a5a5a;
-            }
+                .input-group-text {
+                    background: white;
+                    border: 0;
+                    color: #000;
+                    font-size: 1em;
+                }
 
-            .share-button {
-                margin-left: 10px;
+                .form-control {
+                    background: #fff;
+                    border: 0;
+                    font-size: 1em;
+                    padding-left: 0;
+                    outline: 0;
+                    box-shadow: none;
+                }
             }
         }
 
@@ -432,16 +442,73 @@ body {
         }
     }
 
+    .doc-social-btns {
+        margin: 0 -15px 0;
+        font-size: .8em;
+        background: #e9ecf0;
+        height: 53px;
+        padding: 15px 20px;
+        position: fixed;
+        top: 0px;
+        width: 100%;
+
+        a:hover {
+            text-decoration: none;
+        }
+
+        .twitter {
+            color: #00ACEE;
+        }
+
+        .linkedin {
+            color: #0077B5;
+        }
+
+        .email {
+            color: #5a5a5a;
+        }
+
+        .share-button {
+            margin-left: 10px;
+        }
+    }
+
+    .cont-container {
+        a.cont-avatar {
+            position: relative;
+
+            img {
+                width: 24px;
+                height: 24px;
+                box-shadow: 0 0 8px #c1bbbb;
+                border: 2px solid #fff;
+                margin-left: -10px;
+                display: inline-block;
+                margin-top: -2px;
+                transition: .2s;
+            }
+        }
+
+        &:hover {
+            a.cont-avatar {
+                img {
+                    margin-left: -2px;
+                }
+            }
+        }
+    }
+
     .docs-page-index {
-        min-height: 96vh;
+        min-height: 90vh;
+        background-color: #f5f7fa !important;
 
         #scroll-index {
-            max-height: 96vh;
+            max-height: 90vh;
         }
 
         .docs-inner-anchors {
             position: fixed;
-            top: 0px;
+            top: 50px;
             padding: 10px;
             font-size: .90em;
 
@@ -517,11 +584,11 @@ body {
 
 
 .docs-page {
-    .docs-sidebar { 
+    .docs-sidebar {
         .docs-sidebar-wrapper {
 
             .docs-version {
-                .version-select { 
+                .version-select {
 
                     select.form-control, input.form-control {
                         background: #000000;
@@ -696,7 +763,6 @@ body {
     .container {
         max-width: 1080px;
     }
-
 }
 
 @media (min-width: 1366px) {
@@ -960,7 +1026,7 @@ div.code-toolbar > .toolbar a {
 @media screen and (max-width: 767px) {
     .navbar-logo {
         .navbar-brand {
-            display: inline-block; 
+            display: inline-block;
             margin: 0 auto !important;
             max-width: 70%;
             overflow: hidden;
@@ -1012,6 +1078,7 @@ div.code-toolbar > .toolbar a {
         }
     }
 }
+
 .scrolledMore {
     padding-top: 107px;
 
@@ -1034,4 +1101,10 @@ div.code-toolbar > .toolbar a {
         }
     }
 }
- 
\ No newline at end of file
+
+.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+    opacity: 1 !important;
+    filter: "alpha(opacity=1)";
+    -ms-filter: "alpha(opacity=1)";
+}