:root{--border-color: var(--b-border-7);--thumb-min-width: 204px;--body-background: var(--b-neutral-95)}.b-theme-visby-dark,.b-theme-stockholm-dark,.b-theme-svalbard-dark,.b-theme-material3-dark{color-scheme:dark;--body-background: var(--b-neutral-95)}body,#browser{background:var(--body-background)}#outer{display:flex;overflow:hidden;flex:1}#sidebar{--b-panel-background: var(--body-background);border-inline-end:1px solid var(--border-color)}.framework-selector{flex-direction:column;width:100%;height:auto!important;gap:.5em}.b-button.framework-tab{gap:1em;width:100%;padding:.5em;justify-content:flex-start;i{background-size:contain;background-position:center;background-repeat:no-repeat;width:2em;height:2em;opacity:1;transition:filter .2s,opacity .2s;border-radius:.2em;display:grid;place-items:center;&.js{background-image:url(logo/js.svg)}&.react{background-image:url(logo/react.svg)}&.vue{background-image:url(logo/vue.svg)}&.angular{background-image:url(logo/angular.svg)}&.fa:before{font-size:1.6em}}&:after{inset-inline-end:.5em;inset-block-start:unset;padding:1.25em;background:var(--b-primary-95);color:var(--b-primary-30)}&.b-pressed:after{background:transparent;color:inherit}}.thumb-size{width:100%;.b-button{flex:1}.small-thumb i{font-size:.75em}.large-thumb i{font-size:1.25em}}.b-watermark{display:none}#browser{flex:1;-webkit-overflow-scrolling:touch;overflow-y:scroll;overflow-x:clip}.group-header{position:sticky;top:0;background:var(--body-background);z-index:1;padding:1em .8em;color:var(--b-neutral-20);border-bottom:1px solid var(--border-color);display:flex;align-items:center;a{position:absolute;inset-inline-end:0;font-size:.7em;color:#888;font-weight:400;i{margin-inline-end:.2em}}}.tip-folder{margin-top:.5em;i{margin-inline-end:.2em}}a{text-decoration:none}p:first-child{margin-top:0}p:last-child{margin-bottom:0}#scroller{padding:0 2em 2em;display:grid;grid-gap:2em;grid-template-columns:repeat(auto-fit,minmax(var(--thumb-min-width),1fr));&.medium-thumb{--thumb-min-width: 312px}&.large-thumb{--thumb-min-width: 384px}h2{grid-column:1 / -1;margin:0;font-size:1.7em;font-size:1.5em;font-weight:500}}.example{cursor:pointer;position:relative;scroll-margin-top:5em;overflow:clip;background:var(--b-neutral-100);border:1px solid var(--border-color);border-radius:var(--b-widget-border-radius-large);color:var(--b-widget-color);transition:all .2s;@media (max-width : calc(512px - 4em)){max-width:calc(100vw - 4em)}&.popular{background:var(--b-primary-95)}&.new{--b-primary: var(--b-color-deep-orange);background:var(--b-primary-95)}&.updated{--b-primary: var(--b-color-amber);background:var(--b-primary-95)}&.updated .title:after,&.new .title:after{content:"new";display:inline-block;color:#fff;margin-inline-start:.5em;padding:.2em .4em .3em;border-radius:.2em;font-size:.7em;height:1.1em;background:var(--b-primary-50)}&.updated .title:after{content:"updated"}.text{flex:1}.image{transition:all .2s;display:flex;flex-flow:column nowrap;background-color:var(--b-neutral-97);border-bottom:1px solid var(--border-color)}img{aspect-ratio:calc(1024 / 768);transition:all .2s}i{&.popular{color:var(--b-primary);margin-inline-start:auto}}.contents{display:flex;flex-direction:column;padding:1em;gap:.5em}.title{display:flex;cursor:pointer;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;font-size:14px;font-weight:600}.versions{display:flex;flex-direction:row;gap:.25em}.version{font-size:.7em;opacity:.7;width:max-content;padding:.15em .5em;border-radius:5px;background:var(--b-neutral-93);color:var(--b-neutral-30)}.description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:.9em;line-height:1.5;color:var(--b-text-3)}.overlay{position:absolute;inset-inline-start:1em;top:1em;font-size:1em;color:#fff;width:4em;height:4em;background-color:#fff;border-radius:50%;background-size:3em;background-repeat:no-repeat;background-position:center;&.angular{background-color:#fecdd7;background-image:url(./logo/angular.svg);background-size:2.6em}&.dotnet{background-image:url(./logo/dotnet.svg)}&.extjs{background-image:url(./logo/sencha.svg)}&.ionic{background-image:url(./logo/ionic.svg)}&.php{background-image:url(./logo/php.svg)}&.react{background-color:#ccf7ff;background-image:url(./logo/react.svg)}&.sharepoint{background-image:url(./logo/sharepoint.svg)}&.salesforce{display:none}&.vue{background-color:#d9f2e7;background-image:url(./logo/vue.svg);background-size:2.6em;background-position:50% 60%}&.webpack{background-image:url(./logo/webpack.svg)}}&:hover{translate:0 -2px;box-shadow:var(--b-elevation-2)}&.b-focused{outline:var(--b-widget-focus-outline-width) dashed var(--b-widget-focus-outline-color);outline-offset:5px}}.b-demo-unavailable{--b-panel-header-gap: .5em}.b-tooltip{ul{padding:0 1.5em;li{white-space:nowrap}}}@media (max-width : 800px){#container .b-toolbar .b-button{width:3.5em!important;label{display:none}}.group-header a{font-size:.6em}}@media (max-width : 570px){p{font-size:calc(.7em + 1vw);line-height:calc(1.1em + 1vw)}[data-ref=filterField],[data-ref=jumpTo],.group-path{display:none}}@media (max-width : 350px){#container .b-toolbar .b-button{display:none}}iframe[name=aweberFrame]{display:none}.demo-header{z-index:21;min-height:39px}