ywana-core8 0.1.9 → 0.1.10

package/dist/index.css

@@ -1262,1660 +1262,1660 @@ textarea:read-only ~ label,
   background-color: var(--primary-color-lighter);
 }
 
-.datatable8 {
-    border: solid 0px var(--divider-color);
-    background-color: var(--paper-color);
-    overflow: auto;
-    max-height: 100%;
-    width: 100%;
-}
-
-.datatable8.outlined {
-    border: solid 1px var(--divider-color);
-}
-
-.datatable8 table {
-    width: 100%;
-}
-
-.datatable8 thead  {
-    position: sticky;
-    top: 0px;
-    overflow: hidden;
-    color: var(--text-color-light);
-    z-index: 10;
+.login-box {
+  background-color: var(--paper-color);
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "main main"
+    "footer footer";
 }
 
-.datatable8 thead th {
-    height: 2.1rem;
-    padding: 0 1rem;
-    text-align: left;
-    font-weight: 600 !important;
-    border-bottom: solid 1px var(--divider-color);
-    background-color: var(--paper-color);
+.login-box > header {
+  grid-area: header;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 1rem;
 }
 
-.datatable8 thead th>div {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-transform: uppercase;
-    font-size: .8rem;
+.login-box > header > img {
+  max-width: 90%;
 }
 
-.datatable8 tbody {
-    overflow: visible;
-    height: 5rem;
+.login-box > header > .title {
+  font-size: 2rem;
+  font-weight: 600;
 }
 
-.datatable8 tbody tr.selected {
-    background-color: rgba(200,200,200,.6);
+.login-box > main {
+  grid-area: main;
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
-.datatable8 tbody tr:hover {
-    background-color: rgba(200,200,200,.2);
-    cursor: pointer
+.login-box .message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1rem;
+  color: var(--danger-color-light);
+  font-weight: 500;
 }
 
-.datatable8 tbody tr.selected:hover {
-    background-color: rgba(200,200,200,.4);
+.load-box {
+  width: 100%;
+  color: var(--primary-color-text);
+  background-color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.datatable8 tbody td {
-    height: 3rem;
-    padding: 0 1rem;
-    overflow: visible;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 10rem;
-    color: var(--text-color-light);
-}   
-
-.datatable8 tbody td.index {
-    width: 3rem;
-    overflow: hidden;
-    color: var(--text-color-lighter);
+.load-box .icon {
+  animation: rotation 2s infinite linear;
 }
 
-.datatable8 tbody td.checked
- {
-    width: 3rem;
-    overflow: hidden;
- }
-
- .datatable8 tbody td.checked .checkmark {
-    border-color: var(--text-color-lighter) !important;
-}
+@keyframes rotation-counterclock {
+    from {
+      transform: rotate(359deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
 
-.datatable8 .string-viewer img {
-    height: 5rem;
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 
-.datatable8 th.resizable-column {
-    resize: horizontal;
-    overflow: hidden;
-}
-.uploader {
+.login-box > footer {
+  grid-area: footer;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  flex: 1;
+  align-items: flex-end;
 }
 
-.demo-uploader {
-  width: 40rem;
-  height: 30rem;
-  margin: 5rem auto;
-  flex-direction: column;
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-/***************** 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;
+.login-box .login-button {
+  animation: fadeIn 0.5s;
+  width: 100%;
 }
 
-.upload-area6 > label {
-  font-size: 1.1rem;
-  font-weight: 500;
+.login-box .forgot-button {
+    text-align: right;
+    font-weight: 500;
+    max-width: 15rem;
 }
-
-.upload-area6.drag-over {
-  background-color: rgba(200, 200, 200, 0.1);
+.reset-password-box {
+    background-color: var(--paper-color);
+    display: grid;
+    grid-template-areas: "header header" "main main" "footer footer";
+    animation: fadeIn 2s;
+    padding: .5rem;
 }
 
-/***************** Upload File ***********************/
-
-.upload-file {
-  display: flex;
-  align-items: center;
+.reset-password-box>header {
+    grid-area: header;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
 }
 
-.upload-file > label {
-  min-width: 30%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 1rem;
+.reset-password-box>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
 }
 
-.upload-file > main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+.reset-password-box>main>label {
+    margin: 1rem 0 0 0;
 }
 
-.upload-file .error {
-  color: red;
-  text-align: center;
+.reset-password-box .error {
+    font-weight: 600;
+    color: red;
+    padding: 1rem;
+    text-align: center;
 }
 
-.upload-file progress {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: solid 1px var(--divider-color);
+.reset-password-box>footer {
+    grid-area: footer;
+    margin-top: .5rem;
+    display: flex;
+    justify-content: space-between;
 }
 
-.upload-file ::-webkit-progress-bar {
-  border: solid 1px rgb(235, 235, 235);
-  background-color: rgb(241, 241, 241);
+.reset-password-box>footer>button {
+    min-width: 6rem;
+    max-height: 3rem;
 }
 
-.upload-file ::-webkit-progress-value {
-  background-color: rgb(182, 182, 182);
-  opacity: 1;
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
 }
-
-.tokenField {
-    min-height: 3.8;
-    position: relative;
-    border-bottom: solid 1px var(--divider-color);
+.image-viewer   {
     display: flex;
+    justify-content: center;
     align-items: center;
-    margin: 1rem 0 0 0;
-    display: flex;
-    flex-wrap: wrap;
 }
-
-.tokenField>label {
-    color: var(--primary-color);
-    font-size: .8rem;
-    font-weight: normal;
-    position: absolute;
-    pointer-events: none;
-    top:-9px;
-    padding: 2px 6px 2px 4px;
+.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;
 }
 
-.tokenField input,
-.tokenField .dropdown {
-    border: 0px;
-    padding: .5rem 0;
-    font-size: 1rem;
-    flex: 1;
-    min-width: 3rem;
+.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;
 }
 
-.token {
+.viewer>main {
+    grid-area: main;
     display: flex;
-    border: solid 1px var(--divider-color);
-    background-color: rgba(200,200,200,.1);
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    padding: .2rem .2rem .2rem .4rem;
-    border-radius: .3rem !important;
-    margin: .2rem;
-    max-height: 2rem;
+    overflow: hidden;
 }
 
-.token > div {
-    white-space: nowrap;
+.viewer>main>.resizer {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
 }
 
-.token button {
-    width: 2rem;
-    height: 1.6rem;
-    font-size: .8rem !important;
-    padding: 0 !important;
-    margin-left: .2rem;
+.viewer>main>.resizer img {
+    width: 100%;
+    -o-object-fit: fill;
+       object-fit: fill;
 }
-.tree {
-    padding: .5rem 0;
+
+@media (min-width: 800px) {
+    .viewer>main>.resizer {
+        width: 800px;
+        padding: 0;
+    }
 }
 
-.tree-node {
-    margin: 0;
-    padding: 0;
-    padding-left: 1rem;
+.viewer>aside {
+    min-width: 22rem;
+    grid-area: aside;
+    display: none;
+    background-color: rgb(50, 50, 50);
 }
 
-.tree-item{
-    margin: 0;
+.viewer>aside.open {
+    grid-area: aside;
     display: flex;
-    align-items: center;
-    font: 1rem;
-    color: var(--text-color-light);
+    flex-direction: column;
 }
 
-.tree-item:hover {
-    cursor: pointer;
+.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 {
     background-color: var(--background-color);
-    font-weight: 500;
-} 
+    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);
+    display: flex;
 
-.tree-item.final {
-    margin-left: 1rem;
-    padding-left: 1rem;
+    &.with-swimlanes {
+        flex-wrap: wrap;
+    }
 }
 
-.tree-item.selected {
-    color: var(--accent-color-text);
-    background-color: var(--accent-color);
-    font-weight: 500;
-} 
+.kanban-header {
+    flex: 1;
+    height: 5rem;
+    display: flex;
+    align-items: center;
 
-.tree-item>i {
-    padding-left: .3rem;
+    position: sticky;
+    top: 0;
+    background-color: var(--paper-color);
+    z-index: 10;
 }
 
-.tree-item>.label {
-    padding-left: .8rem;
-    width: 100%;
-}
+.kanban-swimlane {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-color);
+    border-bottom: solid 1px var(--divider-color);
 
-.tree-item>.label.clickable:hover {
-    cursor: pointer;
-    color: var(--accent-color);
-}
+    &>header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0 .5rem;
+        border-right: solid 1px var(--divider-color);
+        border-left: solid 1px var(--divider-color);
+
+        position: sticky;
+        top: 5rem;
+        z-index: 9;
+        background-color: var(--paper-color);
+
+        &>.title {
+            flex: 1;
+            padding: 0 1rem;
+            display: flex;
+
+            &>.secondary-text {
+                padding-left: .5rem;
+                color: rgba(100, 100, 100, .8);
+            }
+        }
+    }
+
+    &>main {
+        flex: 1;
+        display: flex;
+        overflow: auto;
+        transition: all .5s ease-in-out;
+        border-top: solid 1px var(--divider-color);
+
+        &.fold {
+            max-height: 0;
+            overflow: hidden;
+        }
+
+        &.unfold {
+            max-height: -moz-fit-content;
+            max-height: fit-content;
+            overflow: auto;
+        }
+    }
 
-.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;
+.kanban-column {
+    flex: 1;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+    border-right: solid 1px var(--divider-color);
 }
 
-.tree-node>summary::before {
-    content: "\25B6";
-    color: black;
-    display: inline-block;
-    margin-right: 6px;
-    font-size: 10px;
-    color: rgba(0,0,0,.3);
+.kanban-column.disabled {
+    pointer-events: none;
+    opacity: 0.7;
 }
 
-details[open].tree-node>summary::before {
-	transform: rotate(90deg)
+.kanban-column.dragOver {
+    background-color: rgba(100, 100, 100, .1);
 }
-.thumbnail {
-    width: 100%;
-    min-width: 3rem;
-    max-width: 6rem;
 
-    height: 100%;
-    min-height: 3rem;
-    max-height: 6rem;
-    
-    overflow: hidden;
+.kanban-column.min {
+    flex: 0;
+    min-width: 4rem;
 }
 
-.thumbnail>img {
-    width: 100%;
-    height: 100%;
+.kanban-column>header {
+    height: 5rem;
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem;
+    background-color: var(--paper-color);
 }
-.color-field {
+
+.kanban-column>header>.title {
+    padding: 0 1rem;
     flex: 1;
     display: flex;
-    align-items: flex-end;
-    padding: .5rem;
-    overflow: hidden;
-    display: flex;
-    max-height: 3.5rem;
-    min-height: 3.5;
+    flex-direction: column;
 }
 
-.color-field>label { 
-    flex:1;
-    color: var(--primary-color);
-    font-size: .9rem;
-    font-weight: normal;
-    pointer-events: none;
-}
-.multiselector {
-  display: flex;
-  flex-flow: wrap;
-  padding: 1rem
+.kanban-column>header>i,
+.kanban-column>footer>button {
+    color: rgba(100, 100, 100, .6);
 }
 
-.multiselector>li {
-  color: var(--primary-color, blue);
-  border: solid 1px var(--primary-color, blue);
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: .3rem .9rem;
+.kanban-column>main {
+    flex: 1;
+    overflow: auto;
 }
 
-li.selected {
-  color: var(--paper-color);
-  background-color: var(--primary-color);
+.kanban-column.min>main {
+    min-height: 10rem;
+    padding: 1rem;
+    writing-mode: vertical-rl;
+    color: var(--primary-color-light);
 }
 
-.login-box {
-  background-color: var(--paper-color);
-  display: grid;
-  grid-template-areas:
-    "header header"
-    "main main"
-    "footer footer";
+.kanban-column>footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.login-box > header {
-  grid-area: header;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  padding: 1rem;
+.kanban-card {
+    margin: 2rem;
+    box-shadow: var(--shadow1);
+    background-color: var(--paper-color);
+    border-radius: 5px;
+    min-height: 10rem;
 }
 
-.login-box > header > img {
-  max-width: 90%;
+.kanban-card.red {
+    border-left: solid 5px red;
 }
 
-.login-box > header > .title {
-  font-size: 2rem;
-  font-weight: 600;
+.secondary-text {
+    color: rgba(100, 100, 100, .8);
 }
-
-.login-box > main {
-  grid-area: main;
-  padding: 1rem 1rem 0 1rem;
-  display: flex;
-  flex-direction: column;
+.avatar {
+    background-color: rgba(200,200,200,.1);
+    border: solid 3px transparent;
+    border-radius: 100%;
+    overflow: hidden;
 }
 
-.login-box .message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 1rem;
-  color: var(--danger-color-light);
-  font-weight: 500;
+.avatar.small {
+    width: 3rem;
+    height: 3rem;
 }
-
-.load-box {
-  width: 100%;
-  color: var(--primary-color-text);
-  background-color: var(--primary-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.wait-screen {
+    position:absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(200,200,200,.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
-
-.load-box .icon {
-  animation: rotation 2s infinite linear;
+.calendar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
 }
 
-@keyframes rotation-counterclock {
-    from {
-      transform: rotate(359deg);
-    }
-    to {
-      transform: rotate(0deg);
-    }
-  }
+.calendar-range-control {
+    margin: .3rem;
+    border: solid 1px var(--divider-color);
+    background-color: var(--background-color);
+    border-radius: 3px;
+    padding: .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
+    &>.btn {
+        flex: 1;
+        margin-left: 1rem;
+        border-radius: 2px;
+        background-color: var(--background-color);
+        &.outlined {
+            border: solid 1px var(--divider-color);
+            background-color: var(--paper-color);
+        }
+    }
 }
 
-.login-box > footer {
-  grid-area: footer;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+.year-calendar {
+    margin: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.year-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
 }
 
-.login-box .login-button {
-  animation: fadeIn 0.5s;
-  width: 100%;
+.year-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
 }
 
-.login-box .forgot-button {
-    text-align: right;
-    font-weight: 500;
-    max-width: 15rem;
+.year-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
 }
-.reset-password-box {
-    background-color: var(--paper-color);
+
+.year-calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
     display: grid;
-    grid-template-areas: "header header" "main main" "footer footer";
-    animation: fadeIn 2s;
-    padding: .5rem;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    grid-auto-rows: minmax(12rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
 }
 
-.reset-password-box>header {
-    grid-area: header;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
+.year-calendar .month-cell {
+    border-width: 0 0 1px 1px;
+    overflow: hidden;
+    padding: .5rem;
+    text-align: right;
+    font-weight: 400;
+    
+    &>nav {
+        display: flex;
+        padding: .5rem;
+        display: flex;
+        align-items: center;
+    }
+    
+    &>header {
+        display:flex;
+
+        &>.week-day-cell {
+            flex: 1;
+            border: solid 0px var(--divider-color);
+            padding: 2px;
+            text-align: right;
+            min-width: 2rem !important;
+        }
+    }
+    
+    &>main {
+        flex: 1;
+        border: solid 0px var(--divider-color);
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0px;
+        grid-auto-rows: minmax(2rem, auto);
+        overflow: hidden;
+        font-size: .8rem;
+
+        &>.day-cell {
+            border: solid 0px;
+            padding: .5rem;
+            text-align: right;
+            min-height: 1rem;
+            width: 1rem;
+            min-width: 1rem !important;
+            font-weight: 400;
+            color: var(--text-color);
+        }
+
+
+        &>.day-cell.other-month {
+            color: var(--text-color-lighter);
+        }
+
+    }
 }
 
-.reset-password-box>main {
-    grid-area: main;
+
+
+.month-calendar { 
+    margin: 1rem;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
-}
-
-.reset-password-box>main>label {
-    margin: 1rem 0 0 0;
-}
+    padding: 0rem;
 
-.reset-password-box .error {
-    font-weight: 600;
-    color: red;
-    padding: 1rem;
-    text-align: center;
 }
 
-.reset-password-box>footer {
-    grid-area: footer;
-    margin-top: .5rem;
+.month-calendar>nav {
     display: flex;
-    justify-content: space-between;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
 }
 
-.reset-password-box>footer>button {
-    min-width: 6rem;
-    max-height: 3rem;
+.month-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-.image-viewer   {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.month-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
 }
-.viewer {
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, .75);
+
+.month-calendar>header {
     display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 4rem 1fr;
-    grid-template-areas: "header aside" "main aside";
-    color: #FFF;
+    grid-template-columns: repeat(7, 1fr);
+    font-size: .8rem;
 }
 
-.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;
+.month-calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 0px;
+    grid-auto-rows: minmax(5rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
 }
 
-.viewer>main {
-    grid-area: main;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
+.week-day-cell {
+    border: solid 0px var(--divider-color);
+    padding: 2px;
+    text-align: right;
+    min-width: 5rem;
 }
 
-.viewer>main>.resizer {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
+.day-cell {
+    border: solid 1px var(--divider-color);
+    border-width: 0 0 1px 1px;
+    padding: .5rem;
+    text-align: right;
+    min-height: 6rem;
+    min-width: 5rem;
+    font-weight: 400;
 }
 
-.viewer>main>.resizer img {
-    width: 100%;
-    -o-object-fit: fill;
-       object-fit: fill;
+.day-cell.today>header {
+    border-bottom: solid 2px var(--primary-color);
+    padding: .3rem;
+    font-weight: 600;
 }
 
-@media (min-width: 800px) {
-    .viewer>main>.resizer {
-        width: 800px;
-        padding: 0;
-    }
+.day-cell.other-month {
+    color: var(--text-color-lighter);
 }
 
-.viewer>aside {
-    min-width: 22rem;
-    grid-area: aside;
-    display: none;
-    background-color: rgb(50, 50, 50);
+.day-cell:hover {
+    background-color: rgba(200,200,200,.1);
+    cursor: pointer;
 }
 
-.viewer>aside.open {
-    grid-area: aside;
-    display: flex;
-    flex-direction: column;
+.day-cell.today:hover {
+    background-color: var(--primary-color-lighter);
 }
 
-.viewer>aside .property>label {
-    color: #AAA;
+.day-cell .event {
+    background-color: var(--primary-color);
+    color: var(--primary-color-text);
+    padding: .3rem;
+    border-radius: 3px;
+    margin: 3px 1px;
+}
+.planner-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.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);
+.planner-box > header {
+  height: 5rem;
+  border: solid 1px var(--divider-color);
+  border-bottom: 0px;
 }
-.kanban {
-    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);
-    display: flex;
 
-    &.with-swimlanes {
-        flex-wrap: wrap;
-    }
+.planner {
+  flex: 1;
+  border: solid 1px var(--divider-color);
+  display: flex;
+  overflow: auto;
+
+  --row-height: 6rem;
+  --column-width: 8rem;
 }
 
-.kanban-header {
-    flex: 1;
-    height: 5rem;
-    display: flex;
-    align-items: center;
+.planner > .column0 {
+  width: var(--column-width);
+  position: sticky;
+  left: 0px;
+  z-index: 11;
+}
 
-    position: sticky;
-    top: 0;
-    background-color: var(--paper-color);
-    z-index: 10;
+.planner > .column0 > .column-header {
+  width: var(--column-width);
+  height: var(--row-height);
+  position: sticky;
+  top: 0px;
+  background-color: var(--paper-color);
+  border-right: solid 1px var(--divider-color);
+  border-bottom: solid 1px var(--divider-color);
 }
 
-.kanban-swimlane {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--background-color);
-    border-bottom: solid 1px var(--divider-color);
+.planner .date-header.thisWeek {
+  background-color: rgb(10, 176, 35);
+  border-radius: 3px;
+  padding: .2rem;
+  color: var(--paper-color);
+}
 
-    &>header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 0 .5rem;
-        border-right: solid 1px var(--divider-color);
-        border-left: solid 1px var(--divider-color);
+.planner .row-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
+  border-right: solid 1px var(--divider-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-        position: sticky;
-        top: 5rem;
-        z-index: 9;
-        background-color: var(--paper-color);
+.planner > .rows {
+  overflow: visible;
+}
 
-        &>.title {
-            flex: 1;
-            padding: 0 1rem;
-            display: flex;
+.planner > .rows .column-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: 2.6rem;
+  padding: .5rem;
+}
 
-            &>.secondary-text {
-                padding-left: .5rem;
-                color: rgba(100, 100, 100, .8);
-            }
-        }
-    }
+.planner > .rows > .row {
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
+}
 
-    &>main {
-        flex: 1;
-        display: flex;
-        overflow: auto;
-        transition: all .5s ease-in-out;
-        border-top: solid 1px var(--divider-color);
+.planner > .rows > .row0 {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
+}
 
-        &.fold {
-            max-height: 0;
-            overflow: hidden;
-        }
+.planner > .rows > .row1 {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
+}
 
-        &.unfold {
-            max-height: -moz-fit-content;
-            max-height: fit-content;
-            overflow: auto;
-        }
-    }
+.planner .cell {
+  width: var(--column-width);
+  height: 100%;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-right: dotted 1px var(--divider-color);
+}
 
+.planner .cell:hover {
+  background-color: rgba(220,220,220,.3);
 }
 
-.kanban-column {
-    flex: 1;
-    min-width: 20rem;
-    display: flex;
-    flex-direction: column;
-    border-right: solid 1px var(--divider-color);
+.planner .cell.weekend {
+  background-color: rgba(200,200,200,.2);
 }
 
-.kanban-column.disabled {
-    pointer-events: none;
-    opacity: 0.7;
+.planner .cell.drag-over {
+  border: dashed 2px var(--divider-color);
 }
 
-.kanban-column.dragOver {
-    background-color: rgba(100, 100, 100, .1);
+.event-card {
+  width: 100%;
+  border: solid 1px var(--divider-color);
+  border-radius: 3px;
+  padding: .1rem .5rem;
+  font-size: .8rem;
+  font-weight: 500;
+  color: var(--text-color-light);
 }
 
-.kanban-column.min {
-    flex: 0;
-    min-width: 4rem;
+.event-card:hover {
+  cursor: pointer;
+  border: solid 2px var(--divider-color);
+}
+.uploader {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
-.kanban-column>header {
-    height: 5rem;
-    border-bottom: solid 1px var(--divider-color);
-    display: flex;
-    align-items: flex-start;
-    padding: 1rem;
-    background-color: var(--paper-color);
+.demo-uploader {
+  width: 40rem;
+  height: 30rem;
+  margin: 5rem auto;
+  flex-direction: column;
 }
 
-.kanban-column>header>.title {
-    padding: 0 1rem;
-    flex: 1;
-    display: flex;
-    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;
 }
 
-.kanban-column>header>i,
-.kanban-column>footer>button {
-    color: rgba(100, 100, 100, .6);
+.upload-area6 > label {
+  font-size: 1.1rem;
+  font-weight: 500;
 }
 
-.kanban-column>main {
-    flex: 1;
-    overflow: auto;
+.upload-area6.drag-over {
+  background-color: rgba(200, 200, 200, 0.1);
 }
 
-.kanban-column.min>main {
-    min-height: 10rem;
-    padding: 1rem;
-    writing-mode: vertical-rl;
-    color: var(--primary-color-light);
-}
+/***************** Upload File ***********************/
 
-.kanban-column>footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.upload-file {
+  display: flex;
+  align-items: center;
 }
 
-.kanban-card {
-    margin: 2rem;
-    box-shadow: var(--shadow1);
-    background-color: var(--paper-color);
-    border-radius: 5px;
-    min-height: 10rem;
+.upload-file > label {
+  min-width: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
 }
 
-.kanban-card.red {
-    border-left: solid 5px red;
+.upload-file > main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
-.secondary-text {
-    color: rgba(100, 100, 100, .8);
-}
-.avatar {
-    background-color: rgba(200,200,200,.1);
-    border: solid 3px transparent;
-    border-radius: 100%;
-    overflow: hidden;
+.upload-file .error {
+  color: red;
+  text-align: center;
 }
 
-.avatar.small {
-    width: 3rem;
-    height: 3rem;
-}
-.wait-screen {
-    position:absolute;
-    top:0px;
-    left:0px;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(200,200,200,.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.calendar {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
+.upload-file progress {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: solid 1px var(--divider-color);
 }
 
-.calendar-range-control {
-    margin: .3rem;
-    border: solid 1px var(--divider-color);
-    background-color: var(--background-color);
-    border-radius: 3px;
-    padding: .2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &>.btn {
-        flex: 1;
-        margin-left: 1rem;
-        border-radius: 2px;
-        background-color: var(--background-color);
-        &.outlined {
-            border: solid 1px var(--divider-color);
-            background-color: var(--paper-color);
-        }
-    }
+.upload-file ::-webkit-progress-bar {
+  border: solid 1px rgb(235, 235, 235);
+  background-color: rgb(241, 241, 241);
 }
 
-.year-calendar {
-    margin: 1rem;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 0rem;
+.upload-file ::-webkit-progress-value {
+  background-color: rgb(182, 182, 182);
+  opacity: 1;
 }
 
-.year-calendar>nav {
-    display: flex;
-    padding: .5rem;
-    display: flex;
-    align-items: center;
+.page6 {
+    height: 100%;
+    color: var(--text-color);
 }
 
-.year-calendar>nav>label {
-    flex: 1;
-    font-size: 1.3rem;
-    font-weight: 500;
+.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);
+    resize: horizontal;
 }
 
-.year-calendar>nav>button {
-    margin-left: 1px;
-    border-radius: 3px;
+.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);
 }
 
-.year-calendar>main {
-    flex: 1;
-    border: solid 1px var(--divider-color);
-    border-width: 1px 1px 0 0;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 1rem;
-    grid-auto-rows: minmax(12rem, auto);
-    overflow: hidden;
-    font-size: .8rem;
+.page6>nav {
+    grid-area: nav;
+    height: var(--page-nav-height);
 }
 
-.year-calendar .month-cell {
-    border-width: 0 0 1px 1px;
+.page6>main {
+    grid-area: main;
     overflow: hidden;
-    padding: .5rem;
-    text-align: right;
-    font-weight: 400;
-    
-    &>nav {
-        display: flex;
-        padding: .5rem;
-        display: flex;
-        align-items: center;
-    }
-    
-    &>header {
-        display:flex;
-
-        &>.week-day-cell {
-            flex: 1;
-            border: solid 0px var(--divider-color);
-            padding: 2px;
-            text-align: right;
-            min-width: 2rem !important;
-        }
-    }
-    
-    &>main {
-        flex: 1;
-        border: solid 0px var(--divider-color);
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        grid-gap: 0px;
-        grid-auto-rows: minmax(2rem, auto);
-        overflow: hidden;
-        font-size: .8rem;
-
-        &>.day-cell {
-            border: solid 0px;
-            padding: .5rem;
-            text-align: right;
-            min-height: 1rem;
-            width: 1rem;
-            min-width: 1rem !important;
-            font-weight: 400;
-            color: var(--text-color);
-        }
-
-
-        &>.day-cell.other-month {
-            color: var(--text-color-lighter);
-        }
-
-    }
 }
 
-
-
-.month-calendar { 
-    margin: 1rem;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 0rem;
-
+.page6>aside {
+    grid-area: aside;
+    width: var(--page-aside-width);
+    color: var(--page-aside-color);
+    background-color: var(--page-aside-bgcolor);
 }
 
-.month-calendar>nav {
-    display: flex;
-    padding: .5rem;
-    display: flex;
-    align-items: center;
+.page6>footer {
+    grid-area: footer;
+    min-height: var(--page-footer-height);
 }
 
-.month-calendar>nav>label {
-    flex: 1;
-    font-size: 1.3rem;
-    font-weight: 500;
+:root {
+    --timeout: 800ms;
 }
 
-.month-calendar>nav>button {
-    margin-left: 1px;
-    border-radius: 3px;
+.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;
 }
 
-.month-calendar>header {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    font-size: .8rem;
+.workspace>nav {
+    min-height: 3rem;
 }
 
-.month-calendar>main {
-    flex: 1;
-    border: solid 1px var(--divider-color);
-    border-width: 1px 1px 0 0;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-gap: 0px;
-    grid-auto-rows: minmax(5rem, auto);
-    overflow: hidden;
-    font-size: .8rem;
+.workspace>main {
+    resize: horizontal;
 }
 
-.week-day-cell {
-    border: solid 0px var(--divider-color);
-    padding: 2px;
-    text-align: right;
-    min-width: 5rem;
+.workspace>aside {
+    width: 100%;
 }
 
-.day-cell {
-    border: solid 1px var(--divider-color);
-    border-width: 0 0 1px 1px;
-    padding: .5rem;
-    text-align: right;
-    min-height: 6rem;
-    min-width: 5rem;
-    font-weight: 400;
+.overall {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left:0;
+    right: 0;
+    background-color: var(--background-color);
 }
 
-.day-cell.today>header {
-    border-bottom: solid 2px var(--primary-color);
-    padding: .3rem;
-    font-weight: 600;
+.site6 {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: auto 1fr 1fr auto;
+    grid-template-rows: var(--site-header-height) 1fr auto auto;
+    grid-template-areas: "header header nav nav" "menu main main aside" "footer footer footer footer" "console console console console";
+    background-color: var(--background-color);
 }
 
-.day-cell.other-month {
-    color: var(--text-color-lighter);
+.site6>header {
+    grid-area: header;
+    color: var(--site-header-color);
+    background-color: var(--site-header-bgcolor);
+    display: flex;
+    align-items: center;
 }
 
-.day-cell:hover {
-    background-color: rgba(200,200,200,.1);
-    cursor: pointer;
+.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;
 }
 
-.day-cell.today:hover {
-    background-color: var(--primary-color-lighter);
+.site6>nav>header {
+    flex: 1;
 }
 
-.day-cell .event {
-    background-color: var(--primary-color);
-    color: var(--primary-color-text);
-    padding: .3rem;
-    border-radius: 3px;
-    margin: 3px 1px;
-}
-.planner-box {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+.site6>menu {
+    grid-area: menu;
+    margin: 0;
+    border-right: solid 1px var(--divider-color);
+    padding: 0;
+    color: var(--site-menu-color);
+    background-color: var(--site-menu-bgcolor);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: var(--site-menu-width);
 }
 
-.planner-box > header {
-  height: 5rem;
-  border: solid 1px var(--divider-color);
-  border-bottom: 0px;
+.site6>menu>header {
+    border-bottom: solid 1px var(--divider-color);
 }
 
-.planner {
-  flex: 1;
-  border: solid 1px var(--divider-color);
-  display: flex;
-  overflow: auto;
+.site6>menu.max {
+    width: 20rem;
+}
 
-  --row-height: 6rem;
-  --column-width: 8rem;
+.site6>menu.min {
+    overflow: visible;
 }
 
-.planner > .column0 {
-  width: var(--column-width);
-  position: sticky;
-  left: 0px;
-  z-index: 11;
+.site6>menu>main {
+    padding: .4rem;
 }
 
-.planner > .column0 > .column-header {
-  width: var(--column-width);
-  height: var(--row-height);
-  position: sticky;
-  top: 0px;
-  background-color: var(--paper-color);
-  border-right: solid 1px var(--divider-color);
-  border-bottom: solid 1px var(--divider-color);
+.site6>menu>main>.section-title {
+    width: 100%;
+    font-size: .7rem;
+    font-weight: 400;
+    padding: .5rem .7rem;
 }
 
-.planner .date-header.thisWeek {
-  background-color: rgb(10, 176, 35);
-  border-radius: 3px;
-  padding: .2rem;
-  color: var(--paper-color);
+.site6>menu>main>.section-title.min {
+    border-bottom: solid 1px var(--divider-color);
+    max-height: 1px
 }
 
-.planner .row-header {
-  width: var(--column-width);
-  background-color: var(--paper-color);
-  height: var(--row-height);
-  border-bottom: solid 1px var(--divider-color);
-  border-right: solid 1px var(--divider-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.site6>menu>main>.site-menu-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
 }
 
-.planner > .rows {
-  overflow: visible;
+.site6>menu.min .site-menu-item {
+    justify-content: center;
 }
 
-.planner > .rows .column-header {
-  width: var(--column-width);
-  background-color: var(--paper-color);
-  height: 2.6rem;
-  padding: .5rem;
+.site6>menu.min .site-menu-item i {
+    width: 4.2rem !important;
 }
 
-.planner > .rows > .row {
-  height: var(--row-height);
-  border-bottom: solid 1px var(--divider-color);
+.site6>menu.max>main>.site-menu-item:not(.selected):hover {
+    color: var(--text-color);
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer;
 }
 
-.planner > .rows > .row0 {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  height: 3rem;
-  background-color: var(--paper-color);
-  border-bottom: solid 1px var(--divider-color);
+.site6>menu>main>.site-menu-item.selected {
+    color: var(--accent-color-text);
+    background-color: var(--accent-color);
+    border-radius: .5rem;
 }
 
-.planner > .rows > .row1 {
-  position: sticky;
-  top: 3rem;
-  z-index: 10;
-  height: 3rem;
-  background-color: var(--paper-color);
-  border-bottom: solid 1px var(--divider-color);
+.site6>menu>main {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.planner .cell {
-  width: var(--column-width);
-  height: 100%;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  border-right: dotted 1px var(--divider-color);
+.site6>menu.min>main {
+    flex: 1;
+    overflow-x: visible;
+    overflow-y: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.planner .cell:hover {
-  background-color: rgba(220,220,220,.3);
+.site6>main {
+    grid-area: main;
+    overflow: hidden;
+    resize: horizontal;
 }
 
-.planner .cell.weekend {
-  background-color: rgba(200,200,200,.2);
+.site6>aside {
+    grid-area: aside;
+    color: var(--site-aside-color);
+    background-color: var(--site-aside-bgcolor);
 }
 
-.planner .cell.drag-over {
-  border: dashed 2px var(--divider-color);
+.site6>footer {
+    grid-area: footer;
 }
 
-.event-card {
-  width: 100%;
-  border: solid 1px var(--divider-color);
-  border-radius: 3px;
-  padding: .1rem .5rem;
-  font-size: .8rem;
-  font-weight: 500;
-  color: var(--text-color-light);
+.site6>.site-console {
+    grid-area: console;
+    min-height: 20rem;
+    background-color: rgb(222, 222, 222);
+    color: #000;
 }
 
-.event-card:hover {
-  cursor: pointer;
-  border: solid 2px var(--divider-color);
+.site6>.site-console>nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
-.page6 {
-    height: 100%;
-    color: var(--text-color);
+
+.site6>.site-console>main {
+    overflow: scroll;
+    max-height: 40vh;
+    display: flex;
+    flex-direction: column-reverse;
 }
 
-.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);
-    resize: horizontal;
+.site6>.site-console>main>div {
+    padding: 1rem;
+    border-bottom: dotted 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);
+.site6>.site-preview {
+    position: absolute;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--site-preview-background, rgba(0, 0, 0, 0.32));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-.page6>nav {
-    grid-area: nav;
-    height: var(--page-nav-height);
+.site-error-fallback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--background-color);
 }
 
-.page6>main {
-    grid-area: main;
-    overflow: hidden;
+.site-error-fallback > dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    background-color: var(--paper-color);
+    box-shadow: var(--shadow1);
+
+    border: solid 1px black;
+}
+.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;
 }
 
-.page6>aside {
-    grid-area: aside;
-    width: var(--page-aside-width);
-    color: var(--page-aside-color);
-    background-color: var(--page-aside-bgcolor);
+.overlay.prompt {
+  z-index: 1000;
 }
 
-.page6>footer {
-    grid-area: footer;
-    min-height: var(--page-footer-height);
+.dialog-panel.prompt {
+  z-index: 1010;
 }
 
-:root {
-    --timeout: 800ms;
+.dialog-panel {
+  z-index: 110;
+  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;
+  border: solid 1px var(--divider-color);
 }
 
-.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;
+.dialog-panel > header {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem;
+  display: flex;
 }
 
-.workspace>nav {
-    min-height: 3rem;
+.dialog-panel > main {
+  flex: 1;
+  padding: 1rem;
 }
 
-.workspace>main {
-    resize: horizontal;
+.dialog-panel > footer {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.workspace>aside {
-    width: 100%;
+.dialog-panel > footer button {
+  min-width: 5rem;
+}
+.view {
+    flex: 1;
+    border: solid 1px rgb(200,200,200);;
+    display: flex;
+    flex-direction: column;
 }
 
-.overall {
-    position: absolute;
-    top:0;
-    bottom: 0;
-    left:0;
-    right: 0;
-    background-color: var(--background-color);
+.view>header {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    background-color: rgb(200,200,200);
+    min-height: 2rem;
+    height: 2.5rem;
+    max-height: 2.5rem;
 }
 
-.site6 {
-    width: 100vw;
-    height: 100vh;
-    display: grid;
-    grid-template-columns: auto 1fr 1fr auto;
-    grid-template-rows: var(--site-header-height) 1fr auto auto;
-    grid-template-areas: "header header nav nav" "menu main main aside" "footer footer footer footer" "console console console console";
-    background-color: var(--background-color);
+.view>header>.icon {
+    height: 2.4rem;
+    width: 3rem
 }
 
-.site6>header {
-    grid-area: header;
-    color: var(--site-header-color);
-    background-color: var(--site-header-bgcolor);
+.view>header>label {
+    flex: 1;
+    height: 100%;
     display: flex;
     align-items: center;
 }
 
-.site6>nav {
-    grid-area: nav;
-    color: var(--site-nav-color);
-    background-color: var(--site-nav-bgcolor);
+.view>nav {
+    min-height: 2rem;
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-    padding-right: 1rem;
+    justify-content: flex-end;
+    background-color: rgb(230,230,230);
 }
 
-.site6>nav>header {
+.view>nav>* {
+    border-radius: 0px !important;
+}
+
+.view>main {
     flex: 1;
+    height: 100%;
 }
 
-.site6>menu {
-    grid-area: menu;
-    margin: 0;
-    border-right: solid 1px var(--divider-color);
-    padding: 0;
-    color: var(--site-menu-color);
-    background-color: var(--site-menu-bgcolor);
+.view>footer {
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    width: var(--site-menu-width);
+    align-items: center;
+    background-color: rgb(230,230,230);
 }
-
-.site6>menu>header {
-    border-bottom: solid 1px var(--divider-color);
+.file-explorer {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-areas:
+        "menu nav"
+        "menu main";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    padding: 2px;
 }
 
-.site6>menu.max {
-    width: 20rem;
+.file-explorer>nav {
+    grid-area: nav;
+    display: flex;
 }
 
-.site6>menu.min {
-    overflow: visible;
+.file-explorer>menu {
+    grid-area: menu;
+    padding: 0;
+    margin: 0;
+    width: 20rem;
+    background-color: var(--background-color);
 }
 
-.site6>menu>main {
-    padding: .4rem;
+.file-explorer>main {
+    grid-area: main;
+    display: flex-wrap;
+    flex-direction: column;
+    overflow: hidden;
 }
 
-.site6>menu>main>.section-title {
-    width: 100%;
-    font-size: .7rem;
-    font-weight: 400;
-    padding: .5rem .7rem;
+.file-explorer>aside {
+    grid-area: aside;
 }
 
-.site6>menu>main>.section-title.min {
-    border-bottom: solid 1px var(--divider-color);
-    max-height: 1px
+.file-explorer>footer {
+    grid-area: footer;
 }
 
-.site6>menu>main>.site-menu-item {
-    width: 100%;
+.file-searchbox {
+    height: 3rem;
     display: flex;
     align-items: center;
-}
-
-.site6>menu.min .site-menu-item {
     justify-content: center;
+    padding: 0 1rem;
 }
 
-.site6>menu.min .site-menu-item i {
-    width: 4.2rem !important;
+.folder-header {
+    flex: 1;
+    display: flex;
+    height: 3rem;
+    align-items: center;
+    padding: 0 1rem;
 }
 
-.site6>menu.max>main>.site-menu-item:not(.selected):hover {
-    color: var(--text-color);
-    background-color: rgba(200,200,200,.2);
-    cursor: pointer;
+.folder-title {
+    font-size: 1.1rem;
+    font-weight: 500;
 }
 
-.site6>menu>main>.site-menu-item.selected {
-    color: var(--accent-color-text);
-    background-color: var(--accent-color);
-    border-radius: .5rem;
+.folder-actions {
+    display: flex;
+    gap: .5rem;
+    color: var(--text-color-lighter);
 }
 
-.site6>menu>main {
+.files-grid {
     flex: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: auto;
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    flex-wrap: wrap;
+    gap: .5rem;
 }
 
-.site6>menu.min>main {
-    flex: 1;
-    overflow-x: visible;
-    overflow-y: visible;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.file-item {
+    margin: .5rem;
+    width: 8rem;
+    height: 10rem;
+    position: relative;
+    display: grid;
+    grid-template-areas:
+    "picture picture"
+    "main aside";
+    grid-template-columns: 1fr auto;
 }
 
-.site6>main {
-    grid-area: main;
-    overflow: hidden;
-    resize: horizontal;
+.file-item--selected {
+    box-shadow: var(--shadow1);
 }
 
-.site6>aside {
-    grid-area: aside;
-    color: var(--site-aside-color);
-    background-color: var(--site-aside-bgcolor);
+.file-item:hover {
+    cursor: pointer;
+    border: dotted 1px var(--divider-color);
 }
 
-.site6>footer {
-    grid-area: footer;
+.file-item>picture {
+    grid-area: picture;
+    height: 7rem;
+    flex: 1;
+    padding: 0 1rem;
 }
 
-.site6>.site-console {
-    grid-area: console;
-    min-height: 20rem;
-    background-color: rgb(222, 222, 222);
-    color: #000;
+.file-item>picture>img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
 }
 
-.site6>.site-console>nav {
+.file-item>main {
+    grid-area: main;
+    height: 3rem;
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    flex-direction: column;
+    padding-left: 1rem;
 }
 
-.site6>.site-console>main {
-    overflow: scroll;
-    max-height: 40vh;
-    display: flex;
-    flex-direction: column-reverse;
+.file-item-title {
+    font-size: 1rem;
+    color: var(--text-color);
+    font-weight: 500;
 }
 
-.site6>.site-console>main>div {
-    padding: 1rem;
-    border-bottom: dotted 1px var(--divider-color);
+.file-item-subtitle {
+    font-size: .8rem;
+    color: var(--text-color-lighter);
 }
 
-.site6>.site-preview {
-    position: absolute;
-    z-index: 10;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--site-preview-background, rgba(0, 0, 0, 0.32));
+.file-item>aside {
+    grid-area: aside;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    height: 3rem;
 }
-
-.site-error-fallback {
+.empty {
+    width: 100%;
+    height: 100%;
+    flex: 1 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
-    height: 100vh;
-    width: 100vw;
-    background-color: var(--background-color);
+    align-items: center;
+    color: var(--text-color-lighter);
 }
 
-.site-error-fallback > dialog {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    height: 50%;
+.empty i {
+    width: 4rem
+}
+.datatable8 {
+    border: solid 0px var(--divider-color);
     background-color: var(--paper-color);
-    box-shadow: var(--shadow1);
+    overflow: auto;
+    max-height: 100%;
+    width: 100%;
+}
 
-    border: solid 1px black;
+.datatable8.outlined {
+    border: solid 1px var(--divider-color);
 }
-.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;
+
+.datatable8 table {
+    width: 100%;
 }
 
-.overlay.prompt {
-  z-index: 1000;
+.datatable8 thead  {
+    position: sticky;
+    top: 0px;
+    overflow: hidden;
+    color: var(--text-color-light);
+    z-index: 10;
 }
 
-.dialog-panel.prompt {
-  z-index: 1010;
+.datatable8 thead th {
+    height: 2.1rem;
+    padding: 0 1rem;
+    text-align: left;
+    font-weight: 600 !important;
+    border-bottom: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
 }
 
-.dialog-panel {
-  z-index: 110;
-  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;
-  border: solid 1px var(--divider-color);
+.datatable8 thead th>div {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-transform: uppercase;
+    font-size: .8rem;
 }
 
-.dialog-panel > header {
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 1rem;
-  display: flex;
+.datatable8 tbody {
+    overflow: visible;
+    height: 5rem;
 }
 
-.dialog-panel > main {
-  flex: 1;
-  padding: 1rem;
+.datatable8 tbody tr.selected {
+    background-color: rgba(200,200,200,.6);
 }
 
-.dialog-panel > footer {
-  padding: 1rem;
-  display: flex;
-  justify-content: flex-end;
+.datatable8 tbody tr:hover {
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer
 }
 
-.dialog-panel > footer button {
-  min-width: 5rem;
+.datatable8 tbody tr.selected:hover {
+    background-color: rgba(200,200,200,.4);
 }
-.view {
-    flex: 1;
-    border: solid 1px rgb(200,200,200);;
-    display: flex;
-    flex-direction: column;
+
+.datatable8 tbody td {
+    height: 3rem;
+    padding: 0 1rem;
+    overflow: visible;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 10rem;
+    color: var(--text-color-light);
+}   
+
+.datatable8 tbody td.index {
+    width: 3rem;
+    overflow: hidden;
+    color: var(--text-color-lighter);
 }
 
-.view>header {
-    width: 100%;
-    display: flex;
-    align-items: flex-end;
-    background-color: rgb(200,200,200);
-    min-height: 2rem;
-    height: 2.5rem;
-    max-height: 2.5rem;
+.datatable8 tbody td.checked
+ {
+    width: 3rem;
+    overflow: hidden;
+ }
+
+ .datatable8 tbody td.checked .checkmark {
+    border-color: var(--text-color-lighter) !important;
 }
 
-.view>header>.icon {
-    height: 2.4rem;
-    width: 3rem
+.datatable8 .string-viewer img {
+    height: 5rem;
 }
 
-.view>header>label {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    align-items: center;
+.datatable8 th.resizable-column {
+    resize: horizontal;
+    overflow: hidden;
 }
-
-.view>nav {
-    min-height: 2rem;
+.tokenField {
+    min-height: 3.8;
+    position: relative;
+    border-bottom: solid 1px var(--divider-color);
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    background-color: rgb(230,230,230);
+    margin: 1rem 0 0 0;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.view>nav>* {
-    border-radius: 0px !important;
+.tokenField>label {
+    color: var(--primary-color);
+    font-size: .8rem;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    top:-9px;
+    padding: 2px 6px 2px 4px;
 }
 
-.view>main {
+.tokenField input,
+.tokenField .dropdown {
+    border: 0px;
+    padding: .5rem 0;
+    font-size: 1rem;
     flex: 1;
-    height: 100%;
+    min-width: 3rem;
 }
 
-.view>footer {
-    width: 100%;
+.token {
     display: flex;
+    border: solid 1px var(--divider-color);
+    background-color: rgba(200,200,200,.1);
     align-items: center;
-    background-color: rgb(230,230,230);
-}
-.file-explorer {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-areas:
-        "menu nav"
-        "menu main";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    padding: 2px;
-}
-
-.file-explorer>nav {
-    grid-area: nav;
-    display: flex;
+    padding: .2rem .2rem .2rem .4rem;
+    border-radius: .3rem !important;
+    margin: .2rem;
+    max-height: 2rem;
 }
 
-.file-explorer>menu {
-    grid-area: menu;
-    padding: 0;
-    margin: 0;
-    width: 20rem;
-    background-color: var(--background-color);
+.token > div {
+    white-space: nowrap;
 }
 
-.file-explorer>main {
-    grid-area: main;
-    display: flex-wrap;
-    flex-direction: column;
-    overflow: hidden;
+.token button {
+    width: 2rem;
+    height: 1.6rem;
+    font-size: .8rem !important;
+    padding: 0 !important;
+    margin-left: .2rem;
 }
-
-.file-explorer>aside {
-    grid-area: aside;
+.tree {
+    padding: .5rem 0;
 }
 
-.file-explorer>footer {
-    grid-area: footer;
+.tree-node {
+    margin: 0;
+    padding: 0;
+    padding-left: 1rem;
 }
 
-.file-searchbox {
-    height: 3rem;
+.tree-item{
+    margin: 0;
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: 0 1rem;
+    font: 1rem;
+    color: var(--text-color-light);
 }
 
-.folder-header {
-    flex: 1;
-    display: flex;
-    height: 3rem;
-    align-items: center;
-    padding: 0 1rem;
+.tree-item:hover {
+    cursor: pointer;
+    background-color: var(--background-color);
+    font-weight: 500;
+} 
+
+.tree-item.final {
+    margin-left: 1rem;
+    padding-left: 1rem;
 }
 
-.folder-title {
-    font-size: 1.1rem;
+.tree-item.selected {
+    color: var(--accent-color-text);
+    background-color: var(--accent-color);
     font-weight: 500;
-}
+} 
 
-.folder-actions {
-    display: flex;
-    gap: .5rem;
-    color: var(--text-color-lighter);
+.tree-item>i {
+    padding-left: .3rem;
 }
 
-.files-grid {
-    flex: 1;
-    overflow: auto;
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem;
+.tree-item>.label {
+    padding-left: .8rem;
+    width: 100%;
 }
 
-.file-item {
-    margin: .5rem;
-    width: 8rem;
-    height: 10rem;
-    position: relative;
-    display: grid;
-    grid-template-areas:
-    "picture picture"
-    "main aside";
-    grid-template-columns: 1fr auto;
+.tree-item>.label.clickable:hover {
+    cursor: pointer;
+    color: var(--accent-color);
 }
 
-.file-item--selected {
-    box-shadow: var(--shadow1);
+.tree-item>.actions {
+    padding: 0 .5rem;
+    color: var(--text-color-lighter);
 }
 
-.file-item:hover {
-    cursor: pointer;
-    border: dotted 1px var(--divider-color);
+.tree-item>.actions .rmwc-icon {
+    padding: 0;
+    font-size: 1rem;
+    width: 2rem;
+    height: 2rem;
 }
 
-.file-item>picture {
-    grid-area: picture;
-    height: 7rem;
-    flex: 1;
-    padding: 0 1rem;
+.tree-node>summary::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 10px;
+    color: rgba(0,0,0,.3);
 }
 
-.file-item>picture>img {
+details[open].tree-node>summary::before {
+	transform: rotate(90deg)
+}
+.thumbnail {
     width: 100%;
+    min-width: 3rem;
+    max-width: 6rem;
+
     height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
+    min-height: 3rem;
+    max-height: 6rem;
+    
+    overflow: hidden;
 }
 
-.file-item>main {
-    grid-area: main;
-    height: 3rem;
+.thumbnail>img {
+    width: 100%;
+    height: 100%;
+}
+.color-field {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    padding-left: 1rem;
+    align-items: flex-end;
+    padding: .5rem;
+    overflow: hidden;
+    display: flex;
+    max-height: 3.5rem;
+    min-height: 3.5;
 }
 
-.file-item-title {
-    font-size: 1rem;
-    color: var(--text-color);
-    font-weight: 500;
+.color-field>label { 
+    flex:1;
+    color: var(--primary-color);
+    font-size: .9rem;
+    font-weight: normal;
+    pointer-events: none;
 }
-
-.file-item-subtitle {
-    font-size: .8rem;
-    color: var(--text-color-lighter);
+.multiselector {
+  display: flex;
+  flex-flow: wrap;
+  padding: 1rem
 }
 
-.file-item>aside {
-    grid-area: aside;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 3rem;
-}
-.empty {
-    width: 100%;
-    height: 100%;
-    flex: 1 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: var(--text-color-lighter);
+.multiselector>li {
+  color: var(--primary-color, blue);
+  border: solid 1px var(--primary-color, blue);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .3rem .9rem;
 }
 
-.empty i {
-    width: 4rem
+li.selected {
+  color: var(--paper-color);
+  background-color: var(--primary-color);
 }
+
 /**************************************/
 /*********** content-editor ***********/
 /**************************************/