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 5ca2b7fbd9..d471603c2f 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
@@ -18,7 +18,7 @@
 
 @model IndexModel
 @{
-    ViewBag.FluidLayout = true;
+    ViewBag.FluidLayout = false;
     Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
     PageLayout.Content.Title = Model.DocumentName?.Replace("-", " ");
     ViewBag.Description = Model.GetDescription();
@@ -50,305 +50,335 @@
 }
 @if (Model.LoadSuccess)
 {
-    <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
-        <div class="row justify-content-end">
-            <div class="col-md-3 docs-sidebar dark-sidebar">
-                <div class="docs-sidebar-wrapper">
+        <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
+            <div class="row">
+                <div class="col-md-2">
+                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
 
-                    <div class="docs-top">
-                        <nav class="navbar navbar-logo">
-                            @if (!Model.Project.Name.IsNullOrWhiteSpace())
-                            {
-                                <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
-                                    <span id="ProjectName">@Model.Project.Name</span><br>
-                                    <strong class="display-block">
-                                        @L["Documents"]
-                                    </strong>
-                                </a>
-                            }
+                        <div class="docs-top">
+                            <nav class="navbar navbar-logo">
+                                @if (!Model.Project.Name.IsNullOrWhiteSpace())
+                                {
+                                    <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
+                                        <span id="ProjectName">@Model.Project.Name</span><br>
+                                        <strong class="display-block">
+                                            @L["Documents"]
+                                        </strong>
+                                    </a>
+                                }
 
-                            @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
-                            {
-                                <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
-                                    <i class="fa fa-chevron-left"></i>
-                                    @L["BackToWebsite"]
-                                </a>
-                            }
+                                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
+                                {
+                                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
+                                        <i class="fa fa-chevron-left"></i>
+                                        @L["BackToWebsite"]
+                                    </a>
+                                }
 
-                            <div class="for-mobile">
-                                <div class="navbar-dark">
-                                    <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
-                                        <span class="navbar-toggler-icon"></span>
-                                    </button>
+                                <div class="for-mobile">
+                                    <div class="navbar-dark">
+                                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
+                                            <span class="navbar-toggler-icon"></span>
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                        </nav>
-                    </div>
-
-                    <div class="docs-tree-list">
+                            </nav>
+                        </div>
 
-                        @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
-                        {
-                            <div class="docs-version">
-                                <div class="version-select">
-                                    <div class="input-group">
-                                        <span class="input-group-text">
-                                            <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
-                                        </span>
+                        <div class="docs-tree-list">
+                            <div class="px-3">
+                                <div class="row mx-0 mb-2 ">
+                                    <div class="col-md-6 pe-1 ps-0">
+                                        @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
+                                            {
+                                                <div class="docs-version">
+                                                    <span>Project</span>
+                                                    <div class="version-select">
+                                                        <div class="input-group">
+                                                            <span class="input-group-text d-none">
+                                                                <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
+                                                            </span>
 
-                                        <select asp-items="Model.ProjectSelectItems"
-                                        class="form-select"
-                                        onchange="window.location.pathname = this.value">
-                                        </select>
+                                                            <select asp-items="Model.ProjectSelectItems"
+                                                            class="form-select"
+                                                            onchange="window.location.pathname = this.value">
+                                                            </select>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
                                     </div>
-                                </div>
-                            </div>
-                        }
+                                    <div class="col-md-6 pe-0 ps-1">
+                                        <div class="row">
+                                            @if (Model.VersionSelectItems.Any())
+                                            {
+                                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
+                                                    <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
+                                                        <span>Version</span>
+                                                        <div class="version-select">
+                                                            <div class="input-group">
 
-                        <div class="row">
-                            @if (Model.VersionSelectItems.Any())
-                            {
-                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
-                                    <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
-                                        <div class="version-select">
-                                            <div class="input-group">
+                                                                <span class="input-group-text">
+                                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
+                                                                </span>
 
-                                                <span class="input-group-text">
-                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
-                                                </span>
 
+                                                                <select asp-items="Model.VersionSelectItems"
+                                                                class="form-select"
+                                                                onchange="if (this.value) { window.location.replace(this.value) }">
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
 
-                                                <select asp-items="Model.VersionSelectItems"
-                                                class="form-select"
-                                                onchange="if (this.value) { window.location.replace(this.value) }">
-                                                </select>
-                                            </div>
+                                            @if (Model.LanguageSelectListItems.Count > 1)
+                                            {
+                                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
+                                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                                        <span>Language</span>
+                                                        <div class="version-select">
+                                                            <div class="input-group">
+                                                                @*<span class="input-group-text">
+                                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
+                                                                    </span>*@
+                                                                <select asp-items="Model.LanguageSelectListItems"
+                                                                class="form-select"
+                                                                onchange="window.location.replace(this.value)">
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
                                         </div>
                                     </div>
                                 </div>
-                            }
 
-                            @if (Model.LanguageSelectListItems.Count > 1)
-                            {
-                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
-                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
-                                        <div class="version-select">
-                                            <div class="input-group">
-                                                @*<span class="input-group-text">
-                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
-                                                    </span>*@
-                                                <select asp-items="Model.LanguageSelectListItems"
-                                                class="form-select"
-                                                onchange="window.location.replace(this.value)">
-                                                </select>
-                                            </div>
+                                <div class="docs-version">
+                                    <div class="version-select">
+                                        <div class="input-group">
+                                            <span class="input-group-text"><i class="fa fa-filter"></i></span>
+                                            <input class="form-control"
+                                            id="filter"
+                                            type="search"
+                                            data-search-url="@Model."
+                                            placeholder="@L["FilterTopics"].Value"
+                                            aria-label="Filter">
                                         </div>
                                     </div>
                                 </div>
-                            }
-                        </div>
-
-                        <div class="docs-version">
-                            <div class="version-select">
-                                <div class="input-group">
-                                    <span class="input-group-text"><i class="fa fa-filter"></i></span>
-                                    <input class="form-control"
-                                       id="filter"
-                                       type="search"
-                                       data-search-url="@Model."
-                                       placeholder="@L["FilterTopics"].Value"
-                                       aria-label="Filter">
-                                </div>
                             </div>
+                            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
+                            {
+                                <div class="text-muted p-3">
+                                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
+                                </div>
+                            }
+                            else
+                            {
+                                <ul root-node="@Model.Navigation"
+                            version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
+                            project-name="@Model.ProjectName"
+                            project-format="@Model.Project.Format"
+                            selected-document-name="@Model.DocumentNameWithExtension"
+                            language="@Model.LanguageCode"
+                            id="sidebar-scroll"
+                            class="nav nav-list"></ul>
+                            }
                         </div>
 
-
-                        @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
-                        {
-                            <div class="text-muted p-3">
-                                <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
-                            </div>
-                        }
-                        else
-                        {
-                            <ul root-node="@Model.Navigation"
-                        version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
-                        project-name="@Model.ProjectName"
-                        project-format="@Model.Project.Format"
-                        selected-document-name="@Model.DocumentNameWithExtension"
-                        language="@Model.LanguageCode"
-                        id="sidebar-scroll"
-                        class="nav nav-list"></ul>
-                        }
                     </div>
-
                 </div>
-            </div>
 
-            @if (Model.Document != null)
-            {
-                <div class="col-md-7 docs-content bg-white">
-                    <div class="docs-link-btns">
-                        <div class="row">
-                            <div class="col">
-                                @if (Model.FullSearchEnabled)
-                                {
-                                    <div class="search-area">
-                                        <div class="input-group">
-                                            <span class="input-group-text"><i class="fa fa-search"></i></span>
+                @if (Model.Document != null)
+                {
+                    <div class="col docs-content bg-white">
+                        <div class="top-container mb-3">
+                            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+                                <ol class="breadcrumb">
+                                    <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                    <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                                </ol>
+                            </nav>
 
-                                            <input class="form-control"
-                                       id="fullsearch"
-                                       type="search"
-                                       data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
-                                       placeholder="@L["FullSearch"].Value"
-                                       aria-label="Filter">
-                                        </div>
-                                    </div>
-                                }
+                            <div class="doc-social-btns">
+                                <small> @(L["ShareOn"].Value + " :")</small>
+                                <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                                    <i class="fa fa-twitter"></i>
+                                </a>
+                                <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                                    <i class="fa fa-linkedin"></i>
+                                </a>
+                                <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                                    <i class="fa fa-envelope-square"></i>
+                                </a>
                             </div>
-                            <div class="col-auto">
-                                <div class="cont-container">
-                                    @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
+                        </div>
+
+                        <div class="docs-link-btns">
+                            <div class="row">
+                                <div class="col">
+                                    @if (Model.FullSearchEnabled)
                                     {
-                                        <span class="for-desktop me-3">
-                                            @(L["Contributors"].Value)
-                                        </span>
-                                        @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                        <div class="search-area">
+                                            <div class="input-group">
+                                                <span class="input-group-text"><i class="fa fa-search"></i></span>
+
+                                                <input class="form-control"
+                                        id="fullsearch"
+                                        type="search"
+                                        data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
+                                        placeholder="@L["FullSearch"].Value"
+                                        aria-label="Filter">
+                                            </div>
+                                        </div>
+                                    }
+                                </div>
+                                <div class="col-auto">
+                                    <div class="cont-container">
+                                        @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                                         {
-                                            <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
-                                                <img src="@contributor.AvatarUrl"
-                                     class="rounded-circle"
-                                     alt="Avatar"
-                                     height="21"
-                                     width="21"
-                                     title="@contributor.Username" />
-                                            </a>
+                                            <span class="for-desktop me-3">
+                                                @(L["Contributors"].Value)
+                                            </span>
+                                            @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                            {
+                                                <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                                    <img src="@contributor.AvatarUrl"
+                                        class="rounded-circle"
+                                        alt="Avatar"
+                                        height="21"
+                                        width="21"
+                                        title="@contributor.Username" />
+                                                </a>
+                                            }
                                         }
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    @if (!string.IsNullOrEmpty(Model.Document.EditLink))
+                                    {
+                                        <a href="@Model.Document.EditLink" target="_blank">
+                                            <i class="fa fa-edit"></i>
+                                            @(L["Edit"])
+                                            <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
+                                        </a>
                                     }
+
                                 </div>
                             </div>
-                            <div class="col-auto">
-                                @if (!string.IsNullOrEmpty(Model.Document.EditLink))
-                                {
-                                    <a href="@Model.Document.EditLink" target="_blank">
-                                        <i class="fa fa-edit"></i>
-                                        @(L["Edit"])
-                                        <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
-                                    </a>
-                                }
 
-                            </div>
-                        </div>
 
+                        </div>
 
-                    </div>
+                    
 
-                    <div class="docs-content-field">
-                        <div class="docs-text-field">
-                            <div class="position-relative">
-                                @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
-                                {
-                                    <div class="alert alert-primary alert-criteria">
-                                        <abp-row>
-                                            <abp-column>
-                                                <p class="alert-p mb-2">
-                                                    <i class="fa fa-info-circle"></i>
-                                                    @L["MultipleVersionDocumentInfo"]
-                                                </p>
-                                            </abp-column>
-                                        </abp-row>
-                                        <abp-row>
-                                            @foreach (var parameter in Model.DocumentPreferences.Parameters)
-                                            {
-                                                <abp-column size="_4">
-                                                    <div class="input-group">
-                                                        <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
-                                                        <select class="doc-section-combobox form-select"
-                                                aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
-                                                id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
-                                                            @foreach (var value in parameter.Values)
-                                                            {
-                                                                @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
-                                                                {
-                                                                    <option value="@value.Key" selected="selected">@value.Value</option>
-                                                                }
-                                                                else
+                        <div class="docs-content-field">
+                            <div class="docs-text-field">
+                                <div class="position-relative">
+                                    @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                                    {
+                                        <div class="alert alert-primary alert-criteria">
+                                            <abp-row>
+                                                <abp-column>
+                                                    <p class="alert-p mb-2">
+                                                        <i class="fa fa-info-circle"></i>
+                                                        @L["MultipleVersionDocumentInfo"]
+                                                    </p>
+                                                </abp-column>
+                                            </abp-row>
+                                            <abp-row>
+                                                @foreach (var parameter in Model.DocumentPreferences.Parameters)
+                                                {
+                                                    <abp-column size="_6">
+                                                        <div class="custom-input-group">
+                                                            <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
+                                                            <select class="doc-section-combobox form-select"
+                                                    aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
+                                                    id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
+                                                                @foreach (var value in parameter.Values)
                                                                 {
-                                                                    <option value="@value.Key">@value.Value</option>
+                                                                    @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
+                                                                    {
+                                                                        <option value="@value.Key" selected="selected">@value.Value</option>
+                                                                    }
+                                                                    else
+                                                                    {
+                                                                        <option value="@value.Key">@value.Value</option>
+                                                                    }
                                                                 }
-                                                            }
-                                                        </select>
-                                                    </div>
-                                                </abp-column>
-                                            }
-                                        </abp-row>
-                                    </div>
-                                }
-                            </div>
+                                                            </select>
+                                                        </div>
+                                                    </abp-column>
+                                                }
+                                            </abp-row>
+                                        </div>
+                                    }
+                                </div>
 
-                            <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
-                                <article class="docs-body">
+                                <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
+                                    <article class="docs-body">
 
-                                    @if (Model.DocumentLanguageCode != Model.LanguageCode)
-                                    {
-                                        <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
-                                            @L["DocumentNotFoundInSelectedLanguage"]
-                                        </abp-alert>
-                                    }
-                                    @Html.Raw(Model.Document.Content)
-                                </article>
+                                        @if (Model.DocumentLanguageCode != Model.LanguageCode)
+                                        {
+                                            <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
+                                                @L["DocumentNotFoundInSelectedLanguage"]
+                                            </abp-alert>
+                                        }
+                                        @Html.Raw(Model.Document.Content)
+                                    </article>
 
-                                <div id="crawler_link" style="display:none;">
-                                    @foreach (var query in Model.AlternativeOptionLinkQueries)
-                                    {
-                                        <a href="@($"{Request.Path}?{query}")"> @query </a>
-                                    }
+                                    <div id="crawler_link" style="display:none;">
+                                        @foreach (var query in Model.AlternativeOptionLinkQueries)
+                                        {
+                                            <a href="@($"{Request.Path}?{query}")"> @query </a>
+                                        }
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <!-- Right Bar -->
-                <div class="col-md-2 docs-page-index position-relative bg-light">
-                    <div class="doc-social-btns">
-                        @(L["ShareOn"].Value + " :")
-                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                            <i class="fa fa-twitter"></i>
-                        </a>
-                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                            <i class="fa fa-linkedin"></i>
-                        </a>
-                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                            <i class="fa fa-envelope-square"></i>
-                        </a>
-                    </div>
-                    <div id="scroll-index" class="docs-inner-anchors mt-2">
-                        <h5>@L["InThisDocument"]</h5>
-                        <nav id="docs-sticky-index" class="navbar index-scroll">
-                        </nav>
 
-                        <div class="row">
-                            <div class="col p-0 py-3">
-                                <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                    <!-- Right Bar -->
+                    <div class="col-md-2 docs-page-index position-relative">
+                    
+                        <div class="card docs-inner-anchors">
+                            <div class="card-header">
+                                <h5>@L["InThisDocument"]</h5>
+                            </div>
+                            <div class="card-body">
+                                <div id="scroll-index" class="mt-2">
+                                    <nav id="docs-sticky-index" class="navbar index-scroll">
+                                    </nav>
+                                    <div class="row">
+                                        <div class="col p-0 py-3">
+                                            <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                                        </div>
+                                    </div>
+                                </div>
+
                             </div>
                         </div>
                     </div>
-                </div>
-            }
-            else
-            {
-                <div class="col-md-9 p-5 bg-white">
-                    <p>@L["DocumentNotFound"]</p>
+                }
+                else
+                {
+                    <div class="col-md-9 p-5 bg-white">
+                        <p>@L["DocumentNotFound"]</p>
 
-                    <a href="/">
-                        <i class="fa fa-chevron-left"></i>
-                        @L["BackToWebsite"]
-                    </a>
-                </div>
-            }
+                        <a href="/">
+                            <i class="fa fa-chevron-left"></i>
+                            @L["BackToWebsite"]
+                        </a>
+                    </div>
+                }
+            </div>
         </div>
-    </div>
 }
 else
 {
@@ -379,4 +409,4 @@ else
               }
           }))
     }
