.elementor-13443 .elementor-element.elementor-element-65ee80c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13443 .elementor-element.elementor-element-db272bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 1px 0px 0px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:0px;border-color:#EAECF0;--border-color:#EAECF0;--padding-top:25px;--padding-bottom:25px;--padding-left:10px;--padding-right:10px;}.elementor-13443 .elementor-element.elementor-element-db272bf.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-13443 .elementor-element.elementor-element-242c9db > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-13443 .elementor-element.elementor-element-242c9db .betterdocs-search-modal-archive{width:100%;max-width:100%;display:inline-block;text-align:left;}.elementor-13443 .elementor-element.elementor-element-242c9db .betterdocs-search-modal-sidebar{width:100%;display:inline-block;text-align:left;}.elementor-13443 .elementor-element.elementor-element-242c9db{text-align:left;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-single-category-wrapper .betterdocs-body, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-content .betterdocs-category-list-wrapper .betterdocs-single-category-inner .betterdocs-body, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body{background-color:#F0F0F0;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E1E1;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-icon{background-color:var( --e-global-color-8819f88 );}.elementor-13443 .elementor-element.elementor-element-5517e9f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper{margin:0px 0px 0px 0px;padding:0px 10px 10px 10px;height:1500px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar.betterdocs-sidebar-layout-8{padding:0px 10px 10px 10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-single-category-wrapper .betterdocs-body, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body{border-radius:8px 8px 8px 8px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-content .betterdocs-category-list-wrapper .betterdocs-single-category-inner .betterdocs-body, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body{border-radius:8px 8px 8px 8px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .docs-single-cat-wrap{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper:not(.layout-2) .betterdocs-category-icon{height:20px;width:auto;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-icon img{height:20px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .docs-single-cat-wrap .docs-cat-icon:hover{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(a), .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-category-list-wrapper .betterdocs-category-list-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(a), .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-layout-8 .betterdocs-category-title{color:var( --e-global-color-46476df );}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-title a, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-title:not(a), .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-list-wrapper .betterdocs-category-title:not(a), .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar-layout-8 .betterdocs-category-title{margin:0px 0px 0px 0px;padding:10px 0px 10px 0px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-header{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-items-counts span{color:#ffffff;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-items-counts{height:0px;width:0px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-category-items-counts:hover{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a{font-size:16px;color:var( --e-global-color-46476df );}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a:hover, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a:hover, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a:focus{color:#000000;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a:hover{background-color:#E0E0E0;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a.active{background-color:#E0E0E0;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a:focus{background-color:#E0E0E0;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li{margin:10px 10px 10px 10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li:not(:has(>ul)) a{margin:10px 10px 10px 10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-category-grid-wrapper .betterdocs-single-category-wrapper .betterdocs-body{padding-top:10px;padding-bottom:10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list .betterdocs-nested-category-list a, .elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-full-sidebar-left.betterdocs-sidebar-layout-8 .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body .betterdocs-articles-list li ul li a{color:var( --e-global-color-46476df );}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list .betterdocs-nested-category-list li{margin:10px 10px 10px 10px;padding-top:10px;padding-bottom:10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list .betterdocs-nested-category-list li svg{margin:10px 10px 10px 10px;}.elementor-13443 .elementor-element.elementor-element-5517e9f .sticky-toc-container{width:0px;z-index:320%;}.elementor-13443 .elementor-element.elementor-element-116a431d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:25px;--padding-bottom:25px;--padding-left:0px;--padding-right:0px;}.elementor-13443 .elementor-element.elementor-element-3217639d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;}.elementor-13443 .elementor-element.elementor-element-a26dd42 > .elementor-widget-container{margin:0px 0px 16px 0px;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .betterdocs-breadcrumb-item.current span{color:#FFFFFF;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .betterdocs-breadcrumb-item.current span:hover{color:#F1F1F1;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .betterdocs-breadcrumb-item > a{color:#DBF3D0;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .betterdocs-breadcrumb-item > a:hover{color:#F1F1F1;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .betterdocs-breadcrumb-list{justify-content:center;}.elementor-13443 .elementor-element.elementor-element-a26dd42 .betterdocs-breadcrumb .breadcrumb-delimiter{color:#DBF3D0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-13443 .elementor-element.elementor-element-3d8d7fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper{--column:3;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper:not(.layout-2) .betterdocs-category-header-inner{border-style:solid;border-width:0px 0px 2px 0px;border-color:#8E0AE9;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper .betterdocs-category-items-counts{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper .betterdocs-category-items-counts:after{transition:300ms;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper .betterdocs-footer a{transition:300ms;}@media(max-width:1024px){.elementor-13443 .elementor-element.elementor-element-65ee80c{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-13443 .elementor-element.elementor-element-116a431d{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper{--column:2;}}@media(max-width:767px){.elementor-13443 .elementor-element.elementor-element-65ee80c{--flex-wrap:wrap;}.elementor-13443 .elementor-element.elementor-element-db272bf{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13443 .elementor-element.elementor-element-116a431d{--width:100%;}.elementor-13443 .elementor-element.elementor-element-4f7fd9b3 .betterdocs-elementor .betterdocs-category-grid-inner-wrapper{--column:1;}}@media(min-width:768px){.elementor-13443 .elementor-element.elementor-element-db272bf{--width:25%;}.elementor-13443 .elementor-element.elementor-element-116a431d{--width:75%;}}@media(max-width:1024px) and (min-width:768px){.elementor-13443 .elementor-element.elementor-element-db272bf{--width:25%;}.elementor-13443 .elementor-element.elementor-element-116a431d{--width:70%;}}/* Start custom CSS for container, class: .elementor-element-db272bf */:root{ --ecd-line:#dde4d0; /* guide lines, control borders */ --ecd-muted:#5f6656; /* section links, placeholder text ( 5.9:1 ) */ --ecd-chev:#7a8270; /* category chevrons ( 4.0:1, icons only ) */ --ecd-mask-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); } /* the column --------------------------------------------------------------- It sticks with CSS, not Elementor's Sticky: a CSS sticky column stays inside its row, so it scrolls away with the page as the footer arrives instead of staying pinned over it. It sticks at the bottom edge of the fixed site header: --ecd-head is that edge, measured by the extras script ( admin bar included ); 154px until it runs. Turn the column's own Sticky off in Elementor; the rules below also overrule it if it is still on. */ @media (min-width:768px){ .ecd-sidenav{ position:sticky !important;top:var(--ecd-head,154px) !important; left:auto !important;inset-inline-start:auto !important; align-self:flex-start; max-height:calc(100vh - var(--ecd-head,154px) - 16px); overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:transparent transparent; /* shown on hover, below */ border-right-color:transparent !important; /* the divider is on the content column */ -webkit-mask-image:none;mask-image:none; /* never a mask or transform here: they would trap the search window, which lives in this column */ } .ecd-sidenav:hover, .ecd-sidenav:focus-within{scrollbar-color:var(--ecd-line) transparent} /* the divider, the full height of the page */ .ecd-sidenav~.e-con:not(.ecd-sidenav){border-left:1px solid var(--ecd-rule)} } .elementor-sticky__spacer.ecd-sidenav{display:none !important} /* Elementor's placeholder, while its Sticky is still on */ /* BetterDocs draws its search window inside the widget, so inside this column. While it is open ( .betterdocs-modal-overlay exists only then ) the column is lifted above the site header and the article, so the window covers them. */ .ecd-sidenav:has(.betterdocs-modal-overlay){z-index:2147483000 !important;overflow:hidden !important} /* and its own scrollbar hidden, which would paint over the window */ .ecd-sidenav>*{flex-shrink:0} /* the column scrolls; its widgets never squeeze */ /* search button ( a BetterDocs Search Form widget in the column ) ---------- */ .ecd-sidenav>.elementor-widget-betterdocs-search-form{margin:0 !important;width:100%} .ecd-sidenav>.elementor-widget-betterdocs-search-form :is(.betterdocs-search-form-widget-wrapper,.betterdocs-search-layout-1){margin:0 !important;padding:0 !important;background:none !important;max-width:none !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-bar{ width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important; background:var(--ecd-white) !important;border:1px solid var(--ecd-line) !important;border-radius:9px !important; box-shadow:0 1px 2px rgba(46,61,28,.06) !important;cursor:pointer;transition:border-color .15s ease; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-bar:hover{border-color:var(--ecd-mist) !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input-wrapper{ display:flex !important;flex:1 1 auto;width:100%;min-width:0 !important;align-items:center;gap:10px;height:40px;box-sizing:border-box; padding:0 8px 0 12px !important;margin:0 !important;border:0 !important;background:none !important; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-icon{flex:none;width:16px !important;height:16px !important;margin:0 !important;position:static !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-icon path{fill:var(--ecd-olive) !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input{ flex:1 1 auto;min-width:0;padding:0 !important;margin:0 !important; font-size:14px !important;line-height:1 !important;color:var(--ecd-muted) !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* the shortcut hint; the extras script adds .ecd-mac on Apple devices */ .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input-wrapper::after{ content:"Ctrl K";flex:none;white-space:nowrap; font-size:11px;font-weight:600;line-height:1;color:var(--ecd-muted); background:#f7f9f3;border:1px solid var(--ecd-line);border-radius:5px;padding:4px 6px; } .ecd-mac .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input-wrapper::after{content:"\2318 K"} @media (hover:none){.ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input-wrapper::after{display:none}} /* the same button when the widget uses BetterDocs' Sidebar search layout */ .ecd-sidenav>.elementor-widget-betterdocs-search-form :is(.betterdocs-search-modal-sidebar,.betterdocs-live-search){ width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important; background:none !important;border:0 !important;box-shadow:none !important; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .betterdocs-searchform{ display:flex !important;align-items:center;gap:10px;width:100% !important;height:40px !important;box-sizing:border-box; margin:0 !important;padding:0 8px 0 12px !important;cursor:pointer; background:var(--ecd-white) !important;border:1px solid var(--ecd-line) !important;border-radius:9px !important; box-shadow:0 1px 2px rgba(46,61,28,.06) !important;transition:border-color .15s ease; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .betterdocs-searchform:hover{border-color:var(--ecd-mist) !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .betterdocs-searchform-input-wrap{ display:flex !important;align-items:center;gap:10px;flex:1 1 auto;min-width:0;height:auto !important; margin:0 !important;padding:0 !important;border:0 !important;background:none !important;position:static !important; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .doc-search-icon{flex:none;position:static !important;width:16px !important;height:16px !important;margin:0 !important;transform:none !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .doc-search-icon path{fill:var(--ecd-olive) !important} .ecd-sidenav>.elementor-widget-betterdocs-search-form .betterdocs-search-command{ display:block !important;flex:1 1 auto;min-width:0;margin:0 !important;padding:0 !important;border:0 !important;background:none !important; font-size:14px !important;line-height:1.2 !important;color:var(--ecd-muted) !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* BetterDocs always writes "Cmd K"; the hint follows the visitor's keyboard */ .ecd-sidenav>.elementor-widget-betterdocs-search-form .command-key{ flex:none;display:inline-flex !important;align-items:center;height:auto !important;margin:0 !important;padding:4px 6px !important; background:#f7f9f3 !important;border:1px solid var(--ecd-line) !important;border-radius:5px !important; font-size:0 !important;line-height:1 !important;color:var(--ecd-muted) !important; } .ecd-sidenav>.elementor-widget-betterdocs-search-form .command-key::after{content:"Ctrl K";font-size:11px;font-weight:600;white-space:nowrap} .ecd-mac .ecd-sidenav>.elementor-widget-betterdocs-search-form .command-key::after{content:"\2318 K"} @media (hover:none){.ecd-sidenav>.elementor-widget-betterdocs-search-form .command-key{display:none !important}} /* the four guides ( built by the script in the HTML widget ) --------------- */ .ecd-sidenav .ecd-kblinks{ display:flex !important;flex-direction:column;gap:2px !important; margin:0 0 10px !important;padding:0 0 16px !important; border-bottom:1px solid var(--ecd-rule); } .ecd-sidenav>.elementor-widget-betterdocs-search-form+.ecd-kblinks{margin-top:16px !important} /* the order of the mockup, whatever order the script builds them in */ .ecd-sidenav .ecd-kblinks li:has(a[href*="/installation-guide/"]){order:1} .ecd-sidenav .ecd-kblinks li:has(a[href*="/administrative-console-guide/"]){order:2} .ecd-sidenav .ecd-kblinks li:has(a[href*="/how-to-guides/"]){order:3} .ecd-sidenav .ecd-kblinks li:has(a[href*="/extension-guides/"]){order:4} .ecd-sidenav .ecd-kblinks li>a{ position:relative;display:flex !important;align-items:center;min-height:38px;box-sizing:border-box; padding:5px 6px 5px 46px !important;border:0 !important;border-radius:9px !important; background:transparent !important;text-align:left !important; font-size:14px !important;font-weight:500 !important;line-height:1.3 !important;color:var(--ecd-slate) !important; } .ecd-sidenav .ecd-kblinks li>a:hover{background:var(--ecd-cream) !important;color:var(--ecd-forest) !important} .ecd-sidenav .ecd-kblinks li>a:focus-visible{outline:2px solid var(--ecd-olive);outline-offset:1px} /* the icon tile, then the icon drawn over it */ .ecd-sidenav .ecd-kblinks li>a::before{ content:"";position:absolute;left:6px;top:50%;width:28px;height:28px;margin-top:-14px; border-radius:8px;background:var(--ecd-cream);box-shadow:inset 0 0 0 1px var(--ecd-line); } .ecd-sidenav .ecd-kblinks li>a::after{ content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px; background:var(--ecd-olive); -webkit-mask:var(--ecd-kb-icon) center/contain no-repeat;mask:var(--ecd-kb-icon) center/contain no-repeat; } .ecd-sidenav .ecd-kblinks li>a.is-current{font-weight:700 !important;color:var(--ecd-forest) !important;background:transparent !important} .ecd-sidenav .ecd-kblinks li>a.is-current:hover{background:var(--ecd-cream) !important} .ecd-sidenav .ecd-kblinks li>a.is-current::before{background:var(--ecd-forest);box-shadow:none} .ecd-sidenav .ecd-kblinks li>a.is-current::after{background:var(--ecd-white)} .ecd-kblinks a[href*="/installation-guide/"]{--ecd-kb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 17v3h16v-3'/%3E%3C/svg%3E")} .ecd-kblinks a[href*="/administrative-console-guide/"]{--ecd-kb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9M15 5v4M9 15v4'/%3E%3C/svg%3E")} .ecd-kblinks a[href*="/how-to-guides/"]{--ecd-kb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h6a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H3zM21 5h-6a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E")} .ecd-kblinks a[href*="/extension-guides/"]{--ecd-kb-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM17 14v6M14 17h6'/%3E%3C/svg%3E")} /* the tree: reset what BetterDocs and the widget settings draw ------------- */ #betterdocs-sidebar-left, #betterdocs-sidebar-left .betterdocs-sidebar-content, #betterdocs-sidebar-left .betterdocs-category-grid-wrapper, #betterdocs-sidebar-left .betterdocs-category-grid-inner-wrapper, #betterdocs-sidebar-left .betterdocs-single-category-wrapper, #betterdocs-sidebar-left .betterdocs-single-category-inner, #betterdocs-sidebar-left .betterdocs-body{ margin:0 !important;padding:0 !important;background:transparent !important; border:0 !important;border-radius:0 !important;box-shadow:none !important; } #betterdocs-sidebar-left .betterdocs-category-grid-wrapper{height:auto !important} #betterdocs-sidebar-left .betterdocs-category-grid-inner-wrapper{display:block !important} #betterdocs-sidebar-left .betterdocs-sidebar-content{max-height:none !important;height:auto !important;min-height:0 !important;overflow:visible !important} #betterdocs-sidebar-left .betterdocs-body{padding-bottom:6px !important} #betterdocs-sidebar-left .betterdocs-category-items-counts{display:none !important} #betterdocs-sidebar-left svg{margin:0 !important} /* a category row */ #betterdocs-sidebar-left .betterdocs-category-header{margin:2px 0 0 !important;padding:0 !important;background:transparent !important;border:0 !important;cursor:pointer} #betterdocs-sidebar-left .betterdocs-category-header-inner{ display:flex !important;align-items:center;gap:8px;margin:0 !important;padding:8px !important; border-radius:7px;background:transparent !important;transition:background .15s ease; } #betterdocs-sidebar-left .betterdocs-category-header:hover .betterdocs-category-header-inner{background:var(--ecd-cream) !important} #betterdocs-sidebar-left .betterdocs-category-title, #betterdocs-sidebar-left .betterdocs-category-title a{ flex:1 1 auto;min-width:0;margin:0 !important;padding:0 !important; font-size:14px !important;font-weight:600 !important;line-height:1.35 !important; letter-spacing:0 !important;text-transform:none !important;color:var(--ecd-forest) !important; } #betterdocs-sidebar-left .betterdocs-category-collapse{display:none !important} #betterdocs-sidebar-left .betterdocs-category-header-inner::after{ content:"";flex:none;width:14px;height:14px;background:var(--ecd-chev);transition:transform .15s ease; -webkit-mask:var(--ecd-mask-chev) center/contain no-repeat;mask:var(--ecd-mask-chev) center/contain no-repeat; } #betterdocs-sidebar-left .betterdocs-single-category-wrapper.show .betterdocs-category-header-inner::after{transform:rotate(90deg)} /* the docs under it, hung off a guide line */ #betterdocs-sidebar-left .betterdocs-articles-list, #betterdocs-sidebar-left .betterdocs-nested-category-list{ list-style:none;margin:2px 0 4px 12px !important;padding:0 0 0 8px !important; border-left:1px solid var(--ecd-line) !important; } #betterdocs-sidebar-left .betterdocs-articles-list li{position:relative;display:block !important;margin:0 !important;padding:0 !important;background:none !important} #betterdocs-sidebar-left .betterdocs-articles-list li::before{display:none !important} #betterdocs-sidebar-left .betterdocs-articles-list li>i, #betterdocs-sidebar-left .betterdocs-nested-category-title>i{display:none !important} #betterdocs-sidebar-left .betterdocs-articles-list li>a{ position:relative;display:block !important;margin:0 !important;padding:6px 10px !important; border-radius:7px;background:transparent !important;box-shadow:none !important; font-size:14px !important;font-weight:400 !important;line-height:1.4 !important; color:var(--ecd-slate) !important;text-decoration:none !important; } #betterdocs-sidebar-left .betterdocs-articles-list li>a span{font:inherit !important;color:inherit !important} #betterdocs-sidebar-left .betterdocs-articles-list li>a:hover{background:var(--ecd-cream) !important;color:var(--ecd-forest) !important} #betterdocs-sidebar-left .betterdocs-articles-list li>a:focus-visible{outline:2px solid var(--ecd-olive);outline-offset:-2px} /* the doc being read */ #betterdocs-sidebar-left .betterdocs-articles-list li>a.active{background:var(--ecd-cream) !important;color:var(--ecd-forest) !important;font-weight:600 !important} #betterdocs-sidebar-left .betterdocs-articles-list li>a.active::before{ content:"";position:absolute;left:-9px;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--ecd-olive); } /* a subcategory row ( Payment Gateways ); the chevron moves to the right */ #betterdocs-sidebar-left li.betterdocs-nested-category-wrapper{display:block !important} #betterdocs-sidebar-left .betterdocs-nested-category-title{ display:flex !important;align-items:center;gap:6px;margin:0 !important;padding:6px 8px 6px 10px !important; border-radius:7px;background:transparent !important;cursor:pointer; font-size:14px !important;font-weight:500 !important;line-height:1.4 !important;color:var(--ecd-forest) !important; } #betterdocs-sidebar-left .betterdocs-nested-category-title:hover{background:var(--ecd-cream) !important} #betterdocs-sidebar-left .betterdocs-nested-category-title>a{ order:0;flex:1 1 auto;min-width:0;margin:0 !important;padding:0 !important; font:inherit;color:inherit;text-decoration:none !important; } #betterdocs-sidebar-left li:not(.ecd-docrow)>.betterdocs-nested-category-title>svg.toggle-arrow{order:1;flex:none;width:11px !important;height:11px !important;margin:0 3px 0 0 !important} #betterdocs-sidebar-left .betterdocs-nested-category-title>svg.toggle-arrow path{fill:var(--ecd-chev) !important} /* a subcategory drawn as a doc row ( section 13, DOC_ROWS ): its chevron points right when closed and down when open, like every other row that folds */ #betterdocs-sidebar-left li.ecd-docrow>.betterdocs-nested-category-title>.ecd-toc-btn{width:22px !important;height:20px !important;margin:0 !important} #betterdocs-sidebar-left li.ecd-docrow>.betterdocs-nested-category-title>.ecd-toc-btn svg{transform:rotate(-90deg)} #betterdocs-sidebar-left li.ecd-docrow>.betterdocs-nested-category-title>.ecd-toc-btn[aria-expanded="true"] svg{transform:none} /* section dropdowns ( section 13's script ): the chevron sits inside the row and shows on hover, on keyboard focus, when open and on the doc being read */ #betterdocs-sidebar-left li.ecd-toc-item>a{padding-right:36px !important} #betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn{ position:absolute !important;top:4px;right:4px;width:26px !important;height:26px !important;margin:0 !important; opacity:0;transition:opacity .15s ease,background .15s ease; } #betterdocs-sidebar-left li.ecd-toc-item:hover>.ecd-toc-btn, #betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn:focus-visible, #betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn[aria-expanded="true"], #betterdocs-sidebar-left li.ecd-toc-item>a.active+.ecd-toc-btn{opacity:1} #betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn:hover{background:var(--ecd-rule) !important} @media (hover:none){#betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn{opacity:.6}} #betterdocs-sidebar-left .ecd-toc{ margin:2px 0 6px 12px !important;padding:0 0 0 8px !important;border-left:1px solid var(--ecd-line) !important; } #betterdocs-sidebar-left .ecd-toc li{margin:0 !important;padding:0 !important} #betterdocs-sidebar-left .ecd-toc a{ position:relative;display:block;padding:5px 8px 5px 10px !important;border-radius:7px; background:transparent !important;box-shadow:none !important; font-size:13px !important;font-weight:400 !important;line-height:1.4 !important;color:var(--ecd-muted) !important; } #betterdocs-sidebar-left .ecd-toc a:hover{background:var(--ecd-cream) !important;color:var(--ecd-forest) !important} #betterdocs-sidebar-left .ecd-toc a.is-current{background:transparent !important;color:var(--ecd-olive) !important;font-weight:600 !important} #betterdocs-sidebar-left .ecd-toc a.is-current::before{ content:"";position:absolute;left:-9px;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--ecd-olive); } /* phones: the whole column is the drawer ------------------------------------ Section 9 slides the sidebar widget alone, which would leave the search and the four guides behind on the page. This slides the column instead and puts the widget back inside it. Section 9's labels, scrim and close button are unchanged; its rules for aside.betterdocs-sidebar are overruled here by the ID and can be deleted from section 9 once this is live. */ @media (max-width:767px){ .ecd-sidenav{ display:block !important; /* the container's phone setting lets its widgets wrap into a second column */ position:fixed !important;top:0 !important;bottom:0 !important;left:0 !important;right:auto !important; width:86% !important;max-width:330px !important;height:auto !important;margin:0 !important; z-index:1000001 !important;background:var(--ecd-white) !important; border-right:1px solid var(--ecd-mist) !important; padding:18px 14px 28px !important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(46,61,28,.28); } body:has(.ecd-nav-toggle:checked) .ecd-sidenav{transform:none} /* none, not translateX(0): a transform would keep the search window inside the drawer */ .ecd-sidenav>.elementor-widget-betterdocs-sidebar{display:block !important} #betterdocs-sidebar-left{ display:block !important;position:static !important;transform:none !important; width:auto !important;max-width:none !important;height:auto !important; box-shadow:none !important;overflow:visible !important; } /* 44px rows for fingers */ .ecd-sidenav>.elementor-widget-betterdocs-search-form .search-input-wrapper{height:44px} .ecd-sidenav>.elementor-widget-betterdocs-search-form .betterdocs-searchform{height:44px !important} .ecd-sidenav .ecd-kblinks li>a{min-height:44px} #betterdocs-sidebar-left .betterdocs-category-header-inner{min-height:44px;box-sizing:border-box;padding:10px 8px !important} #betterdocs-sidebar-left .betterdocs-category-title, #betterdocs-sidebar-left .betterdocs-category-title a{font-size:15px !important} #betterdocs-sidebar-left .betterdocs-articles-list li>a{padding:11px 10px !important;font-size:15px !important} #betterdocs-sidebar-left li.ecd-toc-item>a{padding-right:48px !important} #betterdocs-sidebar-left li.ecd-toc-item>.ecd-toc-btn{top:2px;width:40px !important;height:40px !important} #betterdocs-sidebar-left .betterdocs-nested-category-title{min-height:44px;box-sizing:border-box;font-size:15px !important} #betterdocs-sidebar-left .ecd-toc a{padding:12px 8px 12px 10px !important;font-size:14px !important} }/* End custom CSS */