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 26f0dae890..0bfdd1e8c2 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
@@ -52,7 +52,7 @@
 {
         <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
          
-                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
+                    <div class="docs-sidebar-wrapper docs-sidebar">
 
                         <div class="docs-top">
                             <nav class="navbar navbar-logo">
@@ -84,7 +84,6 @@
                         </div>
 
                         <div class="docs-tree-list">
-                            <div class="">
                                 <div class="row gx-2 mb-2 ">
                                      @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
                                             {
@@ -173,7 +172,6 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>
 
                             @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
                             {
@@ -199,7 +197,7 @@
                 @if (Model.Document != null)
                 {
                     <div class="docs-content">
-                        <div class="top-container align-items-center mb-3">
+                        <div class="top-container mb-3">
                             <div class="row w-100 mx-0">
                                 <div class="col-12 col-lg-9 px-0">
                                     <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
@@ -291,8 +289,6 @@
                             </div>
                         </div>
 
-                    
-
                         <div class="docs-content-field">
                             <div class="docs-text-field">
                                 <div class="position-relative">
@@ -360,7 +356,7 @@
                     </div>
 
                     <!-- Right Bar -->
-                    <div class=" docs-page-index">
+                    <div class="docs-page-index">
                         <div class=" docs-inner-anchors">
                             <div class="card">
                                 <div class="card-body">
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 eddd0351fe..bbd253d306 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
@@ -2,35 +2,72 @@ body {
   position: relative;
   background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
 }
-
-.container {
+body .container {
   max-width: 1680px !important;
   padding: 0;
 }
-
-a {
+body a {
   text-decoration: none;
 }
-
-.btn-primary {
+body .btn-primary {
   background-color: #b84297 !important;
   font-size: 12px;
 }
-
-.docs-page {
-  padding: 0 1rem;
+body .for-mobile {
+  display: none;
 }
-.docs-page .anchorjs-link {
-  transition: all 0.25s linear;
-  -webkit-transition: all 0.25s linear;
+body .for-desktop {
+  display: inline-block;
 }
-.docs-page .anchorjs-link:hover {
-  text-decoration: none;
+body pre[class*=language-] {
+  padding: 1.4em 2em !important;
+  margin: 15px 0 25px !important;
+  border-radius: 12px;
 }
-.docs-page *:hover > .anchorjs-link {
-  margin-left: -0.8em !important;
-  transition: color 0.25s linear;
-  color: gray;
+body pre .token.keyword {
+  color: #569cd6;
+}
+body pre .token.atrule,
+body pre .token.attr-value,
+body pre .token.function,
+body pre .token.class-name {
+  color: #d69d85;
+}
+body :not(pre) > code[class*=language-],
+body pre[class*=language-] {
+  background: #211e1e !important;
+}
+body div.code-toolbar > .toolbar {
+  z-index: 7;
+}
+body div.code-toolbar > .toolbar span {
+  cursor: default;
+}
+body div.code-toolbar > .toolbar a {
+  cursor: copy;
+}
+body .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+body .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+  opacity: 1 !important;
+  filter: "alpha(opacity=1)";
+  -ms-filter: "alpha(opacity=1)";
+}
+body.scrolledMore {
+  padding-top: 107px;
+}
+body.scrolledMore .alert-criteria {
+  position: fixed;
+  top: 1rem;
+  z-index: 10;
+  border: 0;
+  margin-left: 0;
+}
+body.scrolledMore .alert-criteria p.alert-p {
+  display: none;
+}
+
+.docs-page {
+  padding: 0 1rem;
 }
 .docs-page .docs-sidebar {
   display: inline-block;
@@ -41,21 +78,44 @@ a {
   border-radius: 12px;
   background: #211e1e;
   padding: 0.5rem 1.75em;
+  width: 300px;
 }
-.docs-page .docs-sidebar .input-group {
-  border-radius: 5px;
-  overflow: hidden;
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  font-size: 1.35rem;
+  color: #fff;
+  font-weight: 500;
+  padding: 15px 0 15px;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: unset;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper {
-  width: 300px;
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 0.7em;
+  letter-spacing: 1px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control {
-  border: 0;
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  color: #fff;
+  opacity: 0.65;
+  transition: 0.2s;
+  font-size: 0.8em;
+  font-weight: 300;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
 }
-.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-top .navbar-logo .go-back-site:hover {
+  text-decoration: none;
+  opacity: 1;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
+.docs-page .docs-sidebar .docs-tree-list {
+  height: calc(100vh - 115px);
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version {
   position: relative;
   font-size: 12px;
   background-color: #121212;
@@ -67,19 +127,23 @@ a {
   background-position: right 0.75rem center !important;
   background-size: 16px 12px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version input[type=search] {
+.docs-page .docs-sidebar .docs-tree-list .docs-version input[type=search] {
   background-color: #121212 !important;
   min-height: 34px !important;
   height: 34px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version span {
+.docs-page .docs-sidebar .docs-tree-list .docs-version span {
   bottom: -5px;
   position: relative;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select {
   border-radius: 3px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group-text {
   padding: 0 0;
   font-size: 0.75rem;
   width: 15px;
@@ -90,88 +154,91 @@ a {
   background: transparent;
   top: 1px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group-text i {
   color: rgba(255, 255, 255, 0.3);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control {
   padding: 0 10px 2px 10px;
   border: 0;
   min-height: 30px;
   height: 30px;
   font-size: 1.17em;
   border-radius: 0px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select: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 {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:visited,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:focus,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:active,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:hover,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:visited {
   box-shadow: none;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select {
   padding: 0 0 2px 0;
   background-image: none;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter {
-  padding: 0 1rem;
-  margin: 0.5rem 0;
-  font-size: 0.9em;
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-select {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-  color: #ddd;
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-select::placeholder {
+  color: rgba(255, 255, 255, 0.3);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-  height: calc(100vh - 115px);
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control {
+  border: 0;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:visited {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select label {
+  background: #000000;
+  border-color: #000000;
+  color: #ddd;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
+.docs-page .docs-sidebar .docs-tree-list > ul {
   display: block;
   height: calc(100vh - 310px);
   overflow-y: auto;
   margin-right: -4px !important;
   margin-top: 20px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
+.docs-page .docs-sidebar .docs-tree-list ul {
   font-size: 14px;
   list-style: none;
   padding: 0 0 1em;
   margin: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
+.docs-page .docs-sidebar .docs-tree-list ul li {
   margin-left: 0px;
   padding-left: 24px;
   display: block;
   width: 100%;
   position: relative;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
-  color: #999;
+.docs-page .docs-sidebar .docs-tree-list ul li a {
+  color: #aaa;
   font-weight: 500;
   padding: 4px 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-tree-list ul li a:hover {
+  color: #fff;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
+.docs-page .docs-sidebar .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 {
+.docs-page .docs-sidebar .docs-tree-list ul li .badge {
   text-transform: uppercase;
   font-size: 9px;
   position: relative;
   letter-spacing: 0.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 {
+.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon {
   font-size: 0.85em;
   transition: 0.3s;
   width: 18px;
@@ -187,71 +254,35 @@ a {
   color: #aaa;
   cursor: default;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
+.docs-page .docs-sidebar .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 {
+.docs-page .docs-sidebar .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 {
+.docs-page .docs-sidebar .docs-tree-list ul li ul {
   padding: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li a {
+.docs-page .docs-sidebar .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 {
+.docs-page .docs-sidebar .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 {
+.docs-page .docs-sidebar .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;
+.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > a {
+  color: #fff;
   transition: 0.4s;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
+.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > span .fa {
   transform: rotate(90deg);
   color: #b84297;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
+.docs-page .docs-sidebar .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: 500;
-  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: 0.7em;
-  letter-spacing: 1px;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-  color: #000;
-  opacity: 0.65;
-  transition: 0.2s;
-  font-size: 0.8em;
-  font-weight: 300;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  text-align: center;
-  border-radius: 8px;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.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: 0.85em;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
-  display: block;
-}
 .docs-page .docs-content {
   display: inline-block;
   overflow-x: scroll;
@@ -260,40 +291,54 @@ a {
   margin-left: 300px;
   padding: 1rem 1rem;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content {
-    padding: 0 0;
-  }
+.docs-page .docs-content .top-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaeaea;
+  margin: 0 1.75em;
 }
-.docs-page .docs-content .contributors {
-  position: absolute;
-  top: 15px;
-  right: 5px;
+.docs-page .docs-content .top-container .breadcrumb {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  white-space: nowrap;
+  padding-bottom: 10px;
+}
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item {
+  color: #838690;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 9px 0 0px;
+  display: flex;
 }
-.docs-page .docs-content .contributors .contributors-avatar {
-  border-radius: 21px;
-  width: 21px;
-  height: 21px;
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item a {
+  color: #838690;
 }
-.docs-page .docs-content .contributors a {
-  padding: 0;
-  width: 21px;
-  height: 21px;
-  display: inline-block;
-  margin: 0 0 0 2px;
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item.active {
+  color: #c7c8c9;
+  font-weight: 400;
+}
+.docs-page .docs-content .top-container .doc-social-btns {
+  color: rgba(11, 22, 33, 0.5);
+  white-space: nowrap;
+  top: -2px;
+  position: relative;
 }
-.docs-page .docs-content .contributors a:hover {
+.docs-page .docs-content .top-container .doc-social-btns small {
+  font-size: 13px;
+}
+.docs-page .docs-content .top-container .doc-social-btns a:hover {
   text-decoration: none;
 }
+.docs-page .docs-content .top-container .doc-social-btns .share-button {
+  color: rgba(11, 22, 33, 0.5);
+  margin-left: 10px;
+}
 .docs-page .docs-content .docs-link-btns {
   font-size: 0.8em;
   padding: 0 1.75em;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content .docs-link-btns {
-    padding: 0 1.5rem;
-  }
-}
 .docs-page .docs-content .docs-link-btns a {
   color: #3e9fcb;
 }
@@ -326,44 +371,64 @@ a {
   outline: 0;
   box-shadow: none;
 }
-.docs-page .docs-content .docs-text-field {
+.docs-page .docs-content .docs-link-btns .cont-container .contributors-text {
+  color: rgba(11, 22, 33, 0.5);
+  font-size: 1.1em;
+  font-weight: 600;
+}
+.docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar {
+  position: relative;
+}
+.docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar img {
+  width: 32px;
+  height: 32px;
+  margin-left: -12px;
+  display: inline-block;
+  border: 2px solid #fff;
+  transition: 0.2s;
+  -webkit-transition: 0.2s;
+}
+.docs-page .docs-content .docs-link-btns .cont-container:hover a.cont-avatar img {
+  margin-left: -8px;
+}
+.docs-page .docs-content .docs-content-field .docs-text-field {
   padding: 1.5em;
 }
-.docs-page .docs-content article.docs-body {
+.docs-page .docs-content .docs-content-field article.docs-body {
   word-break: break-word;
 }
-.docs-page .docs-content article.docs-body h1 {
+.docs-page .docs-content .docs-content-field article.docs-body h1 {
   padding-top: 1rem;
   font-size: 2.25rem;
   padding-bottom: 10px;
 }
-.docs-page .docs-content article.docs-body h2 {
+.docs-page .docs-content .docs-content-field 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 {
+.docs-page .docs-content .docs-content-field article.docs-body h3,
+.docs-page .docs-content .docs-content-field article.docs-body h4,
+.docs-page .docs-content .docs-content-field article.docs-body h5,
+.docs-page .docs-content .docs-content-field 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 {
+.docs-page .docs-content .docs-content-field article.docs-body h1,
+.docs-page .docs-content .docs-content-field article.docs-body h2,
+.docs-page .docs-content .docs-content-field article.docs-body h3,
+.docs-page .docs-content .docs-content-field article.docs-body h4,
+.docs-page .docs-content .docs-content-field article.docs-body h5,
+.docs-page .docs-content .docs-content-field 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 {
+.docs-page .docs-content .docs-content-field article.docs-body h1 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h2 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h3 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h4 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h5 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h6 .anchor {
   position: absolute;
   right: -26px;
   font-size: 18px;
@@ -372,15 +437,15 @@ a {
   opacity: 0;
   transition: 0.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 {
+.docs-page .docs-content .docs-content-field article.docs-body h1:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h2:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h3:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h4:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h5:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h6:hover .anchor {
   opacity: 1;
 }
-.docs-page .docs-content article.docs-body .blockquote {
+.docs-page .docs-content .docs-content-field article.docs-body .blockquote {
   margin-bottom: 1rem;
   margin-left: 0;
   border-left: 3px solid rgba(184, 66, 151, 0.3);
@@ -389,83 +454,91 @@ a {
   font-size: 1em;
   border-radius: 12px;
 }
-.docs-page .docs-content article.docs-body img {
+.docs-page .docs-content .docs-content-field article.docs-body img {
   max-width: 100%;
   border: 1px solid #f4f5f7;
   margin: 15px 0 25px;
   box-shadow: 0 0 45px #f8f9fa;
   border-radius: 12px;
 }
-.docs-page .docs-content article.docs-body table {
+.docs-page .docs-content .docs-content-field article.docs-body table {
   display: block;
   overflow: auto;
   width: 100%;
 }
-.docs-page .docs-content article.docs-body table thead tr {
+.docs-page .docs-content .docs-content-field article.docs-body table thead tr {
   border-bottom: 2px inset;
 }
-.docs-page .docs-content article.docs-body table th {
+.docs-page .docs-content .docs-content-field 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 {
+.docs-page .docs-content .docs-content-field article.docs-body table td,
+.docs-page .docs-content .docs-content-field article.docs-body table th {
   border: 1px solid #dfe2e5;
   padding: 6px 13px;
 }
-.docs-page .docs-content article.docs-body table tr {
+.docs-page .docs-content .docs-content-field 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) {
+.docs-page .docs-content .docs-content-field article.docs-body table tr:nth-child(2n) {
   background-color: #f6f8fa;
 }
-.docs-page .docs-content article.docs-body table img {
+.docs-page .docs-content .docs-content-field article.docs-body table img {
   background-color: initial;
 }
-@media (max-width: 1200px) {
-  .docs-page .docs-content {
-    width: calc(100% - 300px);
-  }
+.docs-page .docs-content .docs-content-field .custom-input-group {
+  border: 1px solid rgba(11, 22, 33, 0.1);
+  background-color: white;
+  border-radius: 8px;
+  padding: 7px 1rem;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content {
-    width: 100%;
-    margin-left: 0;
-    padding-top: 80px;
-  }
+.docs-page .docs-content .docs-content-field .custom-input-group .input-group-text {
+  font-size: 12px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  color: rgba(11, 22, 33, 0.3);
 }
-.docs-page .cont-container .contributors-text {
-  color: rgba(11, 22, 33, 0.5);
-  font-size: 1.1em;
-  font-weight: 600;
+.docs-page .docs-content .docs-content-field .custom-input-group .form-select {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  background-position: right top;
 }
-.docs-page .cont-container a.cont-avatar {
-  position: relative;
+.docs-page .docs-content .docs-content-field .custom-input-group .form-select:focus {
+  box-shadow: none !important;
 }
-.docs-page .cont-container a.cont-avatar img {
-  width: 32px;
-  height: 32px;
-  margin-left: -12px;
-  display: inline-block;
-  transition: 0.2s;
-  border: 2px solid #fff;
+.docs-page .docs-content .docs-content-field .alert-criteria {
+  padding: 1.25rem 1.25rem;
+  max-width: 100%;
+  color: #3e9fcb;
+  background-color: #f4f6fa;
+  border-color: #f4f6fa;
+  border-radius: 12px;
+  background: rgba(190, 223, 238, 0.82);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
-@media (max-width: 992px) {
-  .docs-page .cont-container a.cont-avatar img {
-    width: 24px;
-    height: 24px;
-  }
+.docs-page .docs-content .docs-content-field .alert-criteria p.alert-p {
+  font-size: 0.96em;
 }
-.docs-page .cont-container:hover a.cont-avatar img {
-  margin-left: -8px;
+.docs-page .docs-content .docs-content-field .anchorjs-link {
+  transition: all 0.25s linear;
+  -webkit-transition: all 0.25s linear;
+}
+.docs-page .docs-content .docs-content-field .anchorjs-link:hover {
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-content-field *:hover > .anchorjs-link {
+  margin-left: -0.8em !important;
+  transition: color 0.25s linear;
+  color: gray;
 }
 .docs-page .docs-page-index {
   display: inline-block;
   position: absolute;
 }
-.docs-page .docs-page-index #scroll-index {
-  max-height: 90vh;
-}
 .docs-page .docs-page-index .docs-inner-anchors {
   position: fixed;
   z-index: 99;
@@ -505,9 +578,8 @@ a {
 .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-index {
+  max-height: 90vh;
 }
 .docs-page .docs-page-index .scroll-top-btn {
   display: none;
@@ -519,238 +591,57 @@ a {
 .docs-page .docs-page-index .scroll-top-btn.showup {
   display: block;
 }
-@media (min-width: 768px) and (max-width: 1200px) {
-  .docs-page .docs-page-index {
-    position: relative;
-    width: calc(100% - 300px);
-    margin-left: 300px;
-    padding: 0 1rem 1rem;
-  }
-  .docs-page .docs-page-index .docs-inner-anchors {
-    position: relative;
-    top: auto;
-    padding: 0 1.75em;
-  }
-}
-@media (max-width: 767px) {
-  .docs-page .docs-page-index {
-    position: relative;
-    width: 100%;
-    padding: 0 1.75em 1.75em;
-  }
-  .docs-page .docs-page-index .docs-inner-anchors {
-    position: relative;
-    top: auto;
-  }
-}
-.docs-page .card {
+.docs-page .docs-page-index .card {
   background-color: #fff;
   border-radius: 12px;
   border: none;
   width: 300px;
   box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 }
-.docs-page .card .card-header {
+.docs-page .docs-page-index .card .card-header {
   background-color: transparent;
   border-bottom: none;
   color: #0b1621;
 }
-.docs-page .card .card-header h5 {
+.docs-page .docs-page-index .card .card-header h5 {
   font-size: 19px;
 }
-.docs-page .card .card-body {
+.docs-page .docs-page-index .card .card-body {
   font-size: 13px;
   padding: 1.75em;
 }
-.docs-page .card .card-footer {
+.docs-page .docs-page-index .card .card-footer {
   padding: 0;
   background-color: transparent;
   border: none;
 }
-@media (max-width: 1200px) {
-  .docs-page .card {
-    width: 100%;
+
+@media (max-width: 767px) {
+  body {
+    font-size: 14px;
   }
-}
-.docs-page .top-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eaeaea;
-  margin: 0 1.75em;
-}
-.docs-page .top-container .breadcrumb {
-  margin-bottom: 0;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  white-space: nowrap;
-  padding-bottom: 10px;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item {
-  color: #838690;
-  font-size: 13px;
-  font-weight: 500;
-  padding: 0 9px 0 0px;
-  display: flex;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item a {
-  color: #838690;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item.active {
-  color: #c7c8c9;
-  font-weight: 400;
-}
-.docs-page .top-container .doc-social-btns {
-  color: rgba(11, 22, 33, 0.5);
-  white-space: nowrap;
-  top: -2px;
-  position: relative;
-}
-@media (max-width: 992px) {
-  .docs-page .top-container .doc-social-btns {
+  body .for-mobile {
+    display: inline-block;
+  }
+  body .for-desktop {
     display: none;
   }
-}
-.docs-page .top-container .doc-social-btns small {
-  font-size: 13px;
-}
-.docs-page .top-container .doc-social-btns a:hover {
-  text-decoration: none;
-}
-.docs-page .top-container .doc-social-btns .twitter,
-.docs-page .top-container .doc-social-btns .linkedin,
-.docs-page .top-container .doc-social-btns .email {
-  color: rgba(11, 22, 33, 0.5);
-}
-.docs-page .top-container .doc-social-btns .share-button {
-  margin-left: 10px;
-}
-.docs-page .custom-input-group {
-  border: 1px solid rgba(11, 22, 33, 0.1);
-  background-color: white;
-  border-radius: 8px;
-  padding: 7px 1rem;
-}
-.docs-page .custom-input-group .input-group-text {
-  font-size: 12px;
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  color: rgba(11, 22, 33, 0.3);
-}
-.docs-page .custom-input-group .form-select {
-  border: none;
-  padding: 0;
-  background-color: transparent;
-  background-position: right top;
-}
-.docs-page .custom-input-group .form-select:focus {
-  box-shadow: none !important;
-}
-
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background-color: transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background-color: transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
-  color: rgba(255, 255, 255, 0.3);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select label {
-  background: #000000;
-  border-color: #000000;
-  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: 0.85em;
-  transition: 0.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: 0.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;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-  color: #ddd;
-}
-
-@media (max-width: 767px) {
-  .docs-page {
-    padding: 0 0;
+  body .close-mmenu,
+body .close-dmenu {
+    position: absolute;
+    top: -78px;
+    left: 25px;
+    color: #fff;
+    font-size: 68px;
+    background: #fff;
+    opacity: 0;
   }
-
-  .docs-page .docs-content article.docs-body h1 {
-    padding-top: 1.5rem;
+  body.scrolledMore .alert-criteria {
+    top: 72px;
   }
 
-  .docs-page > .container-fluid {
-    display: block;
-  }
-  .docs-page > .container-fluid > .row {
-    display: block;
+  .docs-page {
+    padding: 0 0;
   }
   .docs-page .docs-sidebar {
     position: fixed;
@@ -762,228 +653,37 @@ a {
     left: 0;
     z-index: 100;
     right: 0;
-  }
-  .docs-page .docs-sidebar.docs-sidebar-wrapper {
-    max-width: 100%;
-    width: 100%;
-    top: 0px;
     margin: 0 !important;
     height: 72px;
     border-radius: 0;
   }
-  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-    padding: 0.5rem 1.5rem 2rem 1.5rem;
-    position: fixed;
-    top: 70px;
-    font-size: 17px;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    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 {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo {
     padding: 0rem;
     padding-top: 0.3rem;
     display: block;
     text-align: center;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-brand {
+    display: inline-block;
     font-size: 1.25rem;
-    font-weight: 500;
-    display: block;
-    margin-right: 0em;
     padding: 10px 0 15px;
-    text-transform: uppercase;
+    margin: 0 auto !important;
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-brand .docs-logo {
     width: 110px;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .go-back-site {
     display: none;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+  .docs-page .docs-sidebar .docs-top .navbar.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 {
-    max-width: 100%;
-    display: block !important;
-  }
-  .docs-page .docs-content .docs-text-field {
-    padding: 1rem 1.5rem;
-  }
-}
-.for-mobile {
-  display: none;
-}
-
-.for-desktop {
-  display: inline-block;
-}
-
-pre[class*=language-] {
-  padding: 1.4em 2em !important;
-  margin: 15px 0 25px !important;
-  border-radius: 12px;
-}
-
-code {
-  padding: 0.2em 0.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: #211e1e !important;
-}
-
-div.code-toolbar > .toolbar {
-  z-index: 7;
-}
-
-div.code-toolbar > .toolbar span {
-  cursor: default;
-}
-
-div.code-toolbar > .toolbar a {
-  cursor: copy;
-}
-
-.logo-nav ul {
-  width: 300px !important;
-}
-
-.alert-criteria {
-  padding: 1.25rem 1.25rem;
-  max-width: 100%;
-  color: #3e9fcb;
-  background-color: #f4f6fa;
-  border-color: #f4f6fa;
-  border-radius: 12px;
-  background: rgba(190, 223, 238, 0.82);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-}
-.alert-criteria p.alert-p {
-  font-size: 0.96em;
-}
-.alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-  font-size: 0.96em;
-}
-@media screen and (max-width: 767px) {
-  .alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-    font-size: 0.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: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-}
-
-.scrolledMore {
-  padding-top: 107px;
-}
-.scrolledMore .alert-criteria {
-  position: fixed;
-  top: 1rem;
-  z-index: 10;
-  border: 0;
-  margin-left: 0;
-}
-@media screen and (max-width: 767px) {
-  .scrolledMore .alert-criteria {
-    top: 72px;
-  }
-}
-.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)";
-}
-
-@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;
-  }
-
-  .docs-page .top-container {
-    margin-top: 10px;
-  }
-
-  .navbar {
-    padding: 0.5rem 1.75rem;
-  }
-  .navbar .navbar-collapse {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse {
     background: #38003d;
     position: fixed;
     top: 86px;
@@ -993,15 +693,15 @@ div.code-toolbar > .toolbar a {
     height: calc(100vh - 86px);
     z-index: 100 !important;
   }
-  .navbar .navbar-collapse .navbar-nav {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav {
     height: 100vh;
     padding: 20px 30px;
     overflow: auto;
   }
-  .navbar .navbar-collapse .navbar-nav .nav-link {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav .nav-link {
     padding: 1.2rem !important;
   }
-  .navbar .navbar-toggler {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-toggler {
     padding: 0.5rem 0.75rem;
     font-size: 1.5rem;
     line-height: 1;
@@ -1011,34 +711,101 @@ div.code-toolbar > .toolbar a {
     color: #fff !important;
     margin-left: -1rem;
   }
-
-  .section-with-logos img {
+  .docs-page .docs-sidebar .docs-top .open-dmenu {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+  }
+  .docs-page .docs-sidebar .docs-tree-list {
+    padding: 0.5rem 1.5rem 2rem 1.5rem;
+    position: fixed;
+    top: 70px;
+    font-size: 17px;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 100;
+    background: #1d1d1d;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-tree-list .docs-filter {
+    padding: 0 0 1rem !important;
+  }
+  .docs-page .docs-content {
+    display: block !important;
+    padding: 0 0;
+    width: 100% !important;
+    margin-left: 0;
+    padding-top: 80px;
+  }
+  .docs-page .docs-content .top-container {
+    margin-top: 10px;
+  }
+  .docs-page .docs-content .docs-link-btns {
+    padding: 0 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field article.docs-body h1 {
+    padding-top: 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field .docs-text-field {
+    padding: 1rem 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field .section-with-logos img {
     margin: 15px;
     opacity: 1;
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%);
   }
-
-  span.code-arrow {
+  .docs-page .docs-content .docs-content-field span.code-arrow {
     padding: 0px 0 0px;
     display: block;
     transform: rotate(90deg);
     font-size: 2em;
   }
-
-  .mb-5,
-.my-5 {
-    margin-bottom: 2rem !important;
+  .docs-page .docs-page-index {
+    position: relative;
+    width: 100%;
+    padding: 0 1.75em 1.75em;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
+  }
+  .docs-page > .container-fluid {
+    display: block;
+  }
+  .docs-page > .container-fluid > .row {
+    display: block;
   }
 }
-@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;
+@media (max-width: 992px) {
+  .docs-page .docs-content .top-container .doc-social-btns {
+    display: none;
+  }
+  .docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar img {
+    width: 24px;
+    height: 24px;
+  }
+}
+@media (max-width: 1200px) {
+  .docs-page .docs-content {
+    width: calc(100% - 300px);
+  }
+  .docs-page .docs-page-index .card {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) and (max-width: 1200px) {
+  .docs-page .docs-page-index {
+    position: relative;
+    width: calc(100% - 300px);
+    margin-left: 300px;
+    padding: 0 1rem 1rem;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
+    padding: 0 1.75em;
   }
 }
 
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index 139bf5b74d..cf35442d4a 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,KA1CK;EA2CL,QA3CK;EA4CL;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAYxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EA/LJ;IAgMQ;;;AAEJ;EAlMJ;IAmMQ;IACA;IACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAOJ;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA,KAvjBC;EAwjBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EAjFJ;IAkFQ;IACA;IACA;IACA;;EAGA;IACI;IACA;IACA;;;AAIR;EA/FJ;IAgGQ;IACA;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SAzqBC;;AA2qBL;EACI;EACA;EACA;;AAGJ;EAzBJ;IA0BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;;AAOhB;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA,KAnoCK;EAooCL;EACA;EACA;;AACA;EANJ;IAOQ;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAtpBC;EAupBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA7uBH;;AA+uBD;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ 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 1a4d30c1e7..b1c86750ee 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
@@ -4,39 +4,90 @@ $gap-y-size: 1rem;
 body {
     position: relative;
     background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
-}
 
-.container {
-    max-width: 1680px !important;
-    padding: 0;
-}
+    .container {
+        max-width: 1680px !important;
+        padding: 0;
+    }
 
-a {
-    text-decoration: none;
-}
+    a {
+        text-decoration: none;
+    }
 
-.btn-primary {
-    background-color: #b84297 !important;
-    font-size: 12px;
-}
+    .btn-primary {
+        background-color: #b84297 !important;
+        font-size: 12px;
+    }
 
-.docs-page {
-    padding: 0 $gap-y-size;
+    .for-mobile {
+        display: none;
+    }
+
+    .for-desktop {
+        display: inline-block;
+    }
 
-    .anchorjs-link {
-        transition: all 0.25s linear;
-        -webkit-transition: all 0.25s linear;
+    pre[class*='language-'] {
+        padding: 1.4em 2em !important;
+        margin: 15px 0 25px !important;
+        border-radius: 12px;
+    }
 
-        &:hover {
-            text-decoration: none;
+    pre {
+        .token.keyword {
+            color: #569cd6;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.function,
+        .token.class-name {
+            color: #d69d85;
+        }
+    }
+
+    :not(pre) > code[class*='language-'],
+    pre[class*='language-'] {
+        background: #211e1e !important;
+    }
+
+    div.code-toolbar > .toolbar {
+        z-index: 7;
+
+        span {
+            cursor: default;
         }
+        a {
+            cursor: copy;
+        }
+    }
+
+    .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+    .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+        opacity: 1 !important;
+        filter: 'alpha(opacity=1)';
+        -ms-filter: 'alpha(opacity=1)';
     }
 
-    *:hover > .anchorjs-link {
-        margin-left: -0.8em !important;
-        transition: color 0.25s linear;
-        color: gray;
+    &.scrolledMore {
+        padding-top: 107px;
+
+        .alert-criteria {
+            position: fixed;
+            top: $gap-y-size;
+            z-index: 10;
+            border: 0;
+            margin-left: -0;
+
+            p.alert-p {
+                display: none;
+            }
+        }
     }
+}
+
+.docs-page {
+    padding: 0 $gap-y-size;
 
     .docs-sidebar {
         display: inline-block;
@@ -47,25 +98,50 @@ a {
         border-radius: 12px;
         background: #211e1e;
         padding: 0.5rem $gap-x-size;
+        width: 300px;
 
-        .input-group {
-            border-radius: 5px;
-            overflow: hidden;
-        }
+        .docs-top {
+            .navbar-logo {
+                .navbar-brand {
+                    font-size: 1.35rem;
+                    color: #fff;
+                    font-weight: 500;
+                    padding: 15px 0 15px;
+                    line-height: 1;
+                    text-transform: uppercase;
+                    white-space: unset;
 
-        &.docs-sidebar-wrapper {
-            width: 300px;
+                    strong {
+                        font-weight: 300;
+                        text-transform: uppercase;
+                        font-size: 0.7em;
+                        letter-spacing: 1px;
+                    }
+                }
 
-            input.form-control {
-                border: 0;
+                .go-back-site {
+                    color: #fff;
+                    opacity: 0.65;
+                    transition: 0.2s;
+                    font-size: 0.8em;
+                    font-weight: 300;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    text-align: center;
+                    border-radius: 8px;
+                    background-color: rgb(255 255 255 / 10%);
 
-                &:focus,
-                &:active,
-                &:hover,
-                &:visited {
-                    box-shadow: none;
+                    &:hover {
+                        text-decoration: none;
+                        opacity: 1;
+                    }
                 }
             }
+        }
+
+        .docs-tree-list {
+            height: calc(100vh - 115px);
 
             .docs-version {
                 position: relative;
@@ -92,6 +168,11 @@ a {
                 .version-select {
                     border-radius: 3px;
 
+                    .input-group {
+                        border-radius: 5px;
+                        overflow: hidden;
+                    }
+
                     .input-group-text {
                         padding: 0 0;
                         font-size: 0.75rem;
@@ -116,6 +197,8 @@ a {
                         height: 30px;
                         font-size: 1.17em;
                         border-radius: 0px;
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
 
                         &:focus,
                         &:active,
@@ -129,142 +212,144 @@ a {
                         padding: 0 0 2px 0;
                         background-image: none;
                     }
-                }
-            }
+                    input.form-select {
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
+
+                        &::placeholder {
+                            color: rgb(255 255 255 / 30%);
+                        }
+                    }
+
+                    input.form-control {
+                        border: 0;
 
-            .docs-filter {
-                padding: 0 1rem;
-                margin: 0.5rem 0;
-                font-size: 0.9em;
+                        &:focus,
+                        &:active,
+                        &:hover,
+                        &:visited {
+                            box-shadow: none;
+                        }
+                    }
 
-                .filter-icon {
-                    i.fa {
+                    label {
+                        background: #000000;
+                        border-color: #000000;
                         color: #ddd;
                     }
                 }
             }
 
-            .docs-tree-list {
-                height: calc(100vh - 115px);
+            > ul {
+                display: block;
+                height: calc(100vh - 310px);
+                overflow-y: auto;
+                margin-right: -4px !important;
+                margin-top: 20px !important;
+            }
 
-                > ul {
-                    display: block;
-                    height: calc(100vh - 310px);
-                    overflow-y: auto;
-                    margin-right: -4px !important;
-                    margin-top: 20px !important;
-                }
+            ul {
+                font-size: 14px;
+                list-style: none;
+                padding: 0 0 1em;
+                margin: 0;
 
-                ul {
-                    font-size: 14px;
-                    list-style: none;
-                    padding: 0 0 1em;
-                    margin: 0;
+                li {
+                    margin-left: 0px;
+                    padding-left: 24px;
+                    display: block;
+                    width: 100%;
+                    position: relative;
 
-                    li {
-                        margin-left: 0px;
-                        padding-left: 24px;
+                    a {
+                        color: #aaa;
+                        font-weight: 500;
+                        padding: 4px 0;
                         display: block;
-                        width: 100%;
-                        position: relative;
+                        border-bottom: 0;
 
-                        a {
-                            color: #999;
-                            font-weight: 500;
-                            padding: 4px 0;
-                            display: block;
-                            border-bottom: 0;
-
-                            &:hover {
-                                color: #000;
-                            }
-
-                            &.last-link {
-                                top: 11px;
-                                color: #aaa;
-                            }
+                        &:hover {
+                            color: #fff;
                         }
 
-                        .badge {
-                            text-transform: uppercase;
-                            font-size: 9px;
-                            position: relative;
-                            letter-spacing: 0.125px;
-                            top: -2px;
+                        &.last-link {
+                            top: 11px;
+                            color: #aaa;
                         }
+                    }
 
-                        span.tree-toggle {
-                            color: #999;
-                            padding: 7px 0;
-                            display: block;
-                            border-bottom: 0;
-                        }
+                    .badge {
+                        text-transform: uppercase;
+                        font-size: 9px;
+                        position: relative;
+                        letter-spacing: 0.125px;
+                        top: -2px;
+                    }
 
-                        .plus-icon {
-                            font-size: 0.85em;
-                            transition: 0.3s;
-                            width: 18px;
-                            height: 18px;
-                            text-align: center;
-                            padding: 0;
-                            line-height: 1;
-                            border-radius: 50%;
-                            margin-right: 4px;
-                            position: absolute;
-                            left: 2px;
-                            top: 9px;
-                            color: #aaa;
-                            cursor: default;
+                    .plus-icon {
+                        font-size: 0.85em;
+                        transition: 0.3s;
+                        width: 18px;
+                        height: 18px;
+                        text-align: center;
+                        padding: 0;
+                        line-height: 1;
+                        border-radius: 50%;
+                        margin-right: 4px;
+                        position: absolute;
+                        left: 2px;
+                        top: 9px;
+                        color: #aaa;
+                        cursor: default;
 
-                            .fa-long-arrow-right {
-                                &.no-link {
-                                    color: #555;
-                                }
+                        .fa-long-arrow-right {
+                            &.no-link {
+                                color: #555;
                             }
+                        }
 
-                            .fa-chevron-right {
-                                cursor: pointer;
-                            }
+                        .fa-chevron-right {
+                            cursor: pointer;
                         }
+                    }
 
-                        ul {
-                            padding: 0;
+                    ul {
+                        padding: 0;
 
-                            li {
-                                a {
-                                    font-weight: 400;
-                                }
+                        li {
+                            a {
+                                font-weight: 400;
+                            }
 
-                                ul {
-                                    padding: 0;
+                            ul {
+                                padding: 0;
 
-                                    li {
-                                        a {
-                                            font-weight: 300;
-                                        }
+                                li {
+                                    a {
+                                        font-weight: 300;
                                     }
                                 }
                             }
                         }
+                    }
+
+                    &.selected-tree {
+                        > a {
+                            color: #fff;
+                            transition: 0.4s;
+                        }
 
-                        &.selected-tree {
-                            > a {
-                                color: #000;
-                                transition: 0.4s;
+                        > span {
+                            .fa {
+                                transform: rotate(90deg);
+                                color: #b84297;
                             }
+                        }
 
+                        &.last-link {
                             > span {
                                 .fa {
-                                    transform: rotate(90deg);
-                                    color: #b84297;
-                                }
-                            }
-
-                            &.last-link {
-                                > span {
-                                    .fa {
-                                        transform: rotate(0deg);
-                                    }
+                                    transform: rotate(0deg);
                                 }
                             }
                         }
@@ -272,52 +357,6 @@ a {
                 }
             }
         }
-
-        .docs-top {
-            .navbar-logo {
-                .navbar-brand {
-                    font-size: 1.35rem;
-                    color: #000;
-                    font-weight: 500;
-                    padding: 15px 0 15px;
-                    line-height: 1;
-
-                    strong {
-                        font-weight: 300;
-                        text-transform: uppercase;
-                        font-size: 0.7em;
-                        letter-spacing: 1px;
-                    }
-                }
-
-                .go-back-site {
-                    color: #000;
-                    opacity: 0.65;
-                    transition: 0.2s;
-                    font-size: 0.8em;
-                    font-weight: 300;
-                    width: 32px;
-                    height: 32px;
-                    line-height: 32px;
-                    text-align: center;
-                    border-radius: 8px;
-                    background-color: rgb(255 255 255 / 10%);
-
-                    &:hover {
-                        text-decoration: none;
-                        opacity: 1;
-                    }
-                }
-
-                .navbar-logo-desc {
-                    font-size: 0.85em;
-
-                    strong {
-                        display: block;
-                    }
-                }
-            }
-        }
     }
 
     .docs-content {
@@ -328,31 +367,52 @@ a {
         margin-left: 300px;
         padding: $gap-y-size $gap-y-size;
 
-        @media (max-width: 767px) {
-            padding: 0 0;
-        }
-
-        .contributors {
-            position: absolute;
-            top: 15px;
-            right: 5px;
+        .top-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #eaeaea;
+            margin: 0 $gap-x-size;
+
+            .breadcrumb {
+                margin-bottom: 0;
+                flex-wrap: nowrap;
+                overflow-x: scroll;
+                white-space: nowrap;
+                padding-bottom: 10px;
 
-            .contributors-avatar {
-                border-radius: 21px;
-                width: 21px;
-                height: 21px;
+                .breadcrumb-item {
+                    color: #838690;
+                    font-size: 13px;
+                    font-weight: 500;
+                    padding: 0 9px 0 0px;
+                    display: flex;
+                    a {
+                        color: #838690;
+                    }
+                    &.active {
+                        color: #c7c8c9;
+                        font-weight: 400;
+                    }
+                }
             }
+            .doc-social-btns {
+                color: rgb(11 22 33 / 50%);
+                white-space: nowrap;
+                top: -2px;
+                position: relative;
 
-            a {
-                padding: 0;
-                width: 21px;
-                height: 21px;
-                display: inline-block;
-                margin: 0 0 0 2px;
-
-                &:hover {
+                small {
+                    font-size: 13px;
+                }
+                a:hover {
                     text-decoration: none;
                 }
+
+                .share-button {
+                    color: rgb(11 22 33 / 50%);
+                    margin-left: 10px;
+                }
             }
         }
 
@@ -360,10 +420,6 @@ a {
             font-size: 0.8em;
             padding: 0 $gap-x-size;
 
-            @media (max-width: 767px) {
-                padding: 0 1.5rem;
-            }
-
             a {
                 color: #3e9fcb;
 
@@ -402,155 +458,198 @@ a {
                     box-shadow: none;
                 }
             }
-        }
 
-        .docs-text-field {
-            padding: 1.5em;
-        }
+            .cont-container {
+                .contributors-text {
+                    color: rgb(11 22 33 / 50%);
+                    font-size: 1.1em;
+                    font-weight: 600;
+                }
 
-        article.docs-body {
-            word-break: break-word;
+                a.cont-avatar {
+                    position: relative;
 
-            h1 {
-                padding-top: 1rem;
-                font-size: 2.25rem;
-                padding-bottom: 10px;
-            }
+                    img {
+                        width: 32px;
+                        height: 32px;
+                        margin-left: -12px;
+                        display: inline-block;
+                        border: 2px solid #fff;
+                        transition: 0.2s;
+                        -webkit-transition: 0.2s;
+                    }
+                }
 
-            h2 {
-                padding-top: 2rem;
-                padding-bottom: 10px;
-                font-size: 2rem;
+                &:hover {
+                    a.cont-avatar {
+                        img {
+                            margin-left: -8px;
+                        }
+                    }
+                }
             }
+        }
 
-            h3,
-            h4,
-            h5,
-            h6 {
-                padding-top: 20px;
-                padding-bottom: 5px;
-                font-size: 1.5rem;
+        .docs-content-field {
+            .docs-text-field {
+                padding: 1.5em;
             }
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                position: relative;
+            article.docs-body {
+                word-break: break-word;
 
-                .anchor {
-                    position: absolute;
-                    right: -26px;
-                    font-size: 18px;
-                    bottom: 5px;
-                    color: #999;
-                    opacity: 0;
-                    transition: 0.5s;
+                h1 {
+                    padding-top: 1rem;
+                    font-size: 2.25rem;
+                    padding-bottom: 10px;
                 }
 
-                &:hover {
-                    .anchor {
-                        opacity: 1;
-                    }
+                h2 {
+                    padding-top: 2rem;
+                    padding-bottom: 10px;
+                    font-size: 2rem;
                 }
-            }
 
-            .blockquote {
-                margin-bottom: 1rem;
-                margin-left: 0;
-                border-left: 3px solid rgb(184 66 151 / 30%);
-                padding: 1em 1.5em;
-                background-color: rgb(184 66 151 / 15%);
-                font-size: 1em;
-                border-radius: 12px;
-            }
+                h3,
+                h4,
+                h5,
+                h6 {
+                    padding-top: 20px;
+                    padding-bottom: 5px;
+                    font-size: 1.5rem;
+                }
 
-            img {
-                max-width: 100%;
-                border: 1px solid #f4f5f7;
-                margin: 15px 0 25px;
-                box-shadow: 0 0 45px #f8f9fa;
-                border-radius: 12px;
-            }
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    position: relative;
 
-            table {
-                display: block;
-                overflow: auto;
-                width: 100%;
+                    .anchor {
+                        position: absolute;
+                        right: -26px;
+                        font-size: 18px;
+                        bottom: 5px;
+                        color: #999;
+                        opacity: 0;
+                        transition: 0.5s;
+                    }
 
-                thead {
-                    tr {
-                        border-bottom: 2px inset;
+                    &:hover {
+                        .anchor {
+                            opacity: 1;
+                        }
                     }
                 }
 
-                th {
-                    font-weight: 600;
+                .blockquote {
+                    margin-bottom: 1rem;
+                    margin-left: 0;
+                    border-left: 3px solid rgb(184 66 151 / 30%);
+                    padding: 1em 1.5em;
+                    background-color: rgb(184 66 151 / 15%);
+                    font-size: 1em;
+                    border-radius: 12px;
                 }
 
-                td,
-                th {
-                    border: 1px solid #dfe2e5;
-                    padding: 6px 13px;
+                img {
+                    max-width: 100%;
+                    border: 1px solid #f4f5f7;
+                    margin: 15px 0 25px;
+                    box-shadow: 0 0 45px #f8f9fa;
+                    border-radius: 12px;
                 }
 
-                tr {
-                    background-color: #fff;
-                    border-top: 1px solid #c6cbd1;
-                }
+                table {
+                    display: block;
+                    overflow: auto;
+                    width: 100%;
+
+                    thead {
+                        tr {
+                            border-bottom: 2px inset;
+                        }
+                    }
 
-                tr:nth-child(2n) {
-                    background-color: #f6f8fa;
+                    th {
+                        font-weight: 600;
+                    }
+
+                    td,
+                    th {
+                        border: 1px solid #dfe2e5;
+                        padding: 6px 13px;
+                    }
+
+                    tr {
+                        background-color: #fff;
+                        border-top: 1px solid #c6cbd1;
+                    }
+
+                    tr:nth-child(2n) {
+                        background-color: #f6f8fa;
+                    }
+
+                    img {
+                        background-color: initial;
+                    }
                 }
+            }
 
-                img {
-                    background-color: initial;
+            .custom-input-group {
+                border: 1px solid rgba(11, 22, 33, 0.1);
+                background-color: white;
+                border-radius: 8px;
+                padding: 7px $gap-y-size;
+                .input-group-text {
+                    font-size: 12px;
+                    padding: 0;
+                    background-color: transparent;
+                    border: none;
+                    color: rgb(11 22 33 / 30%);
+                }
+                .form-select {
+                    border: none;
+                    padding: 0;
+                    background-color: transparent;
+                    background-position: right top;
+                    &:focus {
+                        box-shadow: none !important;
+                    }
                 }
             }
-        }
 
-        @media (max-width: 1200px) {
-            width: calc(100% - 300px);
-        }
-        @media (max-width: 767px) {
-            width: 100%;
-            margin-left: 0;
-            padding-top: 80px;
-        }
-    }
+            .alert-criteria {
+                padding: 1.25rem 1.25rem;
+                max-width: 100%;
+                color: #3e9fcb;
+                background-color: #f4f6fa;
+                border-color: #f4f6fa;
+                border-radius: 12px;
+                background: hsl(199deg 59% 84% / 82%);
+                -webkit-backdrop-filter: blur(10px);
+                backdrop-filter: blur(10px);
 
-    .cont-container {
-        .contributors-text {
-            color: rgb(11 22 33 / 50%);
-            font-size: 1.1em;
-            font-weight: 600;
-        }
+                p.alert-p {
+                    font-size: 0.96em;
+                }
+            }
 
-        a.cont-avatar {
-            position: relative;
+            .anchorjs-link {
+                transition: all 0.25s linear;
+                -webkit-transition: all 0.25s linear;
 
-            img {
-                width: 32px;
-                height: 32px;
-                margin-left: -12px;
-                display: inline-block;
-                transition: 0.2s;
-                border: 2px solid #fff;
-
-                @media (max-width: 992px) {
-                    width: 24px;
-                    height: 24px;
+                &:hover {
+                    text-decoration: none;
                 }
             }
-        }
 
-        &:hover {
-            a.cont-avatar {
-                img {
-                    margin-left: -8px;
-                }
+            *:hover > .anchorjs-link {
+                margin-left: -0.8em !important;
+                transition: color 0.25s linear;
+                color: gray;
             }
         }
     }
@@ -559,10 +658,6 @@ a {
         display: inline-block;
         position: absolute;
 
-        #scroll-index {
-            max-height: 90vh;
-        }
-
         .docs-inner-anchors {
             position: fixed;
             z-index: 99;
@@ -617,11 +712,10 @@ a {
             .index-scroll {
                 margin-left: -30px;
             }
+        }
 
-            .docs-anchors-wrapper {
-                max-width: 300px;
-                float: left;
-            }
+        #scroll-index {
+            max-height: 90vh;
         }
 
         .scroll-top-btn {
@@ -636,314 +730,66 @@ a {
             }
         }
 
-        @media (min-width: 768px) and (max-width: 1200px) {
-            position: relative;
-            width: calc(100% - 300px);
-            margin-left: 300px;
-            padding: 0 $gap-y-size $gap-y-size; 
-
-
-            .docs-inner-anchors {
-                position: relative;
-                top: auto;
-                padding: 0 $gap-x-size;
-
-            }
-        }
-        @media (max-width: 767px) {
-            position: relative;
-            width: 100%;
-            padding: 0 $gap-x-size $gap-x-size; 
-
-            .docs-inner-anchors {
-                position: relative;
-                top: auto;
-            }
-        }
-    }
-
-    .card {
-        background-color: #fff;
-        border-radius: 12px;
-        border: none;
-        width: 300px;
-        box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
-
-        .card-header {
-            background-color: transparent;
-            border-bottom: none;
-            color: #0b1621;
-            h5 {
-                font-size: 19px;
-            }
-        }
-        .card-body {
-            font-size: 13px;
-            padding: $gap-x-size;
-        }
-        .card-footer {
-            padding: 0;
-            background-color: transparent;
+        .card {
+            background-color: #fff;
+            border-radius: 12px;
             border: none;
-        }
-
-        @media (max-width: 1200px) {
-            width: 100%;
-        }
-    }
+            width: 300px;
+            box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 
-    .top-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #eaeaea;
-        margin: 0 $gap-x-size;
-
-        .breadcrumb {
-            margin-bottom: 0;
-            flex-wrap: nowrap;
-            overflow-x: scroll;
-            white-space: nowrap;
-            padding-bottom: 10px;
-
-            .breadcrumb-item {
-                color: #838690;
-                font-size: 13px;
-                font-weight: 500;
-                padding: 0 9px 0 0px;
-                display: flex;
-                a {
-                    color: #838690;
+            .card-header {
+                background-color: transparent;
+                border-bottom: none;
+                color: #0b1621;
+                h5 {
+                    font-size: 19px;
                 }
-                &.active {
-                    color: #c7c8c9;
-                    font-weight: 400;
-                }
-            }
-        }
-        .doc-social-btns {
-            color: rgb(11 22 33 / 50%);
-            white-space: nowrap;
-            top: -2px;
-            position: relative;
-
-            @media (max-width: 992px) {
-                display: none;
             }
-            small {
+            .card-body {
                 font-size: 13px;
+                padding: $gap-x-size;
             }
-            a:hover {
-                text-decoration: none;
-            }
-
-            .twitter,
-            .linkedin,
-            .email {
-                color: rgb(11 22 33 / 50%);
-            }
-            .share-button {
-                margin-left: 10px;
-            }
-        }
-    }
-
-    .custom-input-group {
-        border: 1px solid rgba(11, 22, 33, 0.1);
-        background-color: white;
-        border-radius: 8px;
-        padding: 7px $gap-y-size;
-        .input-group-text {
-            font-size: 12px;
-            padding: 0;
-            background-color: transparent;
-            border: none;
-            color: rgb(11 22 33 / 30%);
-        }
-        .form-select {
-            border: none;
-            padding: 0;
-            background-color: transparent;
-            background-position: right top;
-            &:focus {
-                box-shadow: none !important;
+            .card-footer {
+                padding: 0;
+                background-color: transparent;
+                border: none;
             }
         }
     }
 }
 
-.docs-page {
-    .docs-sidebar {
-        &.docs-sidebar-wrapper {
-            .docs-version {
-                .version-select {
-                    select.form-select,
-                    input.form-control {
-                        background-color: transparent;
-                        color: rgb(255 255 255 / 70%);
-                    }
-
-                    input.form-control {
-                        background-color: transparent;
-                        color: rgb(255 255 255 / 70%);
-
-                        &::placeholder {
-                            color: rgb(255 255 255 / 30%);
-                        }
-                    }
-
-                    label {
-                        background: #000000;
-                        border-color: #000000;
-                        color: #ddd;
-                    }
-                }
-            }
-
-            .docs-filter {
-                .form-control {
-                    background: #333;
-                    color: #999;
-                }
-
-                select {
-                    border: 0;
-                    border-radius: 6px;
-                }
-
-                .filter-icon {
-                    i.fa {
-                        color: #aaa;
-                    }
-                }
-            }
-
-            .docs-tree-list {
-                ul {
-                    li {
-                        a {
-                            color: #aaa;
-                            border-bottom: 0;
-
-                            &:hover {
-                                color: #fff;
-                            }
-
-                            .plus-icon {
-                                font-size: 0.85em;
-                                transition: 0.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;
-
-                                .fa-long-arrow-right {
-                                    &.no-link {
-                                        color: #555;
-                                    }
-                                }
-
-                                .fa-chevron-right {
-                                    cursor: pointer;
-                                }
-
-                                &.last-link {
-                                    top: 11px;
-                                }
-                            }
-                        }
-
-                        span.tree-toggle {
-                            color: #555;
-                            padding: 7px 0;
-                            display: block;
-                            border-bottom: 0;
-                        }
-
-                        &.selected-tree {
-                            > a {
-                                color: #fff;
-                                transition: 0.4s;
-
-                                span {
-                                    .fa {
-                                        color: #fff;
-                                    }
+@media (max-width: 767px) {
+    body {
+        font-size: 14px;
 
-                                    &:not(.last-link) .fa {
-                                        transform: rotate(90deg);
-                                        color: #fff;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+        .for-mobile {
+            display: inline-block;
         }
 
-        .docs-top {
-            .navbar-logo {
-                .navbar-brand {
-                    color: #fff;
-                    text-transform: uppercase;
-                    white-space: unset;
-                }
+        .for-desktop {
+            display: none;
+        }
 
-                .go-back-site {
-                    color: #fff;
-                }
+        .close-mmenu,
+        .close-dmenu {
+            position: absolute;
+            top: -78px;
+            left: 25px;
+            color: #fff;
+            font-size: 68px;
+            background: #fff;
+            opacity: 0;
+        }
 
-                .navbar-logo-desc {
-                    color: #ddd;
-                }
+        &.scrolledMore {
+            .alert-criteria {
+                top: 72px;
             }
         }
     }
-}
-
-// @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 {
         padding: 0 0;
-    }
-    .docs-page .docs-content article.docs-body h1 {
-        padding-top: 1.5rem;
-    }
-
-    .docs-page {
-        > .container-fluid {
-            display: block;
-
-            > .row {
-                display: block;
-            }
-        }
 
         .docs-sidebar {
             position: fixed;
@@ -955,53 +801,26 @@ a {
             left: 0;
             z-index: 100;
             right: 0;
-
-            &.docs-sidebar-wrapper {
-                max-width: 100%;
-                width: 100%;
-                top: 0px;
-                margin: 0 !important;
-                height: 72px;
-                border-radius: 0;
-
-                .docs-tree-list {
-                    padding: 0.5rem 1.5rem 2rem 1.5rem;
-                    position: fixed;
-                    top: 70px;
-                    font-size: 17px;
-                    left: 0;
-                    width: 100%;
-                    height: 100vh;
-                    z-index: 100;
-                    background: #1d1d1d;
-                    display: none;
-
-                    .docs-filter {
-                        padding: 0 0 1rem !important;
-
-                        .filter-icon {
-                        }
-                    }
-                }
-
-                .docs-version {
-                }
-            }
+            margin: 0 !important;
+            height: 72px;
+            border-radius: 0;
 
             .docs-top {
-                .navbar-logo {
+                .navbar.navbar-logo {
                     padding: 0rem;
                     padding-top: 0.3rem;
                     display: block;
                     text-align: center;
 
                     .navbar-brand {
+                        display: inline-block;
                         font-size: 1.25rem;
-                        font-weight: 500;
-                        display: block;
-                        margin-right: 0em;
                         padding: 10px 0 15px;
-                        text-transform: uppercase;
+                        margin: 0 auto !important;
+                        max-width: 70%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
 
                         .docs-logo {
                             width: 110px;
@@ -1016,258 +835,173 @@ a {
                         font-size: 1em;
                         display: none;
                     }
+
+                    .navbar-collapse {
+                        background: rgb(56, 0, 61);
+                        position: fixed;
+                        top: 86px;
+                        left: 0;
+                        width: 100%;
+                        height: 100vh;
+                        height: calc(100vh - 86px);
+                        z-index: 100 !important;
+
+                        .navbar-nav {
+                            height: 100vh;
+                            padding: 20px 30px;
+                            overflow: auto;
+
+                            .nav-link {
+                                padding: 1.2rem !important;
+                            }
+                        }
+                    }
+
+                    .navbar-toggler {
+                        padding: 0.5rem 0.75rem;
+                        font-size: 1.5rem;
+                        line-height: 1;
+                        background-color: transparent;
+                        border: 0;
+                        border-radius: 0.25rem;
+                        color: #fff !important;
+                        margin-left: -1rem;
+                    }
                 }
 
                 .open-dmenu {
                     position: absolute;
                     top: 10px;
                     left: 20px;
+                }
+            }
 
-                    .navbar-toggler-icon {
-                    }
+            .docs-tree-list {
+                padding: 0.5rem 1.5rem 2rem 1.5rem;
+                position: fixed;
+                top: 70px;
+                font-size: 17px;
+                left: 0;
+                width: 100%;
+                height: 100vh;
+                z-index: 100;
+                background: #1d1d1d;
+                display: none;
+
+                .docs-filter {
+                    padding: 0 0 1rem !important;
                 }
             }
         }
 
         .docs-content {
-            max-width: 100%;
             display: block !important;
+            padding: 0 0;
+            width: 100% !important;
+            margin-left: 0;
+            padding-top: 80px;
 
-            .docs-text-field {
-                padding: 1rem 1.5rem;
+            .top-container {
+                margin-top: 10px;
             }
-        }
-
-    }
-}
-
-.for-mobile {
-    display: none;
-}
-
-.for-desktop {
-    display: inline-block;
-}
-
-pre[class*='language-'] {
-    padding: 1.4em 2em !important;
-    margin: 15px 0 25px !important;
-    border-radius: 12px;
-}
-
-code {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 82%;
-    background-color: #f0f1f3;
-    border-radius: 3px;
-    color: #28a745;
-}
-
-pre {
-    code {
-        padding: 0;
-    }
-
-    .token.keyword {
-        color: #569cd6;
-    }
-
-    .token.atrule,
-    .token.attr-value,
-    .token.function,
-    .token.class-name {
-        color: #d69d85;
-    }
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-    background: #211e1e !important;
-}
-
-div.code-toolbar > .toolbar {
-    z-index: 7;
-}
-div.code-toolbar > .toolbar span {
-    cursor: default;
-}
 
-div.code-toolbar > .toolbar a {
-    cursor: copy;
-}
-
-.logo-nav ul {
-    width: 300px !important;
-}
+            .docs-link-btns {
+                padding: 0 1.5rem;
+            }
 
-.alert-criteria {
-    padding: 1.25rem 1.25rem;
-    max-width: 100%;
-    color: #3e9fcb;
-    background-color: #f4f6fa;
-    border-color: #f4f6fa;
-    border-radius: 12px;
-    background: hsl(199deg 59% 84% / 82%);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-
-    p.alert-p {
-        font-size: 0.96em;
-    }
+            .docs-content-field {
+                article.docs-body h1 {
+                    padding-top: 1.5rem;
+                }
+                .docs-text-field {
+                    padding: 1rem 1.5rem;
+                }
 
-    .input-group {
-        .input-group-text,
-        .form-control {
-            font-size: 0.96em;
+                .section-with-logos img {
+                    margin: 15px;
+                    opacity: 1;
+                    -webkit-filter: grayscale(0%);
+                    filter: grayscale(0%);
+                }
 
-            @media screen and (max-width: 767px) {
-                font-size: 0.88em;
+                span.code-arrow {
+                    padding: 0px 0 0px;
+                    display: block;
+                    transform: rotate(90deg);
+                    font-size: 2em;
+                }
             }
         }
 
-        .input-group-text {
-            color: #004085;
-            background-color: #bddcfd;
-            border: 1px solid #bddcfd;
+        .docs-page-index {
+            position: relative;
+            width: 100%;
+            padding: 0 $gap-x-size $gap-x-size;
 
-            @media screen and (max-width: 1366px) {
-                display: none;
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
             }
         }
 
-        .form-control {
-            color: #004085;
-            background-color: #fff;
-            border: 1px solid #bddcfd;
+        > .container-fluid {
+            display: block;
 
-            @media screen and (max-width: 1366px) {
-                border-top-left-radius: 0.25rem;
-                border-bottom-left-radius: 0.25rem;
+            > .row {
+                display: block;
             }
         }
     }
 }
 
-.scrolledMore {
-    padding-top: 107px;
-
-    .alert-criteria {
-        position: fixed;
-        top: $gap-y-size;
-        z-index: 10;
-        border: 0;
-        margin-left: -0;
-        @media screen and (max-width: 767px) {
-            top: 72px;
-        }
-
-        p.alert-p {
-            display: none;
+@media (max-width: 992px) {
+    .docs-page {
+        .docs-content {
+            .top-container {
+                .doc-social-btns {
+                    display: none;
+                }
+            }
+            .docs-link-btns {
+                .cont-container {
+                    a.cont-avatar {
+                        img {
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
+                }
+            }
         }
     }
 }
 
-.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-    opacity: 1 !important;
-    filter: 'alpha(opacity=1)';
-    -ms-filter: 'alpha(opacity=1)';
-}
-
-@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;
-    }
-
-    .docs-page .top-container {
-        margin-top: 10px;
-    }
-
-    .navbar {
-        padding: 0.5rem 1.75rem;
-
-        .navbar-collapse {
-            background: rgb(56, 0, 61);
-            position: fixed;
-            top: 86px;
-            left: 0;
-            width: 100%;
-            height: 100vh;
-            height: calc(100vh - 86px);
-            z-index: 100 !important;
-
-            .navbar-nav {
-                height: 100vh;
-                padding: 20px 30px;
-                overflow: auto;
-
-                .nav-link {
-                    padding: 1.2rem !important;
-                }
-            }
+@media (max-width: 1200px) {
+    .docs-page {
+        .docs-content {
+            width: calc(100% - 300px);
         }
-
-        .navbar-toggler {
-            padding: 0.5rem 0.75rem;
-            font-size: 1.5rem;
-            line-height: 1;
-            background-color: transparent;
-            border: 0;
-            border-radius: 0.25rem;
-            color: #fff !important;
-            margin-left: -1rem;
+        .docs-page-index {
+            .card {
+                width: 100%;
+            }
         }
     }
-
-    .section-with-logos img {
-        margin: 15px;
-        opacity: 1;
-        -webkit-filter: grayscale(0%);
-        filter: grayscale(0%);
-    }
-
-    span.code-arrow {
-        padding: 0px 0 0px;
-        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;
+@media (min-width: 768px) and (max-width: 1200px) {
+    .docs-page {
+        .docs-page-index {
+            position: relative;
+            width: calc(100% - 300px);
+            margin-left: 300px;
+            padding: 0 $gap-y-size $gap-y-size;
+
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
+                padding: 0 $gap-x-size;
+            }
         }
     }
 }