-}
+}
\ No newline at end of file
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 47b071442f..918974fa82 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
@@ -1,438 +1,622 @@
-body {
-  position: relative; }
+body {
+  position: relative;
+}
 
-a {
-  text-decoration: none; }
-
-.docs-page {
-  background: #f5f7f9; }
-  .docs-page .anchorjs-link {
-    transition: all .25s linear; }
-  .docs-page *:hover > .anchorjs-link {
-    margin-left: -1.125em !important;
-    transition: color .25s linear;
-    color: gray; }
-  .docs-page .anchorjs-link:hover {
-    text-decoration: none; }
-  .docs-page .docs-sidebar {
-    padding-right: 1rem;
-    position: relative;
-    top: 0px;
-    left: 0;
-    position: fixed;
-    background: #1d1d1d; }
-    .docs-page .docs-sidebar .input-group {
-      border-radius: 5px;
-      overflow: hidden; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper {
-      width: 300px;
-      float: right; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control {
-        border: 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited {
-          box-shadow: none; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version {
-        position: relative;
-        padding: 0 1rem;
-        margin: .25rem 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
-          border-radius: 3px; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
-            padding: 0 12px;
-            font-size: .9rem;
-            width: 30px;
-            height: 34px;
-            line-height: 1;
-            border-radius: 0px;
-            border: 0;
-            background: #000; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
-              color: #666; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-            padding: 0 10px 2px 10px;
-            border: 0;
-            min-height: 34px;
-            height: 34px;
-            font-size: .9em;
-            border-radius: 0px; }
-            .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-select:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
-              box-shadow: none; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select {
-            padding: 0 10px 2px 6px;
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
-            background-repeat: no-repeat !important;
-            background-position: right 0.75rem center !important;
-            background-size: 16px 12px !important; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
-        padding: 0 1rem;
-        margin: .5rem 0;
-        font-size: .9em; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-          color: #ddd; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
-        height: 100vh; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
-          display: block;
-          height: calc(100vh - 230px);
-          overflow-y: auto;
-          margin-right: 12px !important;
-          margin-top: 20px !important; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
-          font-size: 14px;
-          list-style: none;
-          padding: 0 1rem 1rem;
-          margin: 0; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .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;
-              font-weight: 700;
-              padding: 7px 0;
-              display: block;
-              border-bottom: 0; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
-                top: 11px;
-                color: #aaa; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge {
-              text-transform: uppercase;
-              font-size: 9px;
-              position: relative;
-              letter-spacing: .125px;
-              top: -2px; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
-              color: #999;
-              padding: 7px 0;
-              display: block;
-              border-bottom: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
-              font-size: .85em;
-              transition: .3s;
-              width: 18px;
-              height: 18px;
-              text-align: center;
-              padding: 0;
-              line-height: 1;
-              border-radius: 50%;
-              margin-right: 4px;
-              position: absolute;
-              left: 2px;
-              top: 11px;
-              color: #aaa;
-              cursor: default; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
-                color: #555; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right {
-                cursor: pointer; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
-              padding: 0; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
-                font-weight: 400; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul {
-                padding: 0; }
-                .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a {
-                  font-weight: 300; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-              color: #000;
-              transition: .4s; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
-              transform: rotate(90deg);
-              color: #007bff; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
-              transform: rotate(0deg); }
-    .docs-page .docs-sidebar .docs-top {
-      padding: 0 1em; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-        font-size: 1.35rem;
-        color: #000;
-        font-weight: 700;
-        padding: 15px 0 15px;
-        line-height: 1; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
-          font-weight: 300;
-          text-transform: uppercase;
-          font-size: .7em;
-          letter-spacing: 1px; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-        color: #000;
-        opacity: .65;
-        transition: .2s;
-        font-size: .8em;
-        font-weight: 300; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
-          text-decoration: none;
-          opacity: 1; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-        font-size: .85em; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
-          display: block; }
-  .docs-page .docs-content {
-    overflow-x: scroll;
-    min-height: 100vh; }
-    .docs-page .docs-content .contributors {
-      position: absolute;
-      top: 15px;
-      right: 5px; }
-      .docs-page .docs-content .contributors .contributors-avatar {
-        border-radius: 21px;
-        width: 21px;
-        height: 21px; }
-      .docs-page .docs-content .contributors a {
-        padding: 0;
-        width: 21px;
-        height: 21px;
-        display: inline-block;
-        margin: 0 0 0 2px; }
-        .docs-page .docs-content .contributors a:hover {
-          text-decoration: none; }
-    .docs-page .docs-content .docs-link-btns {
-      background: #f5f7fa;
-      padding: 15px 30px;
-      margin: 0 -15px;
-      text-align: right;
-      font-size: .8em;
-      min-height: 48px; }
-      .docs-page .docs-content .docs-link-btns a {
-        color: #222; }
-        .docs-page .docs-content .docs-link-btns a .text-muted {
-          color: #ccc !important; }
-        .docs-page .docs-content .docs-link-btns a:hover {
-          color: #000;
-          text-decoration: none; }
-      .docs-page .docs-content .docs-link-btns .search-area {
-        margin: -5px 0 -5px -10px;
-        box-shadow: 0 0 10px #e8e8e8; }
-        .docs-page .docs-content .docs-link-btns .search-area .input-group-text {
-          background: white;
-          border: 0;
-          color: #000;
-          font-size: 1em; }
-        .docs-page .docs-content .docs-link-btns .search-area .form-control {
-          background: #fff;
-          border: 0;
-          font-size: 1em;
-          padding-left: 0;
-          outline: 0;
-          box-shadow: none; }
-    .docs-page .docs-content .docs-text-field {
-      padding: 2rem; }
-    .docs-page .docs-content article.docs-body {
-      word-break: break-word; }
-      .docs-page .docs-content article.docs-body h1 {
-        padding-top: 1rem;
-        font-size: 2.25rem;
-        padding-bottom: 10px; }
-      .docs-page .docs-content article.docs-body h2 {
-        padding-top: 2rem;
-        padding-bottom: 10px;
-        font-size: 2rem; }
-      .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-        padding-top: 20px;
-        padding-bottom: 5px;
-        font-size: 1.5rem; }
-      .docs-page .docs-content article.docs-body h1, .docs-page .docs-content article.docs-body h2, .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-        position: relative; }
-        .docs-page .docs-content article.docs-body h1 .anchor, .docs-page .docs-content article.docs-body h2 .anchor, .docs-page .docs-content article.docs-body h3 .anchor, .docs-page .docs-content article.docs-body h4 .anchor, .docs-page .docs-content article.docs-body h5 .anchor, .docs-page .docs-content article.docs-body h6 .anchor {
-          position: absolute;
-          right: -26px;
-          font-size: 18px;
-          bottom: 5px;
-          color: #999;
-          opacity: 0;
-          transition: .5s; }
-        .docs-page .docs-content article.docs-body h1:hover .anchor, .docs-page .docs-content article.docs-body h2:hover .anchor, .docs-page .docs-content article.docs-body h3:hover .anchor, .docs-page .docs-content article.docs-body h4:hover .anchor, .docs-page .docs-content article.docs-body h5:hover .anchor, .docs-page .docs-content article.docs-body h6:hover .anchor {
-          opacity: 1; }
-      .docs-page .docs-content article.docs-body .blockquote {
-        margin-bottom: 1rem;
-        margin-left: 0;
-        border-left: 3px solid #d2dbe4;
-        background-color: #e9edf1;
-        padding: 1em 1.5em !important;
-        font-size: 1em; }
-      .docs-page .docs-content article.docs-body img {
-        max-width: 100%;
-        border: 1px solid #f4f5f7;
-        margin: 15px 0 25px;
-        box-shadow: 0 0 45px #f8f9fa;
-        border-radius: 6px; }
-      .docs-page .docs-content article.docs-body table {
-        display: block;
-        overflow: auto;
-        width: 100%; }
-        .docs-page .docs-content article.docs-body table thead tr {
-          border-bottom: 2px inset; }
-        .docs-page .docs-content article.docs-body table th {
-          font-weight: 600; }
-        .docs-page .docs-content article.docs-body table td, .docs-page .docs-content article.docs-body table th {
-          border: 1px solid #dfe2e5;
-          padding: 6px 13px; }
-        .docs-page .docs-content article.docs-body table tr {
-          background-color: #fff;
-          border-top: 1px solid #c6cbd1; }
-        .docs-page .docs-content article.docs-body table tr:nth-child(2n) {
-          background-color: #f6f8fa; }
-        .docs-page .docs-content article.docs-body table img {
-          background-color: initial; }
-  .docs-page .doc-social-btns {
-    margin: 0 -15px 0;
-    font-size: .8em;
-    background: #e9ecf0;
-    height: 53px;
-    padding: 15px 20px;
-    position: fixed;
-    top: 0px;
-    width: 100%; }
-    .docs-page .doc-social-btns a:hover {
-      text-decoration: none; }
-    .docs-page .doc-social-btns .twitter {
-      color: #00ACEE; }
-    .docs-page .doc-social-btns .linkedin {
-      color: #0077B5; }
-    .docs-page .doc-social-btns .email {
-      color: #5a5a5a; }
-    .docs-page .doc-social-btns .share-button {
-      margin-left: 10px; }
-  .docs-page .cont-container a.cont-avatar {
-    position: relative; }
-    .docs-page .cont-container a.cont-avatar img {
-      width: 24px;
-      height: 24px;
-      box-shadow: 0 0 8px #c1bbbb;
-      border: 2px solid #fff;
-      margin-left: -10px;
-      display: inline-block;
-      margin-top: -2px;
-      transition: .2s; }
-  .docs-page .cont-container:hover a.cont-avatar img {
-    margin-left: -2px; }
-  .docs-page .docs-page-index {
-    min-height: 90vh;
-    background-color: #f5f7fa !important; }
-    .docs-page .docs-page-index #scroll-index {
-      max-height: 90vh; }
-    .docs-page .docs-page-index .docs-inner-anchors {
-      position: fixed;
-      top: 50px;
-      padding: 10px;
-      font-size: .90em; }
-      .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
-        font-size: .92em;
-        margin-left: 15px;
-        border-left: 1px solid #eee; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
-          padding: 3px 14px 4px;
-          color: #aaa;
-          line-height: 1.2;
-          position: relative;
-          border-left: 1px solid #eee;
-          border-radius: 0;
-          margin-left: -1px;
-          margin-top: 1px;
-          margin-bottom: 1px;
-          transition: .2s;
-          font-weight: normal; }
-          .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
-            border-left: 1px solid #007bff;
-            background: none;
-            color: #007bff;
-            font-weight: normal; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-          color: #007bff; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-          color: #007bff; }
-      .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
-        margin-left: -30px; }
-      .docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
-        max-width: 300px;
-        float: left; }
-    .docs-page .docs-page-index .scroll-top-btn {
-      display: none;
-      font-size: .85em;
-      color: #aaa;
-      text-decoration: none;
-      padding-left: 18px; }
-      .docs-page .docs-page-index .scroll-top-btn.showup {
-        display: block; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background: #000000;
-  color: white; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background: #000000;
-  color: white; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
-    color: white;
-    opacity: .5; }
+.container {
+  max-width: 1920px !important;
+  border: 1px solid;
+}
 
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
+a {
+  text-decoration: none;
+}
+
+.docs-page .anchorjs-link {
+  transition: all 0.25s linear;
+  -webkit-transition: all 0.25s linear;
+}
+.docs-page .anchorjs-link:hover {
+  text-decoration: none;
+}
+.docs-page *:hover > .anchorjs-link {
+  margin-left: -1.125em !important;
+  transition: color 0.25s linear;
+  color: gray;
+}
+.docs-page .docs-sidebar {
+  position: fixed;
+  top: 4px;
+  left: auto;
+  border-radius: 12px;
+  background: #211e1e;
+}
+.docs-page .docs-sidebar .input-group {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper {
+  width: 300px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control {
+  border: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:visited {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
+  position: relative;
+  font-size: 12px;
+  background-color: #474747;
+  color: rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  padding: 7px 10px 0 10px;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 0.75rem center !important;
+  background-size: 16px 12px !important;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select {
+  border-radius: 3px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text {
+  padding: 0 0;
+  font-size: 0.9rem;
+  width: 15px;
+  height: 34px;
+  line-height: 1;
+  border-radius: 0px;
+  border: 0;
+  background: transparent;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .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 {
+  padding: 0 10px 2px 10px;
+  border: 0;
+  min-height: 30px;
+  height: 30px;
+  font-size: 1.17em;
+  border-radius: 0px;
+}
+.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 {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .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-sidebar-wrapper .docs-filter .filter-icon i.fa {
+  color: #ddd;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
+  height: calc(100vh - 130px);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
+  display: block;
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+  margin-right: 12px !important;
+  margin-top: 20px !important;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
+  font-size: 14px;
+  list-style: none;
+  padding: 0 1rem 1rem;
+  margin: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .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;
+  font-weight: 700;
+  padding: 7px 0;
+  display: block;
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a:hover {
+  color: #000;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
+  top: 11px;
+  color: #aaa;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .badge {
+  text-transform: uppercase;
+  font-size: 9px;
+  position: relative;
+  letter-spacing: 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 {
+  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 .plus-icon .fa-long-arrow-right.no-link {
+  color: #555;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right {
+  cursor: pointer;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul {
+  padding: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li a {
+  font-weight: 400;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul {
+  padding: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a {
+  font-weight: 300;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
+  color: #000;
+  transition: 0.4s;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
+  transform: rotate(90deg);
+  color: #3e9fcb;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
+  transform: rotate(0deg);
+}
+.docs-page .docs-sidebar .docs-top {
+  padding: 0 1em;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  font-size: 1.35rem;
+  color: #000;
+  font-weight: 700;
+  padding: 15px 0 15px;
+  line-height: 1;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 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;
+}
+.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 {
+  overflow-x: scroll;
+  min-height: 100vh;
+}
+.docs-page .docs-content .contributors {
+  position: absolute;
+  top: 15px;
+  right: 5px;
+}
+.docs-page .docs-content .contributors .contributors-avatar {
+  border-radius: 21px;
+  width: 21px;
+  height: 21px;
+}
+.docs-page .docs-content .contributors a {
+  padding: 0;
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+  margin: 0 0 0 2px;
+}
+.docs-page .docs-content .contributors a:hover {
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-link-btns {
+  background: #f5f7fa;
+  padding: 15px 30px;
+  margin: 0 -15px;
+  text-align: right;
+  font-size: 0.8em;
+  min-height: 48px;
+}
+.docs-page .docs-content .docs-link-btns a {
+  color: #222;
+}
+.docs-page .docs-content .docs-link-btns a .text-muted {
+  color: #ccc !important;
+}
+.docs-page .docs-content .docs-link-btns a:hover {
+  color: #000;
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-link-btns .search-area {
+  margin: -5px 0 -5px -10px;
+  box-shadow: 0 0 10px #e8e8e8;
+}
+.docs-page .docs-content .docs-link-btns .search-area .input-group-text {
+  background: white;
+  border: 0;
+  color: #000;
+  font-size: 1em;
+}
+.docs-page .docs-content .docs-link-btns .search-area .form-control {
+  background: #fff;
+  border: 0;
+  font-size: 1em;
+  padding-left: 0;
+  outline: 0;
+  box-shadow: none;
+}
+.docs-page .docs-content .docs-text-field {
+  padding: 2rem;
+}
+.docs-page .docs-content article.docs-body {
+  word-break: break-word;
+}
+.docs-page .docs-content article.docs-body h1 {
+  padding-top: 1rem;
+  font-size: 2.25rem;
+  padding-bottom: 10px;
+}
+.docs-page .docs-content article.docs-body h2 {
+  padding-top: 2rem;
+  padding-bottom: 10px;
+  font-size: 2rem;
+}
+.docs-page .docs-content article.docs-body h3,
+.docs-page .docs-content article.docs-body h4,
+.docs-page .docs-content article.docs-body h5,
+.docs-page .docs-content article.docs-body h6 {
+  padding-top: 20px;
+  padding-bottom: 5px;
+  font-size: 1.5rem;
+}
+.docs-page .docs-content article.docs-body h1,
+.docs-page .docs-content article.docs-body h2,
+.docs-page .docs-content article.docs-body h3,
+.docs-page .docs-content article.docs-body h4,
+.docs-page .docs-content article.docs-body h5,
+.docs-page .docs-content article.docs-body h6 {
+  position: relative;
+}
+.docs-page .docs-content article.docs-body h1 .anchor,
+.docs-page .docs-content article.docs-body h2 .anchor,
+.docs-page .docs-content article.docs-body h3 .anchor,
+.docs-page .docs-content article.docs-body h4 .anchor,
+.docs-page .docs-content article.docs-body h5 .anchor,
+.docs-page .docs-content article.docs-body h6 .anchor {
+  position: absolute;
+  right: -26px;
+  font-size: 18px;
+  bottom: 5px;
+  color: #999;
+  opacity: 0;
+  transition: 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 {
+  opacity: 1;
+}
+.docs-page .docs-content article.docs-body .blockquote {
+  margin-bottom: 1rem;
+  margin-left: 0;
+  border-left: 3px solid #d2dbe4;
+  padding: 1em 1.5em;
+  background-color: #e9edf1;
+  padding-bottom: 0.2em;
+  font-size: 1em;
+}
+.docs-page .docs-content article.docs-body img {
+  max-width: 100%;
+  border: 1px solid #f4f5f7;
+  margin: 15px 0 25px;
+  box-shadow: 0 0 45px #f8f9fa;
+  border-radius: 6px;
+}
+.docs-page .docs-content article.docs-body table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+.docs-page .docs-content article.docs-body table thead tr {
+  border-bottom: 2px inset;
+}
+.docs-page .docs-content article.docs-body table th {
+  font-weight: 600;
+}
+.docs-page .docs-content article.docs-body table td,
+.docs-page .docs-content article.docs-body table th {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+.docs-page .docs-content article.docs-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+.docs-page .docs-content article.docs-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+.docs-page .docs-content article.docs-body table img {
+  background-color: initial;
+}
+.docs-page .cont-container a.cont-avatar {
+  position: relative;
+}
+.docs-page .cont-container a.cont-avatar img {
+  width: 24px;
+  height: 24px;
+  box-shadow: 0 0 8px #c1bbbb;
+  border: 2px solid #fff;
+  margin-left: -10px;
+  display: inline-block;
+  margin-top: -2px;
+  transition: 0.2s;
+}
+.docs-page .cont-container:hover a.cont-avatar img {
+  margin-left: -2px;
+}
+.docs-page .docs-page-index {
+  min-height: 90vh;
+  background-color: transparent !important;
+}
+.docs-page .docs-page-index #scroll-index {
+  max-height: 90vh;
+}
+.docs-page .docs-page-index .docs-inner-anchors {
+  position: fixed;
+  top: 4px;
+  font-size: 0.9em;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
+  font-size: 0.92em;
+  margin-left: 15px;
+  border-left: 1px solid #eee;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
+  padding: 3px 14px 4px;
+  color: #aaa;
+  line-height: 1.2;
+  position: relative;
+  border-left: 1px solid #eee;
+  border-radius: 0;
+  margin-left: -1px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  transition: 0.2s;
+  font-weight: normal;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
+  border-left: 1px solid #3e9fcb;
+  background: none;
+  color: #3e9fcb;
+  font-weight: normal;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
+  color: #3e9fcb;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
+  color: #3e9fcb;
+}
+.docs-page .docs-page-index .docs-inner-anchors .index-scroll {
+  margin-left: -30px;
+}
+.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
+  max-width: 300px;
+  float: left;
+}
+.docs-page .docs-page-index .scroll-top-btn {
+  display: none;
+  font-size: 0.85em;
+  color: #aaa;
+  text-decoration: none;
+  padding-left: 18px;
+}
+.docs-page .docs-page-index .scroll-top-btn.showup {
+  display: block;
+}
+.docs-page .card {
+  background-color: #fff;
+  border-radius: 12px;
+  border: none;
+  width: 300px;
+  padding: 30px;
+  box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
+}
+.docs-page .card .card-header {
+  background-color: transparent;
+  border-bottom: none;
+  color: #0b1621;
+  font-size: 19px;
+  padding: 0;
+}
+.docs-page .card .card-body {
+  padding: 0;
+}
+.docs-page .top-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0 5px 0;
+  border-bottom: 1px solid #eaeaea;
+}
+.docs-page .top-container .breadcrumb {
+  margin-bottom: 0;
+}
+.docs-page .top-container .breadcrumb .breadcrumb-item {
+  color: #838690;
+  font-size: 13px;
+  font-weight: 500;
+}
+.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);
+}
+.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 15px;
+}
+.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 {
+  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 {
+  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 {
+  border-radius: 6px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
   color: #aaa;
-  border-bottom: 0; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-    color: #fff; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
-    font-size: .85em;
-    transition: .3s;
-    width: 18px;
-    height: 18px;
-    text-align: center;
-    padding: 0;
-    line-height: 1;
-    border-radius: 50%;
-    margin-right: 4px;
-    position: absolute;
-    left: 2px;
-    top: 11px;
-    color: #aaa;
-    cursor: default; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
-      color: #555; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
-      cursor: pointer; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
-      top: 11px; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
+}
+.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 {
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
   color: #fff;
-  transition: .4s; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
-    color: #fff; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
-    transform: rotate(90deg);
-    color: #fff; }
-
+  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; }
-
+  white-space: unset;
+}
 .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
   color: #fff;
   text-align: center;
@@ -440,103 +624,128 @@ a {
   width: 100%;
   background: #444;
   padding: 6px 0 8px;
-  border-radius: 5px; }
-
+  border-radius: 5px;
+}
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-  color: #ddd; }
+  color: #ddd;
+}
 
 @media (min-width: 1100px) {
   .container {
-    max-width: 1080px; } }
-
+    max-width: 1080px;
+  }
+}
 @media (min-width: 1366px) {
   .container {
-    max-width: 1340px; } }
-
+    max-width: 1340px;
+  }
+}
 @media (min-width: 1440px) {
   .container {
-    max-width: 1400px; } }
-
+    max-width: 1400px;
+  }
+}
 @media (max-width: 767px) {
   .docs-page .docs-content article.docs-body h1 {
-    padding-top: 1.5rem; }
-  .docs-page {
-    background: #f5f7f9; }
-    .docs-page > .container-fluid {
-      display: block; }
-      .docs-page > .container-fluid > .row {
-        display: block; }
-    .docs-page .docs-sidebar {
-      position: fixed;
-      max-width: 100%;
-      width: 100%;
-      display: block;
-      padding: 0 !important;
-      top: 0;
-      left: 0;
-      z-index: 100;
-      right: 0; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper {
-        max-width: 100%;
-        width: 100%;
-        top: 0px;
-        position: relative;
-        margin: 0 !important;
-        height: 72px; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
-          padding: .5rem 1.5rem 2rem 1.5rem;
-          position: fixed;
-          top: 70px;
-          font-size: 17px;
-          left: 0;
-          width: 100%;
-          z-index: 100;
-          background: #1d1d1d;
-          display: none; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
-            padding: 0 0 1rem !important; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo {
-        padding: 0rem;
-        padding-top: .3rem;
-        display: block;
-        text-align: center; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-          font-size: 1.25rem;
-          font-weight: 700;
-          display: block;
-          margin-right: 0em;
-          padding: 10px 0 15px;
-          text-transform: uppercase; }
-          .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
-            width: 110px; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-          display: none; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-          font-size: 1em;
-          display: none; }
-      .docs-page .docs-sidebar .docs-top .open-dmenu {
-        position: absolute;
-        top: 10px;
-        left: 20px; }
-    .docs-page .docs-content {
-      padding-top: 72px;
-      max-width: 100%;
-      display: block !important; }
-      .docs-page .docs-content .docs-text-field {
-        padding: 1rem 1.5rem; }
-    .docs-page .docs-page-index {
-      display: none; } }
+    padding-top: 1.5rem;
+  }
 
+  .docs-page {
+    background: #f5f7f9;
+  }
+  .docs-page > .container-fluid {
+    display: block;
+  }
+  .docs-page > .container-fluid > .row {
+    display: block;
+  }
+  .docs-page .docs-sidebar {
+    position: fixed;
+    max-width: 100%;
+    width: 100%;
+    display: block;
+    padding: 0 !important;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    right: 0;
+  }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper {
+    max-width: 100%;
+    width: 100%;
+    top: 0px;
+    position: relative;
+    margin: 0 !important;
+    height: 72px;
+  }
+  .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%;
+    z-index: 100;
+    background: #1d1d1d;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
+    padding: 0 0 1rem !important;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo {
+    padding: 0rem;
+    padding-top: 0.3rem;
+    display: block;
+    text-align: center;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+    font-size: 1.25rem;
+    font-weight: 700;
+    display: block;
+    margin-right: 0em;
+    padding: 10px 0 15px;
+    text-transform: uppercase;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
+    width: 110px;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+    font-size: 1em;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-top .open-dmenu {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+  }
+  .docs-page .docs-content {
+    padding-top: 72px;
+    max-width: 100%;
+    display: block !important;
+  }
+  .docs-page .docs-content .docs-text-field {
+    padding: 1rem 1.5rem;
+  }
+  .docs-page .docs-page-index {
+    display: none;
+  }
+}
 .for-mobile {
-  display: none; }
+  display: none;
+}
 
 .for-desktop {
-  display: inline-block; }
+  display: inline-block;
+}
 
-pre[class*="language-"] {
+pre[class*=language-] {
   padding: 1.4em 2em !important;
   margin: 15px 0 25px !important;
-  border-radius: 6px; }
+  border-radius: 6px;
+}
 
 code {
   padding: 0.2em 0.4em;
@@ -544,83 +753,114 @@ code {
   font-size: 82%;
   background-color: #f0f1f3;
   border-radius: 3px;
-  color: #28a745; }
+  color: #28a745;
+}
 
 pre code {
-  padding: 0; }
-
+  padding: 0;
+}
 pre .token.keyword {
-  color: #569cd6; }
-
-pre .token.atrule, pre .token.attr-value, pre .token.function, pre .token.class-name {
-  color: #d69d85; }
-
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-  background: #191919 !important; }
+  color: #569cd6;
+}
+pre .token.atrule,
+pre .token.attr-value,
+pre .token.function,
+pre .token.class-name {
+  color: #d69d85;
+}
+
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: #191919 !important;
+}
 
 div.code-toolbar > .toolbar span {
-  cursor: default; }
+  cursor: default;
+}
 
 div.code-toolbar > .toolbar a {
-  cursor: copy; }
+  cursor: copy;
+}
 
 .logo-nav ul {
-  width: 300px !important; }
+  width: 300px !important;
+}
 
 @media (max-width: 767px) {
   body {
-    font-size: 14px; }
+    font-size: 14px;
+  }
+
   .for-mobile {
-    display: inline-block; }
+    display: inline-block;
+  }
+
   .for-desktop {
-    display: none; }
-  .close-mmenu, .close-dmenu {
+    display: none;
+  }
+
+  .close-mmenu,
+.close-dmenu {
     position: absolute;
     top: -78px;
     left: 25px;
     color: #fff;
     font-size: 68px;
     background: #fff;
-    opacity: 0; }
+    opacity: 0;
+  }
+
   .navbar {
-    padding: .5rem 1.75rem; }
-    .navbar .navbar-collapse {
-      background: #38003d;
-      position: fixed;
-      top: 86px;
-      left: 0;
-      width: 100%;
-      height: 100vh;
-      height: calc(100vh - 86px);
-      z-index: 100 !important; }
-      .navbar .navbar-collapse .navbar-nav {
-        height: 100vh;
-        padding: 20px 30px;
-        overflow: auto; }
-        .navbar .navbar-collapse .navbar-nav .nav-link {
-          padding: 1.2rem !important; }
-    .navbar .navbar-toggler {
-      padding: .5rem .75rem;
-      font-size: 1.5rem;
-      line-height: 1;
-      background-color: transparent;
-      border: 0;
-      border-radius: .25rem;
-      color: #fff !important;
-      margin-left: -1rem; }
+    padding: 0.5rem 1.75rem;
+  }
+  .navbar .navbar-collapse {
+    background: #38003d;
+    position: fixed;
+    top: 86px;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    height: calc(100vh - 86px);
+    z-index: 100 !important;
+  }
+  .navbar .navbar-collapse .navbar-nav {
+    height: 100vh;
+    padding: 20px 30px;
+    overflow: auto;
+  }
+  .navbar .navbar-collapse .navbar-nav .nav-link {
+    padding: 1.2rem !important;
+  }
+  .navbar .navbar-toggler {
+    padding: 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;
+  }
+
   .section-with-logos img {
     margin: 15px;
     opacity: 1;
     -webkit-filter: grayscale(0%);
-    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; } }
-
+    font-size: 2em;
+  }
+
+  .mb-5,
+.my-5 {
+    margin-bottom: 2rem !important;
+  }
+}
 @media screen and (max-width: 767px) {
   .navbar-logo .navbar-brand {
     display: inline-block;
@@ -628,53 +868,79 @@ div.code-toolbar > .toolbar a {
     max-width: 70%;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap; } }
-
+    white-space: nowrap;
+  }
+}
 .alert-criteria {
   padding: 1.25em 1.5em;
-  max-width: 100%; }
-  .alert-criteria p.alert-p {
-    font-size: .96em; }
-  .alert-criteria .input-group .input-group-text, .alert-criteria .input-group .form-control {
-    font-size: .96em; }
-    @media screen and (max-width: 767px) {
-      .alert-criteria .input-group .input-group-text, .alert-criteria .input-group .form-control {
-        font-size: .88em; } }
+  max-width: 100%;
+  color: #3e9fcb;
+  background-color: #f4f6fa;
+  border-color: #f4f6fa;
+  border-radius: 12px;
+}
+.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 {
-    color: #004085;
-    background-color: #bddcfd;
-    border: 1px solid #bddcfd; }
-    @media screen and (max-width: 1366px) {
-      .alert-criteria .input-group .input-group-text {
-        display: none; } }
+    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 {
-    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; } }
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+}
 
 .scrolledMore {
-  padding-top: 107px; }
+  padding-top: 107px;
+}
+.scrolledMore .alert-criteria {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  border: 0;
+  border-radius: 0;
+  margin-left: -47px;
+  padding: 0.5em 0.75em;
+}
+@media screen and (max-width: 767px) {
   .scrolledMore .alert-criteria {
-    position: fixed;
-    top: 0;
-    z-index: 10;
-    border: 0;
-    border-radius: 0;
-    margin-left: -47px;
-    padding: 0.5em 0.75em; }
-    @media screen and (max-width: 767px) {
-      .scrolledMore .alert-criteria {
-        top: 72px;
-        margin-left: -36px; } }
-    .scrolledMore .alert-criteria p.alert-p {
-      display: none; }
+    top: 72px;
+    margin-left: -36px;
+  }
+}
+.scrolledMore .alert-criteria p.alert-p {
+  display: none;
+}
 
 .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
 .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
   opacity: 1 !important;
   filter: "alpha(opacity=1)";
