@knapsack/app/dist/client/page-with-sidebar-I1Ydw~493df0b3.css

Build Design Systems on top of knapsack, by Basalt

.ks-side-nav-item{background-color:var(--c-bg);border-left:0 solid transparent;border-right:var(--space-xxxs) solid transparent;height:var(--space-xl);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-side-nav-item--clickable{border-left-width:var(--space-xs)}.ks-side-nav-item--active,.ks-side-nav-item--clickable:focus,.ks-side-nav-item--clickable:hover{background-color:var(--c-active-highlight)}.ks-side-nav-item--active{border-left-color:var(--c-active)}.ks-side-nav-item--is-search-focus{border-left-color:var(--c-active-highlight)}.ks-side-nav-item--is-search-match{-webkit-box-shadow:inset 0 0 0 var(--space-xxxs) var(--c-focus);box-shadow:inset 0 0 0 var(--space-xxxs) var(--c-focus)}.ks-side-nav-item__folder-icon{padding-left:var(--space-xs);margin-bottom:var(--space-xxxs)}.ks-side-nav-item__folder-icon+.ks-side-nav-item__title-container{padding-left:var(--space-xxs)}.ks-side-nav-item__title-container{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:var(--space-xs);padding-right:var(--space-xs)}.ks-side-nav-item__title-container__title{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.ks-side-nav-item__title-container a,.ks-side-nav-item__title-container p{color:var(--c-text-default);line-height:var(--space-xl);display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ks-side-nav-item__title-container a:focus,.ks-side-nav-item__title-container a:hover{color:var(--c-text-default);text-decoration:none}.ks-side-nav-item__title-container--has-children{font-weight:700}.ks-side-nav-item .ks-popover__children{margin-left:var(--space-xs)}.ks-side-nav-item .ks-popover__children+.ks-popover__children{margin-left:var(--space-xxxs)}.ks-side-nav-item__collapse-btn{margin-right:var(--space-xs);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.ks-side-nav-item__collapse-btn button{color:var(--c-text-default)}.ks-side-nav-item__collapse-btn--collapsed{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ks-side-nav-item__drag-handle{color:var(--c-text-subdued);cursor:move;padding-bottom:var(--space-xxxs);display:none}.ks-side-nav-item--editing{border:var(--space-xxxs) solid transparent}.ks-side-nav-item--editing .ks-side-nav-item__drag-handle{display:inline-block;vertical-align:middle}.ks-side-nav-item--editing .ks-side-nav-item__folder-icon{padding-left:0}.ks-side-nav-item--editing .ks-side-nav-item__folder-icon+.ks-side-nav-item__title-container{padding-left:var(--space-xxxs)}.ks-side-nav-item--editing .ks-side-nav-item__title-container{padding-left:0}.ks-side-nav-item--editing .ks-side-nav-item__title-container p{line-height:calc(var(--space-xl) - var(--space-xxxs)*2);width:auto}.ks-side-nav-item--editing .ks-popover__children{margin-left:0}.ks-side-nav-item--editing .ks-popover__children+.ks-popover__children{margin-left:var(--space-xxxs)}.ks-side-nav-item--editing .ks-popover__children+:not(.ks-popover__children){margin-left:var(--space-xs)}.ks-side-nav-item--editing .ks-side-nav-item__actions{opacity:0;margin-left:var(--space-xxs);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-side-nav-item--editing:focus,.ks-side-nav-item--editing:hover{background-color:var(--c-button-standard)}.ks-side-nav-item--editing:focus .ks-side-nav-item__drag-handle,.ks-side-nav-item--editing:hover .ks-side-nav-item__drag-handle{color:var(--c-text-default)}.ks-side-nav-item--editing:focus .ks-side-nav-item__actions,.ks-side-nav-item--editing:hover .ks-side-nav-item__actions{opacity:1}.ks-side-nav-item--editing.ks-side-nav-item--dragging{background-color:var(--c-button-standard);border-color:var(--c-active);opacity:.8;-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow)}.ks-side-nav-item--editing.ks-side-nav-item--dragging .ks-side-nav-item__drag-handle{color:var(--c-text-default)}.ks-side-nav-item--editing.ks-side-nav-item--dragging .ks-side-nav-item__actions{display:none}.node-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.node-content__inner{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.node{min-width:100%;position:relative}.ks-secondary-nav{height:100%}.rst__virtualScrollOverride:after{content:" ";display:block;width:100%;height:calc(var(--space-xl)*2)}.ks-add-entity{position:relative}.ks-add-entity__popup{display:none}.ks-add-entity--active .ks-add-entity__popup{display:block;position:absolute;bottom:120%;width:400px;border-radius:var(--radius-l);-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);background-color:var(--c-bg);padding:var(--space-m);z-index:99}.ks-add-entity .ks-radio-group input{margin-right:var(--space-xs)}.ks-add-entity .ks-radio-group label{position:relative;display:inline}.ks-add-entity .ks-radio-group__subtitle{font-size:var(--font-size-s);line-height:var(--line-height-s);color:var(--c-text-subdued);display:block;margin:0 0 var(--space-xs) var(--space-l)}.ks-add-entity label{display:block;font-size:var(--font-base-size);font-weight:400;line-height:var(--space-l);cursor:pointer}.ks-add-entity__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.ks-add-entity__footer__title-field{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:var(--space-xs)}.ks-sidebar{height:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ks-sidebar__search-container{padding:var(--space-m);border-bottom:1px solid var(--c-frame)}.ks-sidebar__content{-webkit-box-flex:1;-ms-flex:1;flex:1}.ks-sidebar__enable-edit-btn{position:absolute;right:var(--space-m);bottom:var(--space-m);z-index:5;opacity:1;-webkit-animation:showEditBtn .3s ease .2s;animation:showEditBtn .3s ease .2s;-webkit-transition:opacity 0ms linear .2s;transition:opacity 0ms linear .2s;will-change:transform,opacity,z-index}.ks-sidebar__enable-edit-btn--hidden{-webkit-animation:hideEditBtn .55s ease .1s;animation:hideEditBtn .55s ease .1s;z-index:-1;opacity:0;-webkit-transition:opacity 0ms linear .65s,z-index 0ms step-end .65s;transition:opacity 0ms linear .65s,z-index 0ms step-end .65s}.ks-sidebar__edit-panel{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;height:0;-webkit-animation:hideEditPanel 315ms step-end;animation:hideEditPanel 315ms step-end;will-change:overflow,height}.ks-sidebar__edit-panel__content{background-color:var(--c-bg);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:var(--space-m);-webkit-box-shadow:0 -2px 4px rgba(0,0,0,.08);box-shadow:0 -2px 4px rgba(0,0,0,.08);-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .3s cubic-bezier(1,-.4,.5,1);transition:-webkit-transform .3s cubic-bezier(1,-.4,.5,1);transition:transform .3s cubic-bezier(1,-.4,.5,1);transition:transform .3s cubic-bezier(1,-.4,.5,1),-webkit-transform .3s cubic-bezier(1,-.4,.5,1);will-change:transform}.ks-sidebar__edit-panel--show{overflow:visible;height:auto;-webkit-animation:showEditPanel .43s step-start;animation:showEditPanel .43s step-start}.ks-sidebar__edit-panel--show .ks-sidebar__edit-panel__content{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform .4s cubic-bezier(.5,0,0,1) 15ms;transition:-webkit-transform .4s cubic-bezier(.5,0,0,1) 15ms;transition:transform .4s cubic-bezier(.5,0,0,1) 15ms;transition:transform .4s cubic-bezier(.5,0,0,1) 15ms,-webkit-transform .4s cubic-bezier(.5,0,0,1) 15ms}@-webkit-keyframes hideEditBtn{0%{-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}50%{-webkit-transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(1);transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(1)}to{-webkit-transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(0);transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(0)}}@keyframes hideEditBtn{0%{-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}50%{-webkit-transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(1);transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(1)}to{-webkit-transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(0);transform:translateX(calc((var(--sidebar-width) - var(--space-m)*2 - var(--space-xl))*-1)) rotate(-1turn) scale(0)}}@-webkit-keyframes showEditBtn{0%{-webkit-transform:rotate(-1turn) scale(0);transform:rotate(-1turn) scale(0)}to{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}}@keyframes showEditBtn{0%{-webkit-transform:rotate(-1turn) scale(0);transform:rotate(-1turn) scale(0)}to{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}}@-webkit-keyframes hideEditPanel{0%{height:auto;padding-top:1em}99%{height:auto;padding-top:1em}to{height:0;padding-top:0}}@keyframes hideEditPanel{0%{height:auto;padding-top:1em}99%{height:auto;padding-top:1em}to{height:0;padding-top:0}}@-webkit-keyframes showEditPanel{0%{overflow:hidden;padding-top:1em}99%{overflow:hidden;padding-top:1em}to{overflow:visible;padding-top:0}}@keyframes showEditPanel{0%{overflow:hidden;padding-top:1em}99%{overflow:hidden;padding-top:1em}to{overflow:visible;padding-top:0}}.ks-site-header{background-color:var(--c-bg-site-header);border-bottom:1px solid var(--c-frame);min-height:calc(var(--space-xl)*2);padding:var(--space-m) 0;position:relative;z-index:2}@media screen and (min-width:700px){.ks-site-header{padding:0;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}}.ks-site-header h3{font-weight:400;font-size:var(--font-size-l);margin:0 0 0 var(--space-m);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-site-header__logo{height:var(--space-xl);margin-right:var(--space-xs);width:auto}.ks-site-header .ks-site-header__header-link{color:var(--c-text-default);text-decoration:none}.ks-site-header__knapsack-logo{padding-top:1px}.ks-site-header__knapsack-logo img{margin-top:-7px}.ks-site-header__nav{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 var(--space-m);padding:var(--space-xxs) 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ks-site-header__nav-item{position:relative;margin:0}.ks-site-header__nav-item:not(:last-child){padding-right:var(--space-xl)}.ks-site-header__nav-link{display:inline-block;border-bottom:var(--space-xxxs) solid transparent;border-top:var(--space-xxxs) solid transparent}.ks-site-header__nav-link[aria-current=page]{border-bottom-color:var(--c-text-default)}.ks-site-header .ks-site-header__nav-link{color:var(--c-text-default);text-decoration:none}.ks-site-header__hamburger,.ks-site-header__hamburger-close{color:var(--c-text-default);float:right;font-size:1.5rem;cursor:pointer}.ks-site-header__nav-icon button,.ks-site-header__nav-icon button:focus,.ks-site-header__nav-icon button:hover{color:var(--c-text-default)}.ks-site-header__settings-menu{list-style:none;padding:0}.ks-site-header__settings-menu li{padding:0;margin:0;white-space:nowrap}.ks-site-header__settings-menu li+li{margin-top:var(--space-xs)}.ks-site-header__settings-menu li a{white-space:nowrap}.ks-template-language-select{width:calc(var(--space-xxxl)*2);max-width:100%}.ks-page-with-sidebar{display:grid;grid-template-rows:calc(var(--space-xl)*2) 1fr;grid-template-columns:auto 1fr auto;grid-template-areas:"header header header" "sidebar main details";height:100vh;overflow:hidden}.ks-page-with-sidebar .ks-site-header{grid-area:header}.ks-page-with-sidebar__page{position:relative;grid-area:main;height:100%;overflow:auto;scroll-behavior:smooth}.ks-page-with-sidebar__page:after{content:" ";display:block;width:100%;height:var(--space-xl)}.ks-page-with-sidebar__details{grid-area:details;width:calc(328px + var(--space-m)*2);height:calc(100vh - var(--space-xl)*2);border-left:1px solid var(--c-frame);position:relative;z-index:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width .25s step-start,-webkit-transform .25s ease;transition:width .25s step-start,-webkit-transform .25s ease;transition:transform .25s ease,width .25s step-start;transition:transform .25s ease,width .25s step-start,-webkit-transform .25s ease}.ks-page-with-sidebar--details-collapsed .ks-page-with-sidebar__details{-webkit-transform:translateX(100%);transform:translateX(100%)}.ks-page-with-sidebar--details-collapsed .ks-page-with-sidebar__details,.ks-page-with-sidebar--sidebar-collapsed .ks-page-with-sidebar__sidebar{width:0;-webkit-transition:width .25s step-end,-webkit-transform .25s ease;transition:width .25s step-end,-webkit-transform .25s ease;transition:transform .25s ease,width .25s step-end;transition:transform .25s ease,width .25s step-end,-webkit-transform .25s ease}.ks-page-with-sidebar--sidebar-collapsed .ks-page-with-sidebar__sidebar{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.ks-page-with-sidebar__sidebar{grid-area:sidebar;width:var(--sidebar-width);display:-webkit-box;display:-ms-flexbox;display:flex;height:calc(100vh - var(--space-xl)*2);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-right:1px solid var(--c-frame);position:relative;z-index:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width .25s step-start,-webkit-transform .25s ease;transition:width .25s step-start,-webkit-transform .25s ease;transition:transform .25s ease,width .25s step-start;transition:transform .25s ease,width .25s step-start,-webkit-transform .25s ease}.ks-page-with-sidebar__sidebar h4:not(:first-child){white-space:nowrap;margin:1.25rem 0 0}.ks-page-with-sidebar__sidebar ul{list-style:none;padding-left:0;margin:0}.ks-page-with-sidebar__sidebar .field-array .form-group{margin-left:0}.ks-page-with-sidebar__sidebar>*{opacity:1}.ks-page-with-sidebar__sidebar--collapsed>*{opacity:0}.ks-page-with-sidebar__sidebar__collapse-ctrl{position:absolute;left:100%;top:var(--space-m);opacity:1}.ks-page-with-sidebar__sidebar__collapse-ctrl button{width:calc(var(--space-l) + 2px);height:var(--space-xl);border-radius:0 var(--space-xxs) var(--space-xxs) 0}.ks-page-with-sidebar__sidebar__collapse-ctrl svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .25s ease;transition:-webkit-transform .25s ease;transition:transform .25s ease;transition:transform .25s ease,-webkit-transform .25s ease;vertical-align:top}.ks-page-with-sidebar__sidebar__collapse-ctrl--collapsed svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}