ywana-core8 0.0.8 → 0.0.12

package/dist/index.css

@@ -1,2 +1,1807 @@
-.btn{align-items:center;border-width:0;display:flex;min-height:2.5rem;outline:none;overflow:hidden;padding:.2rem .5rem;position:relative;transition:background-color .3s}.btn,.btn.outlined{color:var(--primary-color)}.btn.outlined{border:1px solid var(--primary-color)}.btn.outlined.disabled{border:1px solid hsla(0,0%,78%,.3)!important;color:hsla(0,0%,39%,.5)!important;cursor:not-allowed}.btn.raised{background-color:var(--primary-color);color:var(--primary-color-text)}.btn.raised.disabled{background-color:hsla(0,0%,78%,.3)!important;color:hsla(0,0%,39%,.5)!important;cursor:not-allowed}.btn:focus,.btn:hover{background-color:hsla(0,0%,67%,.3);cursor:pointer}.btn.raised:focus,.btn.raised:hover{background-color:var(--primary-color-dark);cursor:pointer}.btn>*{position:relative}.btn span{display:block;flex:1}.btn:before{background-color:rgba(236,240,241,.3);border-radius:100%;content:"";display:block;left:50%;padding-top:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:0}.btn:active:before{padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out;width:120%}.icon{align-items:center;display:flex!important;justify-content:center;position:relative}.icon:before{background-color:rgba(236,240,241,.548);border-radius:100%;content:"";display:block;left:50%;padding-top:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:0}.icon:active:before{padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out;width:120%}.icon.clickable:hover{background-color:hsla(0,0%,39%,.1);border-radius:100%;cursor:pointer}.icon.small{font-size:1.2rem;height:2rem;width:2rem}.icon.normal{font-size:1.7rem;height:3rem;width:3rem}.icon.large{font-size:2rem;height:4rem;width:4rem}.checkbox{flex:1;overflow:hidden;position:relative}.checkbox,.checkbox .checkmark{align-items:center;display:flex}.checkbox .checkmark{background-color:var(--paper-color);border:1px solid var(--primary-color);height:1.4rem;justify-content:center;margin:.3rem;padding-bottom:.1rem;width:1.5rem}.checkbox .checkmark:after{border:solid var(--primary-color);border-width:0 3px 3px 0;content:"";display:none;height:.8rem;transform:rotate(45deg);width:.3rem;z-index:0}.checkbox>input{flex:1;height:2rem;opacity:0;position:absolute;width:2rem;z-index:1}.checkbox>label{color:var(--text-color-light);font-size:1rem;font-weight:400}.chips{display:flex;flex:1;max-height:2rem;overflow:auto}.chip{align-items:center;background-color:#e8e8e8;border-radius:2rem;color:var(--text-color-light);cursor:pointer;display:flex;font-size:.9rem;margin:.2rem}.chip:hover{background-color:hsla(0,0%,78%,.5)}.chip.selected{background-color:var(--primary-color-lighter)}.chip.outlined{background-color:transparent;border:1px solid var(--divider-color)}.chip.outlined:hover{background-color:hsla(0,0%,78%,.5)}.chip.outlined.selected{background-color:var(--primary-color-lighter);border:1px solid var(--primary-color-light)}.chip>.icon{border-radius:2rem;height:1.5rem;margin:.2rem;width:1.5rem}.chip>main{align-items:center;display:flex;flex:1;padding:.3rem;white-space:nowrap}.chip>.meta>.icon{background-color:hsla(0,0%,78%,.8);border-radius:2rem;font-size:.8rem;height:1.2rem;margin:.2rem;width:1.2rem}.form-header{padding:0 1rem}.form-grid{grid-gap:0;display:grid;grid-auto-rows:4.2rem}.field-wrapper{display:flex}.field-wrapper>*{flex:1}.header{align-items:center;background-repeat:no-repeat;background-size:cover;display:flex;min-height:3rem;padding:0}.header>.icon .header>img{margin-right:1.6rem}.header>label{margin-left:1rem}.header.caption{border-bottom:1px solid var(--divider-color);height:4rem}.header.dense{height:2.4rem;padding:0}.header.prominent{align-items:flex-start;height:12.8rem}.header.prominent>label{align-self:flex-end}.header-icon{justify-content:center;max-height:4rem;max-width:4rem;-o-object-fit:contain;object-fit:contain;padding:.5rem}.header-icon,.header>.actions{align-items:center;display:flex}.header>.actions{flex:1;flex-direction:row-reverse;overflow:vivsible;position:relative}.header.primary{background-color:var(--primary-color-dark);color:var(--primary-color-text)}.header.secondary{background-color:var(--secondary-color-dark);color:var(--secondary-color-text)}.list{display:flex;flex:1;flex-direction:column;overflow:hidden}.list>header{color:var(--text-color-light);font-size:.8rem;padding:.5rem 0 0 1.5rem;text-transform:capitalize}.list>ul{cursor:pointer;display:flex;flex:1;flex-direction:column;list-style:none;margin:0;overflow:auto;padding:.5rem 0}.list>ul li{align-items:center;display:flex;flex:1;min-height:3rem;overflow:hidden;padding:.3rem .5rem}.list>ul li:hover{background-color:var(--primary-color-lighter)}.list>ul li>.icon{color:var(--text-color-lighter)}.list>ul li>main{display:flex;flex:1;flex-direction:column;overflow:hidden}.list>ul li>main>*{align-items:flex-end;display:flex;flex:1;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:nowrap}.list>ul li>main>.primary-line{color:var(--text-color);font-size:1rem}.list>ul li>main>.secondary-line{color:var(--text-color-lighter);font-size:.9rem}.menu-icon{position:relative;width:3rem}.menu-icon>.overlay{background-color:transparent;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:5}.menu-icon>menu{background-color:var(--paper-color);border:1px solid var(--divider-color);box-shadow:var(--shadow1);left:0;margin:0;max-height:50vh;max-width:14rem;min-width:7rem;overflow:auto;padding:0;position:absolute;top:3rem;z-index:6}.menu-icon>menu.alignRight{left:unset;right:0}.menu-icon>menu ul{cursor:pointer;list-style:none;margin:0;padding:.5rem 0}.menu-icon>menu li{align-items:center;display:flex;min-height:3rem;padding:0 .5rem}.menu-icon>menu li:hover{background-color:var(--primary-color-lighter)}.menu-item{align-items:center;display:flex;flex:1}.menu-item>.icon{color:var(--text-color-light)}.menu-item>label{color:var(--text-color);flex:1;font-size:.9rem;padding:0 .5rem 0 0;white-space:nowrap}.menu-item>.meta{color:var(--text-color-lighter)}@-webkit-keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.circular-progress{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.property{display:flex;flex:1}.property-name,.property-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radio{flex:1;overflow:hidden;position:relative}.radio,.radio .checkmark{align-items:center;display:flex}.radio .checkmark{background-color:var(--paper-color);border:1px solid var(--primary-color);border-radius:3rem;height:1.5rem;justify-content:center;margin:.3rem;width:1.5rem}.radio .checkmark:after{background-color:var(--primary-color);border:5px solid var(--primary-color);border-radius:5rem;content:"";display:none;height:.4rem;width:.4rem;z-index:0}.radio>input{flex:1;height:2rem;opacity:0;position:absolute;width:2rem;z-index:1}input:checked~.checkmark:after{display:block}.radio>label{color:var(--text-color-light);font-size:1rem;font-weight:400}.section2>header{background-color:hsla(0,0%,78%,.1);font-weight:500;min-height:3rem;padding:0 1rem}.tabs{align-items:flex-end;display:flex;flex:1;max-height:3rem;overflow-x:auto}.tab,.tab-filler{align-items:center;background-color:transparent!important;border-bottom:1px solid var(--divider-color);color:var(--text-color-light);cursor:pointer;display:flex;font-size:.9rem;height:2rem;justify-content:center;min-width:5rem;overflow:hidden;padding:0 1rem;text-transform:uppercase}.tab-filler{flex:1}.tab:hover{background-color:var(--background-color);cursor:pointer}.tab.selected{background-color:var(--paper-color)!important;border:solid var(--divider-color);border-radius:0;border-width:1px 1px 0;color:var(--text-color);min-height:2.2rem}.tab.small{padding:.2rem}.textfield-outlined{border-radius:5px;display:flex;flex:1;max-height:3.5rem;min-height:3.5rem;padding-top:1.5rem;position:relative}.textfield-outlined.no-label{margin-bottom:.5rem;padding-top:.5rem}.textfield-outlined>input{border:none;border:1px solid var(--divider-color);display:block;flex:1;overflow:hidden;padding:10px 10px 10px .5rem}.textfield-outlined>input:focus{outline:none}.textfield-outlined>label{color:var(--primary-color);font-size:1rem;font-weight:400;left:.4rem;pointer-events:none;position:absolute;top:2rem;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}.textfield-outlined>input:focus~label,.textfield-outlined>input:valid~label{color:var(--primary-color);font-size:.9rem;top:.3rem}.textfield-outlined>.bar{display:none}.textfield{display:flex;flex:1;max-height:3.5rem;min-height:3.5;overflow:hidden;padding-top:1.5rem;position:relative}.textfield.no-label{padding-bottom:.5rem;padding-top:.5rem}.textfield>input{border:none;border-bottom:1px solid var(--divider-color);display:block;flex:1;font-size:1rem;overflow:hidden;padding:10px 10px 10px .5rem}.textfield>input:focus{outline:none}.textfield>label{color:var(--primary-color);font-size:.9rem;font-weight:400;left:.4rem;pointer-events:none;position:absolute;top:2rem;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease}input:-moz-read-only{background-color:hsla(0,0%,78%,.1);border:0!important}input:read-only{background-color:hsla(0,0%,78%,.1);border:0!important}input:-moz-read-only~label{color:var(--primary-color);font-size:.8rem;top:.3rem}.textfield>input:focus~label,.textfield>input:valid~label,input:read-only~label{color:var(--primary-color);font-size:.8rem;top:.3rem}.textfield>.bar{display:block;position:relative}.textfield>.bar:after,.textfield>.bar:before{background:#5264ae;bottom:1px;content:"";height:2px;position:absolute;transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;width:0}.textfield>.bar:before{left:50%}.textfield>.bar:after{right:50%}.textfield>input:focus~.bar:after,.textfield>input:focus~.bar:before{width:50%}.dropdown{position:relative}.dropdown>.icon{position:absolute;right:.2rem;top:1.7rem}.dropdown>menu{background-color:var(--paper-color);border:1px solid var(--divider-color);left:0;margin:0;max-height:20rem;overflow:auto;padding:0;position:absolute;right:0;top:3.8rem;z-index:2}.dropdown>menu ul{cursor:pointer;list-style:none;margin:0;padding:.5rem 0}.dropdown>menu li{align-items:center;display:flex;font-size:.9rem;min-height:2rem;padding:0 .5rem}.dropdown>menu li:hover{background-color:var(--primary-color-lighter)}.datatable8{background-color:var(--paper-color);border:0 solid var(--divider-color);max-height:40rem;overflow:hidden}.datatable8.outlined{border:1px solid var(--divider-color)}.datatable8 table{width:100%}.datatable8 thead{background-color:hsla(0,0%,78%,.4);color:var(--text-color-lighter);overflow:hidden;position:-webkit-sticky;position:sticky;top:0}.datatable8 thead tr{border-bottom:1px solid var(--divider-color)}.datatable8 thead th{font-weight:600!important;padding:0 1rem;text-align:left}.datatable8 tbody{height:5rem;overflow:visible}.datatable8 tbody tr{border-bottom:1px solid var(--divider-color)}.datatable8 tbody tr:hover{background-color:hsla(0,0%,78%,.2);cursor:pointer}.datatable8 tbody td{color:var(--text-color-light);height:3rem;max-width:10rem;overflow:visible;padding:0 1rem;text-overflow:ellipsis;white-space:nowrap}.tokenField{align-items:center;border:1px solid var(--divider-color);border-radius:.3rem;display:flex;flex-wrap:wrap;margin:1rem 0;padding:1rem;position:relative}.tokenField>label{background-color:var(--paper-color);color:var(--text-color-light);font-size:.8rem;padding:2px 6px 2px 4px;position:absolute;top:-9px}.tokenField input{border:0;flex:1;font-size:1rem;min-width:3rem;padding:.5rem 0}.token{align-items:center;background-color:hsla(0,0%,78%,.1);border:1px solid var(--divider-color);border-radius:.3rem!important;display:flex;margin:.2rem;max-height:2rem;padding:.2rem .2rem .2rem .4rem}.token>div{white-space:nowrap}.token button{font-size:.8rem!important;height:1.6rem;margin-left:.2rem;padding:0!important;width:2rem}.tree{padding:.5rem 0}.tree-node{margin:0;padding:0 0 0 1rem}.tree-item{align-items:center;color:rgba(0,0,0,.7);display:flex;font:1rem;margin:0;padding:.5rem 0}.tree-item:hover{background-color:hsla(0,0%,78%,.7);cursor:pointer;font-weight:500}.tree-item.final{margin-left:1rem;padding-left:1rem}.tree-item>i{padding-left:.3rem}.tree-item>.label{padding-left:.8rem;width:100%}.tree-item>.actions{color:var(--text-color-lighter);padding:0 .5rem}.tree-item>.actions .rmwc-icon{font-size:1rem;height:2rem;padding:0;width:2rem}.tree-node>summary:before{color:#000;color:rgba(0,0,0,.3);content:"\25B6";display:inline-block;font-size:10px;margin-right:6px}details[open].tree-node>summary:before{transform:rotate(90deg)}.login-box{background-color:var(--paper-color);display:grid;grid-template-areas:"header header" "main main" "footer footer"}.login-box>header{align-items:center;display:flex;flex:1;flex-direction:column;grid-area:header;justify-content:space-around;padding:1rem}.login-box>header>img{max-width:90%}.login-box>header>.title{font-size:2rem;font-weight:600}.login-box>main{display:flex;flex-direction:column;grid-area:main;padding:1rem 1rem 0}.login-box .message{color:var(--danger-color-light);font-weight:500;padding-top:1rem}.load-box,.login-box .message{align-items:center;display:flex;justify-content:center}.load-box{background-color:var(--primary-color);color:var(--primary-color-text)}.load-box .icon{-webkit-animation:rotation 2s linear infinite;animation:rotation 2s linear infinite}@-webkit-keyframes rotation-counterclock{0%{transform:rotate(359deg)}to{transform:rotate(0deg)}}@keyframes rotation-counterclock{0%{transform:rotate(359deg)}to{transform:rotate(0deg)}}@-webkit-keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.login-box>footer{display:flex;flex-direction:column;grid-area:footer;padding:1rem}.reset-password-box{-webkit-animation:fadeIn 2s;animation:fadeIn 2s;background-color:var(--paper-color);display:grid;grid-template-areas:"header header" "main main" "footer footer";padding:.5rem}.reset-password-box>header{align-items:center;display:flex;flex:1;flex-direction:column;grid-area:header;justify-content:space-around}.reset-password-box>main{display:flex;flex-direction:column;grid-area:main}.reset-password-box>main>label{margin:1rem 0 0}.reset-password-box .error{color:red;font-weight:600;padding:1rem;text-align:center}.reset-password-box>footer{display:flex;grid-area:footer;justify-content:space-between;margin-top:.5rem}.reset-password-box>footer>button{max-height:3rem;min-width:6rem}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.viewer{background-color:rgba(0,0,0,.75);color:#fff;display:grid;grid-template-areas:"header aside" "main aside";grid-template-columns:1fr auto;grid-template-rows:4rem 1fr;height:100vh;width:100vw}.viewer>header{background-repeat-x:initial;background-repeat-y:initial;background:linear-gradient(180deg,rgba(0,0,0,.65) 0,transparent);background-attachment:scroll;background-clip:initial;background-color:initial;background-image:linear-gradient(rgba(0,0,0,.65),transparent);background-origin:initial;background-position-x:left;background-position-y:top;background-size:initial;grid-area:header}.viewer>main{flex-direction:column;grid-area:main;overflow:auto}.viewer>main,.viewer>main>.resizer{align-items:center;display:flex;justify-content:center}.viewer>main>.resizer{overflow:hidden;padding:1rem;position:relative;width:100%}.viewer>main>.resizer img{-o-object-fit:fill;object-fit:fill;width:100%}@media (min-width:800px){.viewer>main>.resizer{padding:0;width:800px}}.viewer>aside{background-color:#323232;display:none;grid-area:aside;min-width:22rem}.viewer>aside.open{display:flex;flex-direction:column;grid-area:aside}.viewer>aside .property>label{color:#aaa}.viewer>footer{align-items:center;background-color:rgba(0,0,0,.75);border-radius:3px;bottom:1rem;display:flex;justify-content:space-between;left:calc(50vw - 4rem);padding:.5rem;position:absolute;width:15rem;z-index:100}.kanban{background-color:var(--background-color);border-bottom:1px solid var(--divider-color);border-left:1px solid var(--divider-color);border-top:1px solid var(--divider-color);display:flex;max-height:90vh;min-height:30rem;overflow-x:auto}.kanban-column{border-right:1px solid var(--divider-color);display:flex;flex:1;flex-direction:column;min-width:20rem}.kanban-column.disabled{opacity:.7;pointer-events:none}.kanban-column.dragOver{background-color:hsla(0,0%,39%,.1)}.kanban-column.min{flex:0;min-width:4rem}.kanban-column>header{align-items:flex-start;border-bottom:1px solid var(--divider-color);display:flex;height:5rem;padding:1rem}.kanban-column>header>.title{display:flex;flex:1;flex-direction:column;padding:0 1rem}.kanban-column>footer>button,.kanban-column>header>i{color:hsla(0,0%,39%,.6)}.kanban-column>main{flex:1;overflow:auto}.kanban-column.min>main{color:var(--primary-color-light);min-height:10rem;padding:1rem;-ms-writing-mode:tb-rl;writing-mode:vertical-rl}.kanban-card{background-color:var(--paper-color);border-radius:5px;box-shadow:var(--shadow1);margin:2rem;min-height:10rem}.kanban-card.red{border-left:5px solid red}.secondary-text{color:hsla(0,0%,39%,.8)}.page6{color:var(--text-color);height:100%}.page6>menu{background-color:var(--page-menu-bgcolor);border-right:1px solid var(--divider-color);color:var(--page-menu-color);grid-area:menu;margin:0;padding:0;width:var(--page-menu-width)}.page6>header{background-color:var(--page-header-bgcolor);border-bottom:1px solid var(--divider-color);color:var(--page-header-color);grid-area:header;height:var(--page-header-height)}.page6>nav{grid-area:nav;height:var(--page-nav-height)}.page6>main{grid-area:main;overflow:hidden}.page6>aside{background-color:var(--page-aside-bgcolor);color:var(--page-aside-color);grid-area:aside;width:var(--page-aside-width)}.page6>footer{grid-area:footer;min-height:var(--page-footer-height)}:root{--timeout:800ms}.workspace{display:grid;grid-template-areas:"header header header" "menu   nav    nav" "menu   main   aside" "menu   detail aside" "footer footer footer";grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr auto auto}.workspace>nav{min-height:3rem}.overall{bottom:0;left:0;position:absolute;right:0;top:0}.overall,.site6{background-color:var(--background-color)}.site6{display:grid;grid-template-areas:"header nav nav" "menu main aside" "footer footer footer";grid-template-columns:auto 1fr auto;grid-template-rows:var(--site-header-height) 1fr auto;height:100vh;width:100vw}.site6>header{background-color:var(--site-header-bgcolor);color:var(--site-header-color);grid-area:header;width:var(--site-menu-width)}.site6>header,.site6>nav{align-items:center;display:flex}.site6>nav{background-color:var(--site-nav-bgcolor);color:var(--site-nav-color);grid-area:nav;justify-content:flex-end;padding-right:1rem}.site6>nav>header{flex:1}.site6>menu{background-color:var(--site-menu-bgcolor);border-right:1px solid var(--divider-color);color:var(--site-menu-color);display:flex;flex-direction:column;grid-area:menu;margin:0;overflow:hidden;padding:.2rem;width:var(--site-menu-width)}.site6>menu>main{align-items:center;display:flex;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto}.site6>main{grid-area:main;overflow:hidden}.site6>aside{background-color:var(--site-aside-bgcolor);color:var(--site-aside-color);grid-area:aside}.site6>footer{background-color:#dedede;color:#fff;grid-area:footer;min-height:20rem}.site6>.site-preview{align-items:center;background-color:rgba(0,0,0,.32);display:flex;flex-direction:column;height:100vh;justify-content:center;position:absolute;width:100vw;z-index:10}.overlay{background:rgba(77,77,77,.7);opacity:.5;z-index:100}.dialog,.overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dialog{border-radius:4px;z-index:110}.dialog-panel{background:var(--paper-color,#fff);border-radius:5px;bottom:0;box-shadow:var(--shadow1);display:flex;flex-direction:column;left:0;max-width:90%;min-width:500px;overflow:auto;padding:0;right:0;top:0}.dialog-panel>header{font-size:1rem;font-weight:600;padding:1rem}.dialog-panel>main{flex:1;padding:1rem}.dialog-panel>footer{display:flex;justify-content:flex-end;padding:1rem}.dialog-panel>footer button{min-width:5rem}.content-editor{padding:0 1rem}.content-editor>section{margin-bottom:1rem}.content-editor>section>header{border-bottom:1px solid var(--divider-color);margin-bottom:.5rem;padding:.5rem}.entity-editor>header{padding:.5rem}.collection-editor>header{align-items:flex-end;display:flex;padding:0 .5rem}.collection-editor>header>.actions{display:flex;flex:1;justify-content:flex-end}.collection-editor>header>.actions button{height:2rem!important;padding:0!important}.collection-editor>footer{display:flex;justify-content:flex-end}.collection-editor td{padding-left:0}.collection-editor .mdc-text-field{width:99%}.collection-editor .actions{padding:.5rem;text-align:right;width:8rem}.collection-adder{display:flex}.collection-adder .data-table{background-color:#f2f2f2;border:0;width:100%}.collection-adder table{border:0;width:100%}.collection-adder th{display: }.collection-adder tr{border:0}.collection-adder td{padding-left:0}.collection-adder td>label{background-color:var(--paper-color)!important}.collection-adder td.actions{align-items:center;border:0 solid red;display:flex}.field-editor{padding:0}.field-editor>*{width:100%}.function-editor{display:flex;min-height:10rem;width:100%}.function-editor>main{flex:1}.function-editor>aside{min-width:10rem;padding:0 .5rem}.function-editor>aside>table{border:1px solid var(--divider-color);margin:0;min-width:20rem;padding:0}.function-editor>aside>table>tr{border-bottom:1px solid var(--divider-color)}.function-editor>aside>table>tr>td{overflow:hidden;padding:0 0 0 .5rem;width:10rem}.function-editor>aside>table>tr>td input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#f0f0f0;border:0;margin:.2rem}.treeded-editor{display:flex}.group-caption{border-bottom:1px solid var(--divider-color);margin:.5rem 0}.multiselection-editor{align-items:center;border:1px solid var(--divider-color);border-radius:.3rem;display:flex;margin:1rem 0;padding:1rem;position:relative}.multiselection-editor>label{background-color:var(--paper-color);color:var(--text-color-light);font-size:.8rem;padding:2px 6px 2px 4px;position:absolute;top:-9px}header.collection-page{padding-right:.5rem}menu.collection-page{display:flex;flex-direction:column}menu.collection-page>header{border-bottom:1px dotted var(--divider-color)}menu.collection-page>main{flex:1;overflow:auto}.collection-page .content-editor>section{background-color:var(--paper-color);border:1px solid var(--divider-color);padding:0 1rem 1rem}.collection-page .content-editor.tabbed>section{background-color:var(--paper-color);border-width:1px;border:1px solid var(--divider-color);border-top:0 solid var(--divider-color);padding:0 1rem 1rem}.uploader{display:flex;flex-direction:column}.demo-uploader{flex-direction:column;height:30rem;margin:5rem auto;width:40rem}.upload-area6{align-items:center;border:2px dashed var(--divider-color);border-radius:1rem;display:flex;flex:1;flex-direction:column;justify-content:center;margin:0 0 1rem;min-height:10rem}.upload-area6>label{font-size:1.1rem;font-weight:500}.upload-area6.drag-over{background-color:hsla(0,0%,78%,.1)}.upload-file{align-items:center;display:flex;min-height:4rem;padding:0 1rem}.upload-file>label{flex:1;min-width:40%;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:nowrap}.error{color:red;text-align:center}
+.btn {
+    position: relative;
+    padding: .2rem .5rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    border-width: 0;
+    outline: none;
+    transition: background-color .3s;
+    display: flex;
+    color: var(--primary-color);
+    min-height: 2.5rem;
+  }
+
+  
+  .btn.outlined {
+    color: var(--primary-color);
+    border: solid 1px var(--primary-color);
+  }
+  
+  .btn.outlined.disabled {
+    border: solid 1px rgba(200,200,200,.3) !important;
+    color: rgba(100,100,100,.5) !important;
+    cursor: not-allowed;
+  }
+
+  .btn.raised {
+    color: var(--primary-color-text);
+    background-color: var(--primary-color)
+  }
+
+  .btn.raised.disabled {
+    background-color: rgba(200,200,200,.3) !important;
+    color: rgba(100,100,100,.5) !important;
+    cursor: not-allowed;
+  }
+  
+  .btn:hover, .btn:focus {
+    background-color: rgba(171, 171, 171, 0.3);
+    cursor: pointer;
+  }
+
+  .btn.raised:hover, .btn.raised:focus {
+    background-color: var(--primary-color-dark);
+    cursor: pointer;
+  }
+  
+  .btn > * {
+    position: relative;
+  }
+  
+  .btn span {
+    flex: 1;
+    display: block;
+  }
+  
+  .btn:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    padding-top: 0;
+    border-radius: 100%;
+    background-color: rgba(236, 240, 241, .3);
+    transform: translate(-50%, -50%);
+  }
+  
+  .btn:active:before {
+    width: 120%;
+    padding-top: 120%;
+    transition: width .2s ease-out, padding-top .2s ease-out;
+  }
+  
+.icon {
+    position: relative;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    padding-top: 0;
+    border-radius: 100%;
+    background-color: rgba(236, 240, 241, 0.548);
+    transform: translate(-50%, -50%);
+  }
+  
+  .icon:active:before {
+    width: 120%;
+    padding-top: 120%;
+    transition: width .2s ease-out, padding-top .2s ease-out;
+  }
+
+.icon.clickable:hover {
+    background-color: rgba(100,100,100,.1);
+    cursor: pointer;
+    border-radius: 100%;
+}
+
+.icon.small {
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.2rem;
+}
+
+.icon.normal {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.7rem;
+}
+
+.icon.large {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2rem;
+}
+.checkbox {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.checkbox .checkmark {
+  width: 1.5rem;
+  height: 1.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.3rem;
+  border: solid 1px var(--primary-color);
+  background-color: var(--paper-color);
+  padding-bottom: .1rem;
+}
+
+.checkbox .checkmark:after {
+  content: "";
+  width: 0.3rem;
+  height: 0.8rem;
+  border: solid var(--primary-color);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  display: none;
+  z-index: 0;
+}
+
+.checkbox > input {
+  position: absolute;
+  flex: 1;
+  width: 2rem;
+  height: 2rem;
+  opacity: 0;
+  z-index: 1;
+}
+
+input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+.checkbox > label {
+  color: var(--text-color-light);
+  font-size: 1rem;
+  font-weight: normal;
+}
+
+.chips {
+    flex: 1;
+    display: flex;
+    overflow: auto;
+    max-height: 2rem;
+}
+
+.chip {
+    display: flex;
+    align-items: center;
+    border-radius: 2rem;
+    font-size: .9rem;
+    color: var(--text-color-light);
+    background-color: rgb(232, 232, 232);
+    margin: .2rem;
+    cursor: pointer;
+}
+
+.chip:hover {
+    background-color: rgba(200,200,200,.5);
+}
+
+.chip.selected {
+    background-color: var(--primary-color-lighter);
+}
+
+.chip.outlined {
+    background-color: transparent;
+    border: solid 1px var(--divider-color);
+}
+
+.chip.outlined:hover {
+    background-color: rgba(200,200,200,.5);
+}
+
+.chip.outlined.selected {
+    background-color: var(--primary-color-lighter);
+    border: solid 1px var(--primary-color-light);
+}
+
+.chip>.icon {
+    border-radius: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: .2rem;
+}
+
+.chip>main {
+    flex: 1;
+    padding: .3rem;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.chip>.meta>.icon {
+    background-color: rgba(200,200,200,.8);
+    border-radius: 2rem;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin: .2rem;
+    font-size: .8rem;
+}
+.form-header {
+    padding: 0 1rem;
+}
+
+.form-grid {
+    display: grid;
+    grid-auto-rows: 4.2rem;
+    grid-gap: 0rem;
+}
+
+.field-wrapper {
+    display: flex;
+}
+
+.field-wrapper>* {
+    flex: 1;
+}
+
+.header {
+  display: flex;
+  padding: 0;
+  min-height: 3rem;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.header>.icon .header>img {
+  margin-right: 1.6rem
+}
+
+.header>label {
+  margin-left: 1rem
+}
+
+.header.caption {
+  height: 4rem;
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.header.dense {
+  height: 2.4rem;
+  padding: 0;
+}
+
+.header.prominent {
+  height: 12.8rem;
+  align-items: flex-start;
+}
+
+.header.prominent>label {
+  align-self: flex-end;
+}
+
+.header-icon {
+  max-width: 4rem;
+  max-height: 4rem;
+  -o-object-fit: contain;
+     object-fit: contain;
+  padding: .5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header>.actions {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  overflow: vivsible;
+}
+
+.header.primary {
+  background-color: var(--primary-color-dark);
+  color: var(--primary-color-text);
+}
+
+.header.secondary {
+  color: var(--secondary-color-text);
+  background-color: var(--secondary-color-dark);
+}
+
+.list {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.list>header {
+  padding: .5rem 0 0 1.5rem;
+  color: var(--text-color-light);
+  text-transform: capitalize;
+  font-size: .8rem;
+}
+
+.list > ul {
+  flex: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+
+.list > ul li {
+  flex: 1;
+  overflow: hidden;
+  min-height: 3rem;
+  padding: .3rem 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.list > ul li:hover {
+  background-color: var(--primary-color-lighter);
+}
+
+.list > ul li > .icon {
+  color: var(--text-color-lighter);
+}
+
+.list > ul li > main {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.list > ul li > main  > * {
+  flex: 1;
+  padding: 0 1rem;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.list > ul li > main  > .primary-line {
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.list > ul li > main  > .secondary-line {
+  font-size: .9rem;
+  color: var(--text-color-lighter);
+}
+
+.list > ul li > .meta {
+  
+}
+
+.menu-icon {
+    position: relative;
+    width: 3rem;
+}
+
+.menu-icon>.overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  background-color: transparent;
+}
+
+.menu-icon>menu {
+    z-index: 6;
+    position: absolute;
+    top: 3rem;
+    left: 0px;
+    margin: 0;
+    border: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
+    padding: 0;
+    min-width: 7rem;
+    max-width: 14rem;
+    max-height: 50vh;
+    overflow: auto;
+    box-shadow: var(--shadow1);
+}
+
+.menu-icon>menu.alignRight {
+    left:unset;
+    right: 0px;
+  }
+
+.menu-icon>menu ul {
+    list-style: none;
+    margin: 0;
+    padding: .5rem 0;
+    cursor: pointer;
+  }
+  
+  .menu-icon>menu li {
+    min-height: 3rem;
+    padding: 0 .5rem;
+    
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu-icon>menu li:hover {
+    background-color: var(--primary-color-lighter);
+  }
+
+  .menu-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+  }
+
+  .menu-item>.icon {
+      color: var(--text-color-light)
+  }
+
+  .menu-item>label {
+      flex: 1;
+      white-space: nowrap;
+      padding: 0 .5rem 0 0;
+      color: var(--text-color);
+      font-size: .9rem;
+  }
+
+  .menu-item>.meta {
+    color: var(--text-color-lighter)
+}
+@-webkit-keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+@keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+.circular-progress {
+    -webkit-animation: rotating 2s linear infinite;
+            animation: rotating 2s linear infinite;
+}
+.property {
+    flex:1;
+    display: flex;
+}
+
+.property-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.property-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.radio {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  
+  .radio .checkmark {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.3rem;
+    border: solid 1px var(--primary-color);
+    background-color: var(--paper-color);
+    border-radius: 3rem;
+  }
+  
+  .radio .checkmark:after {
+    content: "";
+    width: .4rem;
+    height: .4rem;
+    border: solid 5px var(--primary-color);
+    border-radius: 5rem;
+    background-color: var(--primary-color);
+    display: none;
+    z-index: 0;
+  }
+  
+  .radio > input {
+    position: absolute;
+    flex: 1;
+    width: 2rem;
+    height: 2rem;
+    opacity: 0;
+    z-index: 1;
+  }
+  
+  input:checked ~ .checkmark:after {
+      display: block;
+    }
+  
+  .radio > label {
+    color: var(--text-color-light);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  
+.section2>header {
+    background-color: rgba(200,200,200,.1);
+    padding: 0 1rem;
+    min-height: 3rem;
+    font-weight: 500;
+}
+.tabs {
+  flex: 1;
+  display: flex;
+  overflow-x: auto;
+  align-items: flex-end;
+  max-height: 3rem;
+}
+
+.tab, .tab-filler {
+  padding: 0 1rem;
+  text-transform: uppercase;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  border-bottom: solid 1px var(--divider-color);
+  background-color: transparent !important;
+  min-width: 5rem;
+  font-size: .9rem;
+  color: var(--text-color-light);
+}
+
+.tab-filler {
+  flex: 1;
+}
+
+.tab:hover {
+  background-color: var(--background-color);
+  cursor: pointer;
+}
+
+.tab.selected {
+  background-color: var(--paper-color) !important;
+  color: var(--text-color);
+  border: solid 1px var(--divider-color);
+  border-bottom-width: 0;
+  min-height: 2.2rem;
+  border-radius: 0;
+}
+
+.tab.small {
+  padding: .2rem;
+}
+
+.textfield-outlined {
+  flex: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  border-radius: 5px;
+  display: flex;
+  max-height: 3.5rem;
+  min-height: 3.5rem;
+}
+
+.textfield-outlined.no-label {
+  padding-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+.textfield-outlined > input {
+  flex: 1;
+  padding: 10px 10px 10px 0.5rem;
+  display: block;
+  border: none;
+  border: 1px solid var(--divider-color);
+  overflow: hidden;
+}
+
+.textfield-outlined > input:focus {
+  outline: none;
+}
+
+.textfield-outlined > label {
+  color: var(--primary-color);
+  font-size: 1rem;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: 0.4rem;
+  top: 2rem;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+.textfield-outlined > input:focus ~ label,
+.textfield-outlined > input:valid ~ label {
+  top: 0.3rem;
+  font-size: .9rem;
+  color: var(--primary-color);
+}
+
+.textfield-outlined > .bar {
+  display: none;
+}
+
+.textfield {
+  flex: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  overflow: hidden;
+  display: flex;
+  max-height: 3.5rem;
+  min-height: 3.5;
+}
+
+.textfield.no-label {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.textfield > input {
+  flex: 1;
+  padding: 10px 10px 10px .5rem;
+  display: block;
+  border: none;
+  border-bottom: 1px solid var(--divider-color);
+  overflow: hidden;
+  font-size: 1rem;
+}
+
+.textfield > input:focus {
+  outline: none;
+}
+
+.textfield > label {
+  color: var(--primary-color);
+  font-size: .9rem;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: .4rem;
+  top: 2rem;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+input:-moz-read-only {
+  background-color: rgba(200,200,200,.1);
+  border: 0px !important;
+}
+
+input:read-only {
+  background-color: rgba(200,200,200,.1);
+  border: 0px !important;
+}
+
+/* active state */
+input:-moz-read-only ~ label {
+  top: .3rem;
+  font-size: .8rem;
+  color: var(--primary-color);
+}
+input:read-only ~ label,
+.textfield > input:focus ~ label,
+.textfield > input:valid ~ label {
+  top: .3rem;
+  font-size: .8rem;
+  color: var(--primary-color);
+}
+
+.textfield > .bar {
+  position: relative;
+  display: block;
+}
+
+.textfield > .bar:before,
+.textfield > .bar:after {
+  content: "";
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: #5264ae;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+.textfield > .bar:before {
+  left: 50%;
+}
+
+.textfield > .bar:after {
+  right: 50%;
+}
+
+/* active state */
+.textfield > input:focus ~ .bar:before,
+.textfield > input:focus ~ .bar:after {
+  width: 50%;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: .2rem;
+}
+
+.dropdown>menu {
+  z-index: 2;
+  position: absolute;
+  top: 3.8rem;
+  left: 0px;
+  right: 0px;
+  margin: 0;
+  border: solid 1px var(--divider-color);
+  background-color: var(--paper-color);
+  padding: 0;
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.dropdown>menu ul {
+  list-style: none;
+  margin: 0;
+  padding: .5rem 0;
+  cursor: pointer;
+}
+
+.dropdown>menu li {
+  min-height: 2rem;
+  padding: 0 .5rem;
+  display: flex;
+  align-items: center;
+  font-size: .9rem;
+}
+
+.dropdown>menu li:hover {
+  background-color: var(--primary-color-lighter);
+}
+
+.datatable8 {
+    max-height: 40rem;
+    overflow: hidden;
+    border: solid 0px var(--divider-color);
+    background-color: var(--paper-color);
+}
+
+.datatable8.outlined {
+    border: solid 1px var(--divider-color);
+}
+
+.datatable8 table {
+    width: 100%;
+}
+
+.datatable8 thead  {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0px;
+    background-color: rgba(200,200,200,.4);
+    overflow: hidden;
+    color: var(--text-color-lighter);
+}
+
+.datatable8 thead tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.datatable8 thead th {
+    padding: 0 1rem;
+    text-align: left;
+    font-weight: 600 !important;
+}
+
+.datatable8 tbody {
+    overflow: visible;
+    height: 5rem;
+}
+
+.datatable8 tbody tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.datatable8 tbody tr:hover {
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer
+}
+
+.datatable8 tbody td {
+    height: 3rem;
+    padding: 0 1rem;
+    overflow: visible;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 10rem;
+    color: var(--text-color-light);
+}   
+.tokenField {
+    position: relative;
+    border: solid 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    border-radius: .3rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tokenField>label {
+    position: absolute;
+    top:-9px;
+    padding: 2px 6px 2px 4px;
+    font-size: .8rem;
+    background-color: var(--paper-color);
+    color: var(--text-color-light)
+}
+
+.tokenField input {
+    border: 0px;
+    padding: .5rem 0;
+    font-size: 1rem;
+    flex: 1;
+    min-width: 3rem;
+}
+
+.token {
+    display: flex;
+    border: solid 1px var(--divider-color);
+    background-color: rgba(200,200,200,.1);
+    align-items: center;
+    padding: .2rem .2rem .2rem .4rem;
+    border-radius: .3rem !important;
+    margin: .2rem;
+    max-height: 2rem;
+}
+
+.token > div {
+    white-space: nowrap;
+}
+
+.token button {
+    width: 2rem;
+    height: 1.6rem;
+    font-size: .8rem !important;
+    padding: 0 !important;
+    margin-left: .2rem;
+}
+.tree {
+    padding: .5rem 0;
+}
+
+.tree-node {
+    margin: 0;
+    padding: 0;
+    padding-left: 1rem;
+}
+
+.tree-item{
+    margin: 0;
+    padding: .5rem 0;
+    display: flex;
+    align-items: center;
+    font: 1rem;
+    color: rgba(0,0,0,.7);
+}
+
+.tree-item:hover {
+    cursor: pointer;
+    background-color: rgba(200,200,200,.7);
+    font-weight: 500;
+} 
+
+.tree-item.final {
+    margin-left: 1rem;
+    padding-left: 1rem;
+}
+
+.tree-item>i {
+    padding-left: .3rem;
+}
+
+.tree-item>.label {
+    padding-left: .8rem;
+    width: 100%;
+}
+
+.tree-item>.actions {
+    padding: 0 .5rem;
+    color: var(--text-color-lighter);
+}
+
+.tree-item>.actions .rmwc-icon {
+    padding: 0;
+    font-size: 1rem;
+    width: 2rem;
+    height: 2rem;
+}
+
+.tree-node>summary::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 10px;
+    color: rgba(0,0,0,.3);
+}
+
+details[open].tree-node>summary::before {
+	transform: rotate(90deg)
+}
+.login-box {
+  background-color: var(--paper-color);
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "main main"
+    "footer footer";
+}
+
+.login-box > header {
+  grid-area: header;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 1rem;
+}
+
+.login-box > header > img {
+  max-width: 90%;
+}
+
+.login-box > header > .title {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.login-box > main {
+  grid-area: main;
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-box .message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1rem;
+  color: var(--danger-color-light);
+  font-weight: 500;
+}
+
+.load-box {
+  color: var(--primary-color-text);
+  background-color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.load-box .icon {
+  -webkit-animation: rotation 2s infinite linear;
+          animation: rotation 2s infinite linear;
+}
+
+@-webkit-keyframes rotation-counterclock {
+    from {
+      transform: rotate(359deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+@keyframes rotation-counterclock {
+    from {
+      transform: rotate(359deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+@-webkit-keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.login-box > footer {
+  grid-area: footer;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.reset-password-box {
+    background-color: var(--paper-color);
+    display: grid;
+    grid-template-areas: "header header" "main main" "footer footer";
+    -webkit-animation: fadeIn 2s;
+            animation: fadeIn 2s;
+    padding: .5rem;
+}
+
+.reset-password-box>header {
+    grid-area: header;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.reset-password-box>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+}
+
+.reset-password-box>main>label {
+    margin: 1rem 0 0 0;
+}
+
+.reset-password-box .error {
+    font-weight: 600;
+    color: red;
+    padding: 1rem;
+    text-align: center;
+}
+
+.reset-password-box>footer {
+    grid-area: footer;
+    margin-top: .5rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.reset-password-box>footer>button {
+    min-width: 6rem;
+    max-height: 3rem;
+}
+
+@-webkit-keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+.viewer {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .75);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 4rem 1fr;
+    grid-template-areas: "header aside" "main aside";
+    color: #FFF;
+}
+
+.viewer>header {
+    grid-area: header;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-image: linear-gradient(rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-position-x: initial;
+    background-position-y: initial;
+    background-size: initial;
+    background-repeat-x: initial;
+    background-repeat-y: initial;
+    background-attachment: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: initial;
+}
+
+.viewer>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+}
+
+.viewer>main>.resizer {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+}
+
+.viewer>main>.resizer img {
+    width: 100%;
+    -o-object-fit: fill;
+       object-fit: fill;
+}
+
+@media (min-width: 800px) {
+    .viewer>main>.resizer {
+        width: 800px;
+        padding: 0;
+    }
+}
+
+.viewer>aside {
+    min-width: 22rem;
+    grid-area: aside;
+    display: none;
+    background-color: rgb(50, 50, 50);
+}
+
+.viewer>aside.open {
+    grid-area: aside;
+    display: flex;
+    flex-direction: column;
+}
+
+.viewer>aside .property>label {
+    color: #AAA;
+}
+
+.viewer>footer {
+    width: 15rem;
+    position: absolute;
+    bottom: 1rem;
+    left: calc(50vw - 4rem);
+    border-radius: 3px;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem;
+    background-color: rgba(0, 0, 0, .75);
+}
+.kanban {
+    display: flex;
+    min-height: 30rem;
+    background-color: var(--background-color);
+    overflow-x: auto;
+    max-height: 90vh;
+    border-top: solid 1px var(--divider-color);
+    border-left: solid 1px var(--divider-color);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.kanban-column {
+    flex: 1;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+    border-right: solid 1px var(--divider-color);
+}
+
+.kanban-column.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.kanban-column.dragOver {
+    background-color: rgba(100,100,100,.1);
+}
+
+.kanban-column.min {
+    flex: 0;
+    min-width: 4rem;
+}
+
+.kanban-column>header {
+    height: 5rem;
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem;
+}
+
+.kanban-column>header>.title {
+    padding: 0 1rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.kanban-column>header>i, .kanban-column>footer>button {
+    color: rgba(100, 100, 100, .6);
+}
+
+.kanban-column>main {
+    flex: 1;
+    overflow: auto;
+}
+
+.kanban-column.min>main {
+    min-height: 10rem;
+    padding: 1rem;
+    -ms-writing-mode: tb-rl;
+        writing-mode: vertical-rl;
+    color: var(--primary-color-light);
+}
+
+.kanban-card {
+    margin: 2rem;
+    box-shadow: var(--shadow1);
+    background-color: var(--paper-color);
+    border-radius: 5px;
+    min-height: 10rem;
+}
+
+.kanban-card.red {
+    border-left: solid 5px red;
+}
+
+.secondary-text {
+    color: rgba(100, 100, 100, .8);
+}
+.page6 {
+    height: 100%;
+    color: var(--text-color);
+}
+
+.page6>menu {
+    padding: 0px;
+    margin: 0px;
+    grid-area: menu;
+    width: var(--page-menu-width);
+    color: var(--page-menu-color);
+    background-color: var(--page-menu-bgcolor);
+    border-right: solid 1px var(--divider-color);
+}
+
+.page6>header {
+    grid-area: header;
+    height: var(--page-header-height);
+    color: var(--page-header-color);
+    background-color: var(--page-header-bgcolor);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.page6>nav {
+    grid-area: nav;
+    height: var(--page-nav-height);
+}
+
+.page6>main {
+    grid-area: main;
+    overflow: hidden;
+}
+
+.page6>aside {
+    grid-area: aside;
+    width: var(--page-aside-width);
+    color: var(--page-aside-color);
+    background-color: var(--page-aside-bgcolor);
+}
+
+.page6>footer {
+    grid-area: footer;
+    min-height: var(--page-footer-height);
+}
+
+:root {
+    --timeout: 800ms;
+}
+
+.workspace { 
+    display: grid;
+    grid-template-areas: "header header header" 
+                         "menu   nav    nav"
+                         "menu   main   aside"
+                         "menu   detail aside" 
+                         "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto auto;
+}
+
+.workspace>nav {
+    min-height: 3rem;
+}
+
+.overall {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left:0;
+    right: 0;
+    background-color: var(--background-color);
+}
+
+.site6 {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: var(--site-header-height) 1fr auto;
+    grid-template-areas: "header nav nav" "menu main aside" "footer footer footer";
+    background-color: var(--background-color);
+}
+
+.site6>header {
+    grid-area: header;
+    color: var(--site-header-color);
+    background-color: var(--site-header-bgcolor);
+    display: flex;
+    align-items: center;
+    width: var(--site-menu-width);
+}
+
+.site6>nav {
+    grid-area: nav;
+    color: var(--site-nav-color);
+    background-color: var(--site-nav-bgcolor);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 1rem;
+}
+
+.site6>nav>header {
+    flex: 1;
+}
+
+.site6>menu {
+    grid-area: menu;
+    margin: 0;
+    border-right: solid 1px var(--divider-color);
+    padding: .2rem;
+    color: var(--site-menu-color);
+    background-color: var(--site-menu-bgcolor);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: var(--site-menu-width);
+}
+
+.site6>menu>main {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.site6>main {
+    grid-area: main;
+    overflow: hidden;
+}
+
+.site6>aside {
+    grid-area: aside;
+    color: var(--site-aside-color);
+    background-color: var(--site-aside-bgcolor);
+}
+
+.site6>footer {
+    grid-area: footer;
+    min-height: 20rem;
+    background-color: rgb(222, 222, 222);
+    color: #FFF;
+}
+
+.site6>.site-preview {
+    position: absolute;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.32);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.overlay {
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(77, 77, 77, 0.7);
+  z-index: 100;
+}
+
+.dialog {
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-panel {
+  min-width: 500px;
+  max-width: 90%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--paper-color, #fff);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  box-shadow: var(--shadow1);
+  overflow: auto;
+}
+
+.dialog-panel > header {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem;
+}
+
+.dialog-panel > main {
+  flex: 1;
+  padding: 1rem;
+}
+
+.dialog-panel > footer {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-panel > footer button {
+  min-width: 5rem;
+}
+.content-editor {
+    padding: 0 1rem;
+}
+
+.content-editor>section {
+
+    margin-bottom: 1rem;
+}
+
+.content-editor>section>header {
+    padding: .5rem;
+    border-bottom: solid 1px var(--divider-color);
+    margin-bottom: .5rem;
+}
+
+.entity-editor {
+}
+
+.entity-editor>header {
+    padding: .5rem;
+}
+
+.collection-editor {
+}
+
+.collection-editor>header {
+    padding: 0 .5rem;
+    display: flex;
+    align-items: flex-end;
+}
+
+.collection-editor>header>.actions {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.collection-editor>header>.actions button {
+    height: 2rem !important;
+    padding: 0 !important;
+}
+
+.collection-editor>footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.collection-editor td {
+    padding-left: 0px;
+}
+
+.collection-editor .mdc-text-field {
+    width: 99%;
+}
+
+.collection-editor .actions {
+    width: 8rem;
+    text-align: right;
+    padding: .5rem;
+}
+
+.collection-adder {
+    display: flex;
+}
+
+.collection-adder .data-table {
+    width: 100%;
+    border: 0px;
+    background-color: rgb(242, 242, 242);
+}
+
+.collection-adder table {
+    width: 100%;
+    border: 0px;
+}
+
+.collection-adder th {
+    display:  ;
+}
+
+.collection-adder tr {
+    border: 0;
+}
+
+.collection-adder td {
+    padding-left: 0px;
+}
+
+.collection-adder td>label  {
+    background-color: var(--paper-color) !important;
+}
+
+
+.collection-adder td.actions {
+    border: solid 0px red;
+    display: flex;
+    align-items: center;
+}
+
+
+.field-editor {
+    padding: 0;
+}
+
+.field-editor>* {
+    width: 100%;
+}
+
+.function-editor {
+    width: 100%;
+    min-height: 10rem;
+    display: flex;
+}
+
+.function-editor>main {
+    flex: 1;
+}
+
+.function-editor>aside {
+    min-width: 10rem;
+    padding: 0 .5rem;
+}
+
+.function-editor>aside>table {
+    min-width: 20rem;
+    border: solid 1px var(--divider-color);
+    margin: 0;
+    padding: 0;
+}
+
+.function-editor>aside>table>tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.function-editor>aside>table>tr>td {
+    width: 10rem;
+    overflow: hidden;
+    padding: 0  0 0 .5rem;
+}
+
+.function-editor>aside>table>tr>td input {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: 0px;
+    background-color: rgba(240,240,240);
+    margin: .2rem;
+}
+
+.treeded-editor {
+    display: flex;
+}
+
+.group-caption {
+    border-bottom: solid 1px var(--divider-color);
+    margin: .5rem 0;
+}
+
+.multiselection-editor {
+    position: relative;
+    border: solid 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    border-radius: .3rem;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+.multiselection-editor>label {
+    position: absolute;
+    top:-9px;
+    padding: 2px 6px 2px 4px;
+    font-size: .8rem;
+    background-color: var(--paper-color);
+    color: var(--text-color-light)
+}
+header.collection-page {
+    padding-right: .5rem;
+}
+
+menu.collection-page {
+    display: flex;
+    flex-direction: column;
+}
+
+menu.collection-page>header {
+    border-bottom: dotted 1px var(--divider-color);
+}
+
+menu.collection-page>main {
+    flex: 1;
+    overflow:auto;
+}
+
+.collection-page .content-editor .selected {
+    /*background-color: #FBFBFB !important;*/
+}
+
+.collection-page .content-editor>section {
+    border: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
+    padding: 0 1rem 1rem 1rem;
+}
+
+.collection-page .content-editor.tabbed>section {
+    border: solid 1px var(--divider-color);
+    border-width: 0 1px 1px 1px;
+    background-color: var(--paper-color);
+    padding: 0 1rem 1rem 1rem;
+}
+.uploader {
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-uploader {
+    width: 40rem;
+    height: 30rem;
+    margin: 5rem auto;
+    flex-direction: column;
+}
+
+/***************** Upload Area ***********************/
+
+.upload-area6 {
+    flex: 1;
+    margin: 0 0 1rem 0;
+    border: dashed 2px var(--divider-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1rem;
+    min-height: 10rem;
+  }
+  
+  .upload-area6>label {
+    font-size: 1.1rem;
+    font-weight: 500;
+  }
+  
+  .upload-area6.drag-over {
+    background-color: rgba(200,200,200,.1);
+  }
+
+  /***************** Upload File ***********************/
+
+.upload-file {
+    display: flex;
+    align-items: center;
+    min-height: 4rem;
+    padding: 0 1rem;
+}
+
+.upload-file>label {
+    padding: 0 1rem;
+    min-width: 40%;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.error {
+  color: red;
+  text-align: center
+}
 /*# sourceMappingURL=index.css.map */