-  -ms-filter: "alpha(opacity=1)"; }
+  -ms-filter: "alpha(opacity=1)";
+}
+
+/*# sourceMappingURL=vs.css.map */
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
new file mode 100644
index 0000000000..74ca9cf43e
--- /dev/null
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAIA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;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;;AAEA;EACI;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;;AAUhC;EACI;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;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;;AAOZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;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;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACE;;;AAYM;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;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAOpB;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;EAGJ;IASI;;EARA;IACI;;EAEA;IACI;;EAMR;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;;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;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;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;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;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;;;AAKZ;EACI;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;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","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 c678d177e2..f397ba1cf6 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
@@ -1,103 +1,118 @@
 body {
     position: relative;
 }
-a { text-decoration: none;}
 
-.docs-page {
-    background: rgb(245, 247, 249);
+.container {
+    max-width: 1920px !important;
+    border: 1px solid;
+}
+
+a {
+    text-decoration: none;
+}
 
+.docs-page {
     .anchorjs-link {
-        transition: all .25s linear;
+        transition: all 0.25s linear;
+        -webkit-transition: all 0.25s linear;
+
+        &:hover {
+            text-decoration: none;
+        }
     }
 
     *:hover > .anchorjs-link {
         margin-left: -1.125em !important;
-        transition: color .25s linear;
+        transition: color 0.25s linear;
         color: gray;
     }
 
-    .anchorjs-link:hover {
-        text-decoration: none;
-    }
-
     .docs-sidebar {
-        padding-right: 1rem;
-        position: relative;
-        top: 0px;
-        left: 0;
         position: fixed;
-        background: #1d1d1d;
+        top: 4px;
+        left: auto;
+        border-radius: 12px;
+        background: #211e1e;
 
         .input-group {
             border-radius: 5px;
             overflow: hidden;
         }
 
-        .docs-sidebar-wrapper {
+        &.docs-sidebar-wrapper {
             width: 300px;
-            float: right;
 
             input.form-control {
                 border: 0;
 
-                &:focus, &:active, &:hover, &:visited {
+                &:focus,
+                &:active,
+                &:hover,
+                &:visited {
                     box-shadow: none;
                 }
             }
 
             .docs-version {
                 position: relative;
-                padding: 0 1rem;
-                margin: .25rem 0;
+                font-size: 12px;
+                background-color: #474747;
+                color: rgb(255 255 255 / 30%);
+                border-radius: 8px;
+                padding: 7px 10px 0 10px;
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+                background-repeat: no-repeat !important;
+                background-position: right 0.75rem center !important;
+                background-size: 16px 12px !important;
 
                 .version-select {
                     border-radius: 3px;
 
                     .input-group-text {
-                        padding: 0 12px;
-                        font-size: .9rem;
-                        width: 30px;
+                        padding: 0 0;
+                        font-size: 0.9rem;
+                        width: 15px;
                         height: 34px;
                         line-height: 1;
                         border-radius: 0px;
                         border: 0;
-                        background: #000;
+                        background: transparent;
 
                         i {
-                            color: #666;
+                            color: rgb(255 255 255 / 30%);
                         }
                     }
 
-                    select.form-select, input.form-control {
+                    select.form-select,
+                    input.form-control {
                         padding: 0 10px 2px 10px;
                         border: 0;
-                        min-height: 34px;
-                        height: 34px;
-                        font-size: .9em;
+                        min-height: 30px;
+                        height: 30px;
+                        font-size: 1.17em;
                         border-radius: 0px;
 
-                        &:focus, &:active, &:hover, &:visited {
+                        &:focus,
+                        &:active,
+                        &:hover,
+                        &:visited {
                             box-shadow: none;
                         }
                     }
 
                     select.form-select {
-                        padding: 0 10px 2px 6px;
-                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
-                        background-repeat: no-repeat !important;
-                        background-position: right 0.75rem center !important;
-                        background-size: 16px 12px !important;
+                        padding: 0 0 2px 0;
+                        background-image: none;
                     }
                 }
             }
 
             .docs-filter {
                 padding: 0 1rem;
-                margin: .5rem 0;
-                font-size: .9em;
+                margin: 0.5rem 0;
+                font-size: 0.9em;
 
                 .filter-icon {
-
                     i.fa {
                         color: #ddd;
                     }
@@ -105,7 +120,7 @@ a { text-decoration: none;}
             }
 
             .docs-tree-list {
-                height: 100vh;
+                height: calc(100vh - 130px);
 
                 > ul {
                     display: block;
@@ -128,7 +143,6 @@ a { text-decoration: none;}
                         width: 100%;
                         position: relative;
 
-
                         a {
                             color: #999;
                             font-weight: 700;
@@ -150,7 +164,7 @@ a { text-decoration: none;}
                             text-transform: uppercase;
                             font-size: 9px;
                             position: relative;
-                            letter-spacing: .125px;
+                            letter-spacing: 0.125px;
                             top: -2px;
                         }
 
@@ -162,8 +176,8 @@ a { text-decoration: none;}
                         }
 
                         .plus-icon {
-                            font-size: .85em;
-                            transition: .3s;
+                            font-size: 0.85em;
+                            transition: 0.3s;
                             width: 18px;
                             height: 18px;
                             text-align: center;
@@ -192,7 +206,6 @@ a { text-decoration: none;}
                             padding: 0;
 
                             li {
-
                                 a {
                                     font-weight: 400;
                                 }
@@ -212,13 +225,13 @@ a { text-decoration: none;}
                         &.selected-tree {
                             > a {
                                 color: #000;
-                                transition: .4s;
+                                transition: 0.4s;
                             }
 
                             > span {
                                 .fa {
                                     transform: rotate(90deg);
-                                    color: #007bff;
+                                    color: #3e9fcb;
                                 }
                             }
 
@@ -235,9 +248,8 @@ a { text-decoration: none;}
             }
         }
 
-
-        .docs-top { 
-             padding: 0 1em; 
+        .docs-top {
+            padding: 0 1em;
 
             .navbar-logo {
                 .navbar-brand {
@@ -250,16 +262,16 @@ a { text-decoration: none;}
                     strong {
                         font-weight: 300;
                         text-transform: uppercase;
-                        font-size: .7em;
+                        font-size: 0.7em;
                         letter-spacing: 1px;
                     }
                 }
 
                 .go-back-site {
                     color: #000;
-                    opacity: .65;
-                    transition: .2s;
-                    font-size: .8em;
+                    opacity: 0.65;
+                    transition: 0.2s;
+                    font-size: 0.8em;
                     font-weight: 300;
 
                     &:hover {
@@ -269,7 +281,7 @@ a { text-decoration: none;}
                 }
 
                 .navbar-logo-desc {
-                    font-size: .85em;
+                    font-size: 0.85em;
 
                     strong {
                         display: block;
@@ -312,7 +324,7 @@ a { text-decoration: none;}
             padding: 15px 30px;
             margin: 0 -15px;
             text-align: right;
-            font-size: .8em;
+            font-size: 0.8em;
             min-height: 48px;
 
             a {
@@ -369,13 +381,21 @@ a { text-decoration: none;}
                 font-size: 2rem;
             }
 
-            h3, h4, h5, h6 {
+            h3,
+            h4,
+            h5,
+            h6 {
                 padding-top: 20px;
                 padding-bottom: 5px;
                 font-size: 1.5rem;
             }
 
-            h1, h2, h3, h4, h5, h6 {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
                 position: relative;
 
                 .anchor {
@@ -385,7 +405,7 @@ a { text-decoration: none;}
                     bottom: 5px;
                     color: #999;
                     opacity: 0;
-                    transition: .5s;
+                    transition: 0.5s;
                 }
 
                 &:hover {
@@ -401,7 +421,7 @@ a { text-decoration: none;}
                 border-left: 3px solid #d2dbe4;
                 padding: 1em 1.5em;
                 background-color: #e9edf1;
-                padding-bottom: .2em;
+                padding-bottom: 0.2em;
                 font-size: 1em;
             }
 
@@ -413,7 +433,6 @@ a { text-decoration: none;}
                 border-radius: 6px;
             }
 
-
             table {
                 display: block;
                 overflow: auto;
@@ -426,61 +445,31 @@ a { text-decoration: none;}
                 }
 
                 th {
-                    font-weight: 600
+                    font-weight: 600;
                 }
 
-                td, th {
+                td,
+                th {
                     border: 1px solid #dfe2e5;
-                    padding: 6px 13px
+                    padding: 6px 13px;
                 }
 
                 tr {
                     background-color: #fff;
-                    border-top: 1px solid #c6cbd1
+                    border-top: 1px solid #c6cbd1;
                 }
 
                 tr:nth-child(2n) {
-                    background-color: #f6f8fa
+                    background-color: #f6f8fa;
                 }
 
                 img {
-                    background-color: initial
+                    background-color: initial;
                 }
             }
         }
     }
 
-    .doc-social-btns {
-        margin: 0 -15px 0;
-        font-size: .8em;
-        background: #e9ecf0;
-        height: 53px;
-        padding: 15px 20px;
-        position: fixed;
-        top: 0px;
-        width: 100%;
-
-        a:hover {
-            text-decoration: none;
-        }
-
-        .twitter {
-            color: #00ACEE;
-        }
-
-        .linkedin {
-            color: #0077B5;
-        }
-
-        .email {
-            color: #5a5a5a;
-        }
-
-        .share-button {
-            margin-left: 10px;
-        }
-    }
-
     .cont-container {
         a.cont-avatar {
             position: relative;
@@ -493,7 +482,7 @@ a { text-decoration: none;}
                 margin-left: -10px;
                 display: inline-block;
                 margin-top: -2px;
-                transition: .2s;
+                transition: 0.2s;
             }
         }
 
@@ -508,7 +497,7 @@ a { text-decoration: none;}
 
     .docs-page-index {
         min-height: 90vh;
-        background-color: #f5f7fa !important;
+        background-color: transparent !important;
 
         #scroll-index {
             max-height: 90vh;
@@ -516,13 +505,12 @@ a { text-decoration: none;}
 
         .docs-inner-anchors {
             position: fixed;
-            top: 50px;
-            padding: 10px;
-            font-size: .90em;
+            top: 4px;
+            font-size: 0.9em;
 
             .navbar {
                 .nav-pills {
-                    font-size: .92em;
+                    font-size: 0.92em;
                     margin-left: 15px;
                     border-left: 1px solid #eee;
 
@@ -536,13 +524,13 @@ a { text-decoration: none;}
                         margin-left: -1px;
                         margin-top: 1px;
                         margin-bottom: 1px;
-                        transition: .2s;
+                        transition: 0.2s;
                         font-weight: normal;
 
                         &.active {
-                            border-left: 1px solid #007bff;
+                            border-left: 1px solid #3e9fcb;
                             background: none;
-                            color: #007bff;
+                            color: #3e9fcb;
                             font-weight: normal;
                         }
                     }
@@ -550,14 +538,14 @@ a { text-decoration: none;}
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #007bff;
+                                color: #3e9fcb;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #007bff;
+                                    color: #3e9fcb;
                                 }
                             }
                         }
@@ -575,10 +563,9 @@ a { text-decoration: none;}
             }
         }
 
-
         .scroll-top-btn {
             display: none;
-            font-size: .85em;
+            font-size: 0.85em;
             color: #aaa;
             text-decoration: none;
             padding-left: 18px;
@@ -588,28 +575,110 @@ a { text-decoration: none;}
             }
         }
     }
-}
 
+    .card {
+        background-color: #fff;
+        border-radius: 12px;
+        border: none;
+        width: 300px;
+        padding: 30px;
+        box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
+
+        .card-header {
+            background-color: transparent;
+            border-bottom: none;
+            color: #0b1621;
+            font-size: 19px;
+            padding: 0;
+        }
+        .card-body {
+            padding: 0;
+        }
+    }
+
+    .top-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0 5px 0;
+        border-bottom: 1px solid #eaeaea;
+
+        .breadcrumb {
+            margin-bottom: 0;
+
+            .breadcrumb-item {
+                color: #838690;
+                font-size: 13px;
+                font-weight: 500;
+                a {
+                    color: #838690;
+                }
+                &.active {
+                    color: #c7c8c9;
+                    font-weight: 400;
+                }
+            }
+        }
+        .doc-social-btns {
+            color: rgb(11 22 33 / 50%);
+
+            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 15px;
+        .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;
+            }
+
+        }
+    }
+}
 
 .docs-page {
     .docs-sidebar {
-        .docs-sidebar-wrapper {
-
+        &.docs-sidebar-wrapper {
             .docs-version {
                 .version-select {
-
-                    select.form-select, input.form-control {
-                        background: #000000;
-                        color: white;
+                    select.form-select,
+                    input.form-control {
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
                     }
 
                     input.form-control {
-                        background: #000000;
-                        color: white;
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
 
                         &::placeholder {
-                            color: white;
-                            opacity: .5;
+                            color: rgb(255 255 255 / 30%);
                         }
                     }
 
@@ -642,8 +711,6 @@ a { text-decoration: none;}
             .docs-tree-list {
                 ul {
                     li {
-
-
                         a {
                             color: #aaa;
                             border-bottom: 0;
@@ -653,8 +720,8 @@ a { text-decoration: none;}
                             }
 
                             .plus-icon {
-                                font-size: .85em;
-                                transition: .3s;
+                                font-size: 0.85em;
+                                transition: 0.3s;
                                 width: 18px;
                                 height: 18px;
                                 text-align: center;
@@ -684,7 +751,6 @@ a { text-decoration: none;}
                             }
                         }
 
-
                         span.tree-toggle {
                             color: #555;
                             padding: 7px 0;
@@ -692,11 +758,10 @@ a { text-decoration: none;}
                             border-bottom: 0;
                         }
 
-
                         &.selected-tree {
                             > a {
                                 color: #fff;
-                                transition: .4s;
+                                transition: 0.4s;
 
                                 span {
                                     .fa {
@@ -741,32 +806,6 @@ a { text-decoration: none;}
     }
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 @media (min-width: 1100px) {
     .container {
         max-width: 1080px;
@@ -821,7 +860,7 @@ a { text-decoration: none;}
                 height: 72px;
 
                 .docs-tree-list {
-                    padding: .5rem 1.5rem 2rem 1.5rem;
+                    padding: 0.5rem 1.5rem 2rem 1.5rem;
                     position: fixed;
                     top: 70px;
                     font-size: 17px;
@@ -846,7 +885,7 @@ a { text-decoration: none;}
             .docs-top {
                 .navbar-logo {
                     padding: 0rem;
-                    padding-top: .3rem;
+                    padding-top: 0.3rem;
                     display: block;
                     text-align: center;
 
@@ -900,7 +939,6 @@ a { text-decoration: none;}
     }
 }
 
-
 .for-mobile {
     display: none;
 }
@@ -909,7 +947,7 @@ a { text-decoration: none;}
     display: inline-block;
 }
 
-pre[class*="language-"] {
+pre[class*='language-'] {
     padding: 1.4em 2em !important;
     margin: 15px 0 25px !important;
     border-radius: 6px;
@@ -933,16 +971,19 @@ pre {
         color: #569cd6;
     }
 
-    .token.atrule, .token.attr-value, .token.function, .token.class-name {
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name {
         color: #d69d85;
     }
 }
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
     background: #191919 !important;
 }
 
-
 div.code-toolbar > .toolbar span {
     cursor: default;
 }
@@ -968,7 +1009,8 @@ div.code-toolbar > .toolbar a {
         display: none;
     }
 
-    .close-mmenu, .close-dmenu {
+    .close-mmenu,
+    .close-dmenu {
         position: absolute;
         top: -78px;
         left: 25px;
@@ -979,7 +1021,7 @@ div.code-toolbar > .toolbar a {
     }
 
     .navbar {
-        padding: .5rem 1.75rem;
+        padding: 0.5rem 1.75rem;
 
         .navbar-collapse {
             background: rgb(56, 0, 61);
@@ -1003,12 +1045,12 @@ div.code-toolbar > .toolbar a {
         }
 
         .navbar-toggler {
-            padding: .5rem .75rem;
+            padding: 0.5rem 0.75rem;
             font-size: 1.5rem;
             line-height: 1;
             background-color: transparent;
             border: 0;
-            border-radius: .25rem;
+            border-radius: 0.25rem;
             color: #fff !important;
             margin-left: -1rem;
         }
@@ -1028,13 +1070,12 @@ div.code-toolbar > .toolbar a {
         font-size: 2em;
     }
 
-    .mb-5, .my-5 {
+    .mb-5,
+    .my-5 {
         margin-bottom: 2rem !important;
     }
 }
 
-
-
 @media screen and (max-width: 767px) {
     .navbar-logo {
         .navbar-brand {
@@ -1048,22 +1089,25 @@ div.code-toolbar > .toolbar a {
     }
 }
 
-
-
 .alert-criteria {
     padding: 1.25em 1.5em;
     max-width: 100%;
+    color: #3e9fcb;
+    background-color: #f4f6fa;
+    border-color: #f4f6fa;
+    border-radius: 12px;
 
     p.alert-p {
-        font-size: .96em;
+        font-size: 0.96em;
     }
 
     .input-group {
-        .input-group-text, .form-control {
-            font-size: .96em;
+        .input-group-text,
+        .form-control {
+            font-size: 0.96em;
 
             @media screen and (max-width: 767px) {
-                font-size: .88em;
+                font-size: 0.88em;
             }
         }
 
@@ -1072,7 +1116,6 @@ div.code-toolbar > .toolbar a {
             background-color: #bddcfd;
             border: 1px solid #bddcfd;
 
-
             @media screen and (max-width: 1366px) {
                 display: none;
             }
@@ -1117,6 +1160,6 @@ div.code-toolbar > .toolbar a {
 .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
 .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
     opacity: 1 !important;
-    filter: "alpha(opacity=1)";
-    -ms-filter: "alpha(opacity=1)";
-}
+    filter: 'alpha(opacity=1)';
+    -ms-filter: 'alpha(opacity=1)';
+}
\ No newline at end of file