@knapsack/app/dist/client/custom-page-KXWAf~pattern-view-page-WE7TE~21833f8f.css

Build Design Systems on top of knapsack, by Basalt

.ks-inline-edit__controls{line-height:1rem;vertical-align:middle;padding-left:var(--space-xs);display:none}.ks-inline-edit--visible .ks-inline-edit__text{vertical-align:middle}.ks-inline-edit--visible .ks-inline-edit__controls{display:inline-block}.ks-inline-edit--editing .ks-inline-edit__text{border-bottom:solid var(--space-xxxs) var(--c-active);outline:none}.ks-inline-edit--editing .ks-inline-edit__controls{display:inline-block}.ks-inline-edit--editing .ks-inline-edit__controls button+button{margin-left:var(--space-xxs)}.ks-inline-edit--no-wrap{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.ks-inline-edit--no-wrap .ks-inline-edit__text{-ms-flex-negative:1;flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ks-inline-edit--no-wrap .ks-inline-edit__controls{min-width:var(--space-l);white-space:nowrap}.ks-md-block{margin-bottom:var(--space-m)}.ks-md-block__documentation-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ks-template-view__overview-wrapper{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.ks-template-view__code-block-wrapper{margin-bottom:var(--space-l)}.ks-edit-template-demo__title{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ks-edit-template-demo__logo,.ks-edit-template-demo__title,.ks-edit-template-demo__title>div,.ks-edit-template-demo__title>h5{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-edit-template-demo__logo{margin-right:var(--space-xxs);width:var(--space-l);height:var(--space-l)}.ks-edit-template-demo__form{margin-top:var(--space-m)}.ks-edit-template-demo__delete{margin-left:var(--space-m)}.pattern-view-demo-grid-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.7rem;margin-left:auto}.pattern-view-demo-grid-controls>*{margin:0 .25rem}.ks-template{width:100%;position:relative}.ks-template__spinner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.ks-template__iframe{width:1px;min-width:100%;overflow:auto;vertical-align:middle;border:none}.ks-template__iframe-wrapper,.ks-template__resizable{width:100%;max-width:100%;position:relative}.ks-template__resizable{border:1px solid var(--c-frame);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;resize:horizontal;overflow:hidden}.ks-template__resizable__size-reading{font-size:var(--font-size-s);color:var(--c-text-subdued);position:absolute;bottom:0;right:var(--space-m)}.ks-rjsf__function-field .react-view-columns{display:block;margin:0}.ks-rjsf__function-field .react-view-columns>div{padding:0!important}.ks-rjsf__function-field .react-view-columns>div>[data-testid]{margin:0!important;font-family:inherit!important;font-size:inherit!important}.ks-rjsf__function-field .react-view-columns>div>[data-testid]>label{display:none}.react-tiny-popover-container{z-index:1}.ks-slots-form__slot+.ks-slots-form__slot{padding-top:var(--space-m);margin-top:var(--space-m);border-top:1px solid var(--c-frame)}.ks-slots-form__slot__slot-name{margin-bottom:var(--space-xs)}.ks-slots-form__slot-item{padding:var(--space-xxs);position:relative}.ks-slots-form__slot-item:hover{background-color:var(--c-shade)}.ks-slots-form__slot-item+.ks-slots-form__slot-item{margin-top:var(--space-xs)}.ks-slots-form__slot-item .ks-select{vertical-align:bottom}.ks-slots-form__slot-item .ks-select select{background-color:var(--c-bg)}.ks-slots-form__slot-controls{position:absolute;top:var(--space-xxs);right:var(--space-xxs)}.ks-slots-form__add-buttons{margin-top:var(--space-m)}.ks-slots-form__pattern-link{display:inline-block;vertical-align:bottom;line-height:var(--space-xl);padding-left:var(--space-xs)}.ks-slots-form__pattern-link svg{vertical-align:bottom;height:var(--space-xl)}.ks-demo-stage{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex}.ks-demo-stage--full{display:block}.ks-demo-stage--full .ks-demo-stage__stage{border-right-width:1px;border-top-right-radius:1px;border-bottom-left-radius:0}.ks-demo-stage--full .ks-demo-stage__form{border-top-width:0;border-top-right-radius:0;border-bottom-left-radius:var(--space-xs)}.ks-demo-stage--has-demos .ks-demo-stage__stage{border-top-left-radius:0;border-top-right-radius:0}.ks-demo-stage--has-demos .ks-demo-stage__form{border-top-right-radius:0}.ks-demo-stage__stage{background-color:var(--c-shade);border:1px solid var(--c-frame);border-right-width:0;border-top-left-radius:var(--space-xs);border-bottom-left-radius:var(--space-xs);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--space-xs);width:100%;position:relative}.ks-demo-stage__stage__open-btn{position:absolute;top:var(--space-xxs);right:var(--space-xxs);z-index:50}.ks-demo-stage__form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;overflow:initial;overflow-y:visible;border:1px solid var(--c-frame);border-top-right-radius:var(--space-xs);border-bottom-right-radius:var(--space-xs);position:relative;padding:var(--space-xs) var(--space-s);width:100%}@media (max-width:calc(var(--bp-large) - 1px)){.ks-demo-stage__form{width:100%!important}}.ks-demo-stage__form__inner{top:0;right:0;bottom:0;left:0;width:100%;max-width:800px}.ks-demo-stage__form__inner fieldset>legend,.ks-demo-stage__form__inner fieldset>legend+p,.ks-demo-stage__form__inner form>div>label{display:none}.ks-demo-stage__form__header{margin-bottom:var(--space-m)}.ks-demo-stage__form__header__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-bottom:var(--space-xxs)}.ks-demo-stage__form__header__title h3{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0}@media (max-width:calc(var(--bp-large) - 1px)){.ks-demo-stage{display:block!important}.ks-demo-stage__form,.ks-demo-stage__stage{width:100%!important}}.ks-template-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:var(--space-xxs)}.ks-template-header__title{margin-bottom:0;margin-right:var(--space-s)}.ks-template-header__status-select{width:calc(var(--space-xxxl)*2);max-width:100%}.ks-template-header__controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.7rem;margin-left:auto}.ks-template-header__controls>*{margin:0 .25rem}.ks-template-header__controls .ks-btn{margin-left:0}.ks-template-demos{background-color:var(--c-shade);border:solid var(--c-frame);border-width:1px 1px 0;border-radius:var(--space-xs) var(--space-xs) 0 0;padding:var(--space-m) 0 var(--space-m) var(--space-m);white-space:nowrap;overflow-x:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.ks-template-demos__add-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top}.ks-template-demos__add-btn button{height:auto}.ks-template-demos__add-btn button svg{height:auto;display:block;margin:0 auto}.ks-template-demos:after{content:" ";display:inline-block;vertical-align:top;width:var(--space-m);height:100%}.ks-template-demos__items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.ks-template-demos__item{text-align:center;margin:0 0 var(--space-m);display:inline-block;vertical-align:top;position:relative}.ks-template-demos__item__actions{position:absolute;top:calc(var(--space-xs)*-1);right:calc(var(--space-xxs)*-1);z-index:50;opacity:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.ks-template-demos__item__actions button{margin-left:var(--space-xs)}.ks-template-demos__item__thumbnail-wrap{border:1px solid transparent}.ks-template-demos__item figcaption{font-size:var(--font-size-s);color:var(--c-text-subdued);margin-top:var(--space-xxxs)}.ks-template-demos__item:focus .ks-template-demos__item__actions,.ks-template-demos__item:hover .ks-template-demos__item__actions{opacity:1}.ks-template-demos__item:focus .ks-template-demos__item__thumbnail-wrap,.ks-template-demos__item:hover .ks-template-demos__item__thumbnail-wrap{border-color:var(--c-frame)}.ks-template-demos__item--active .ks-template-demos__item__thumbnail-wrap,.ks-template-demos__item--active:focus .ks-template-demos__item__thumbnail-wrap,.ks-template-demos__item--active:hover .ks-template-demos__item__thumbnail-wrap{border-color:var(--c-active)}.ks-template-demos__item--active:focus figcaption,.ks-template-demos__item--active:hover figcaption,.ks-template-demos__item--active figcaption{color:var(--c-active)}.ks-template-demos__item+.ks-template-demos__item{margin-left:var(--space-xs)}.ks-template-demos__item--btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ks-template-demos__item--btns .ks-btn{margin-bottom:var(--space-xs)}.ks-template-thumbnail{background-color:var(--c-bg);position:relative;overflow:hidden}.ks-template-thumbnail__overlay{position:absolute;top:0;bottom:0;left:0;right:0;z-index:5;cursor:pointer}.ks-template-thumbnail__template{position:absolute;top:50%;left:50%}.ks-template-thumbnail--empty{color:var(--c-text-subdued);font-size:var(--font-size-s);text-align:center;padding:var(--space-s)}.ks-page-header{padding:var(--space-xl) var(--space-xl) var(--space-l);border-bottom:1px solid var(--c-frame)}.ks-page-header--flush{padding:0;border-bottom:none}.ks-page-header--constrained .ks-page-header__content-wrap{max-width:var(--content-page-width);margin:0 auto}.ks-page-header__section{color:var(--c-text-subdued);margin-bottom:var(--space-xs)}.ks-page-header__title{margin-top:0}.ks-page-header__description{margin-top:var(--space-xs);max-width:var(--content-page-width)}