:root{--border-color: var(--b-border-7);--thumb-min-width: 204px;--body-background: var(--b-neutral-100)}.b-theme-visby-dark,.b-theme-stockholm-dark,.b-theme-svalbard-dark,.b-theme-material3-dark{color-scheme:dark}.b-theme-material3-light,.b-theme-material3-dark{.framework-tab{border-radius:var(--b-widget-border-radius)}}#outer{display:flex;overflow:hidden!important;flex:1}#sidebar{border-inline-end:1px solid var(--border-color);width:18em}#versionId{font-size:.7em;margin-inline-start:1.5em}[data-ref=themeCombo]{margin-top:1.5em}.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;color:var(--b-text-1);--b-badge-height: 2.2em;--b-badge-background: var(--b-primary-95);--b-badge-color: var(--b-primary-30);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{transition:all .2s;inset-inline-end:.5em;inset-block-start:unset}&:hover,&.b-pressed{--b-badge-background: transparent;--b-badge-color: var(--b-text-1)}}.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 0;color:var(--b-neutral-20);border-bottom:1px solid var(--border-color);display:flex;align-items:center;box-shadow:.5em 0 0 0 var(--body-background),-.5em 0 0 0 var(--body-background);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.5em;font-weight:500}}.example{cursor:pointer;position:relative;scroll-margin-top:6em;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.8em;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;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)}.thin{background:var(--b-primary-90)}.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);background-color:var(--b-neutral-95)}&.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 : 600px){#outer{flex-direction:column}#sidebar{width:100%;.b-panel-content{flex-direction:row}}[data-ref=framework]{flex-direction:row;width:auto}.b-button.framework-tab{width:auto;label{display:none}}.b-button.framework-tab:after{content:none}[data-ref=themeCombo]{margin-top:0;width:14em;margin-inline-start:auto}[data-ref=thumbSize],[data-ref=primaryColor],[data-ref=newDemos],[data-ref=filterField],[data-ref=jumpTo],.group-path{display:none}#scroller .group-header{font-size:1em}}@media (max-width : 500px){#sidebar{font-size:.9em}}@media (max-width : 450px){#sidebar{font-size:.8em}}iframe[name=aweberFrame]{display:none}.demo-header{z-index:21;min-height:39px}