* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

@font-face {
  font-family: "Nunito";
  src:
    local("Nunito"),
    url("Nunito-VariableFont_wght.ttf") format("truetype"),
    url("Nunito-Italic-VariableFont_wght.ttf") format("truetype")
}

@font-face {
  font-family: "Inter";
  src:
    local("Inter"),
    url("Inter-VariableFont_opsz_wght.ttf") format("truetype")
    url("Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype"),
}

body {
  /*--font-family: "Inter", sans-serif;*/
  --font-family: "Nunito", sans-serif;
  --font-weight:400;
  --font-size:1rem;
  --line-height:1.5;
  
  --color:#333;
  --border-color-main:#dadce0;
  --background-color:#fff;
  --background-color-aside:#f9f9f9;
  --background-color-dialog:rgb(0 0 0 / .2);
  --background-color-dialog-main:#fff;
  --background-color-input-submit:#f1f1f1;
  --background-color-input-submit-hover:#f9f9f9;
  --background-color-input-text:#fff;
  --background-color-input-text-hover:#fff;
  
  --background-color-dir-icon:#a1c6ea;
  --background-color-dir-icon-top:#71a5de;
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#f8f9fb;
  --background-color-add-dir-icon-top:#e1ecf7;
  
  --stroke-svg-icon:#444;
  
  --color-a-aside:#333;
  --color-a-aside-hover:#000;
  
  --color-contrast:#fff;
  --color-pale:#555;
  
  --background-color-categories-tree:#f1f1f1;
  
  --background-color-checkbox:#3b82f6;
  
  background-color:var(--background-color);
  font-family:var(--font-family);
  font-optical-sizing: auto;
  font-weight:var(--font-weight);
  font-style:normal;
  padding:0; 
  margin:0;
  -webkit-text-size-adjust:100%;
  font-size:var(--font-size);
  line-height:var(--line-height);
  color:var(--color);
  
  transition:0.4s ease;
}

body.light-blue {
  --color:#333;
  --border-color-main:#dadce0;
  --background-color:#f4fcfe;
  --background-color-aside:#effbfd;
  --background-color-dialog:rgb(0 0 0 / .4);
  --background-color-dialog-main:#effbfd;
  --background-color-input-submit:#f1f1f1;
  --background-color-input-submit-hover:#f9f9f9;
  --background-color-input-text:#fff;
  --background-color-input-text-hover:#fff;

  --background-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-dir-icon-top:rgb(0 0 0 / 0.3);
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#f9f9f9;
  --background-color-add-dir-icon-top:#eee;
  
  --stroke-svg-icon:#444;
  
  --color-a-aside:#333;
  --color-a-aside-hover:#000;
  
  --color-contrast:#fff;
  --color-pale:#555;
  
  --background-color-categories-tree:#f1f1f1;
  
  --background-color-checkbox:#3b82f6;
  
}

body.light-yellow {
  --color:#333;
  --border-color-main:#dadce0;
  --background-color:#fdf9e7;
  --background-color-aside:#fdf8e1;
  --background-color-dialog:rgb(0 0 0 / .4);
  --background-color-dialog-main:#fdf8e1;
  --background-color-input-submit:#f0ebd7;
  --background-color-input-submit-hover:#f0ebd7;
  --background-color-input-text:#fdf9e7;
  --background-color-input-text-hover:#fdf9e7;

  --background-color-dir-icon:#ffe566;
  --background-color-dir-icon-top:#ffd400;
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#fff6cc;
  --background-color-add-dir-icon-top:#ffee99;
  
  --stroke-svg-icon:#444;
  
  --color-a-aside:#333;
  --color-a-aside-hover:#000;
  
  --color-contrast:#fff;
  --color-pale:#555;
  
  --background-color-categories-tree:#f0ebd7;
  
  --background-color-checkbox:#ff7b00;
}

body.dark-blue {
  --color:#fff;
  --border-color-main:#081013;
  --background-color:#162C35;
  --background-color-aside:#142830;
  --background-color-dialog:rgb(0 0 0 / .7);
  --background-color-dialog-main:#2c3e45;
  --background-color-input-submit:#12232a;
  --background-color-input-submit-hover:#12232a;
  --background-color-input-text:#142830;
  --background-color-input-text-hover:#142830;
  
  --background-color-dir-icon:#6fd2ff;
  --background-color-dir-icon-top:#59a8cc;
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#d4f2ff;
  --background-color-add-dir-icon-top:#a9e4ff;
  
  --stroke-svg-icon:#999;
  
  --color-a-aside:#fff;
  --color-a-aside-hover:#999;
  
  --color-contrast:#333;
  --color-pale:#b2b2b2;
  
  --background-color-categories-tree:#12232a;
  
  --background-color-checkbox:#3b82f6;
}

body.dark-green {
  --color:#fff;
  --border-color-main:#081013;
  --background-color:#151c0c;
  --background-color-aside:#13190b;/*141b0c*/
  --background-color-dialog:rgb(0 0 0 / .4);
  --background-color-dialog-main:#2b3023;
  --background-color-input-submit:#0c1007;
  --background-color-input-submit-hover:#0c1007;
  --background-color-input-text:#12180a;
  --background-color-input-text-hover:#142830;
  
  --background-color-dir-icon:#ffe566;
  --background-color-dir-icon-top:#ffd400;
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#fff6cc;
  --background-color-add-dir-icon-top:#ffee99;
  
  --stroke-svg-icon:#999;
  
  --color-a-aside:#fff;
  --color-a-aside-hover:#999;
  
  --color-contrast:#333;
  --color-pale:#b2b2b2;
  
  --background-color-categories-tree:#0c1007;
  
  --background-color-checkbox:#f48c06;
}

body.dark {
  --color:#fff;
  --border-color-main:#081013;
  --background-color:#151515;
  --background-color-aside:#111;
  --background-color-dialog:rgb(0 0 0 / .4);
  --background-color-dialog-main:#222;
  --background-color-input-submit:#000;
  --background-color-input-submit-hover:#000;
  --background-color-input-text:#111;
  --background-color-input-text-hover:#111;
  
  --background-color-dir-icon:#6fd2ff;
  --background-color-dir-icon-top:#59a8cc;
  --box-shadow-color-dir-icon:rgb(0 0 0 / 0.2);
  --background-color-add-dir-icon:#d4f2ff;
  --background-color-add-dir-icon-top:#a9e4ff;
  
  --stroke-svg-icon:#999;
  
  --color-a-aside:#fff;
  --color-a-aside-hover:#999;
  
  --color-contrast:#333;
  --color-pale:#b2b2b2;
  
  --background-color-categories-tree:#000;
  
  --background-color-checkbox:#3b82f6;
}


/* label: checkbox, radio */
label.check {
  align-items:center;
  display:inline-flex;
  cursor:pointer;
  transition:0.4s ease;
}
label.check:hover {
  opacity:.8;
}
label.check input[type="checkbox"],
label.check input[type="radio"] {
  display:none;
}
label.check div.square,
label.check div.circle {
  border:1px solid Grey;
  margin-right:0.5rem;
}
label.check div.square {
  border-radius:2px;
  padding:2px;
}
label.check div.square > div {
  border-radius:2px;
}
label.check div.circle {
  border-radius:50%;
  padding:2px;
}
label.check div.circle > div {
  border-radius:50%;
}
label.check div.check {
  background-color:transparent;
  height:10px;
  width:10px;
  -webkit-transition:.2s ease; 
  transition:.2s ease;
}
label.check input:hover + div div {

  background-color:#777;
}
label.check input:checked + div div {
  background-color:var(--background-color-checkbox);
}
label span {font-weight:bold}



input, select {padding:10px 20px;}
textarea {font-family:var(--font-family);}

input[type="submit"] {
  cursor:pointer;
  border:1px solid var(--border-color-main);
  background-color:var(--background-color-input-submit);
  letter-spacing:1px;
  transition:0.4s;
}
input[type="submit"]:hover {
  background-color:var(--background-color-input-submit-hover);
}
input[type="text"], textarea {
  background-color:var(--background-color-input-text);
}
input[type="text"], input[type="submit"], input[type="datetime-local"], textarea {
  border:1px solid var(--border-color-main);
  border-radius:0.3rem;
  color:var(--color);
}
input[type="file"] {
  display:none;
}

a {
  background-color:transparent;
  text-decoration:none;
  color:inherit;
}

svg {
  display:block;
}

#app {
  width:100%;
  height:100%;
}

main {
  
}

aside {
  display:block;
  width:300px;
}
aside .main {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-direction:column;
  width:inherit;
  height:100vh;
  background-color:var(--background-color-aside);
  position:fixed;
  top:0;
  left:0;
  border-right:1px solid var(--border-color-main);
}
aside .header {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:1rem;
}
aside .header div:first-child {
  flex:1;
}
aside div.top {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  margin:1rem 0 1rem 0;
}
aside div.top svg path,
aside div.top svg {
  width:24px;
  stroke:var(--stroke-svg-icon);
  display:block;
}
aside div.top div a {
  display:block;
  padding:0.6rem;
  border-radius:100%;
  background-color:rgb(0 0 0 /.04);
  transition:.4s;
}
aside div.top div a:hover {
  background-color:rgb(0 0 0 /.1);
}
aside a.homepage {
  display:block;
  width:20px;
}
aside a.homepage svg path {
  stroke:var(--stroke-svg-icon);
}
aside a.homepage svg {
  width:100%;
  fill:transparent;
  stroke:var(--stroke-svg-icon);
}
aside nav {
  padding:2rem;
  width:100%;
  flex:1;
}
aside nav a svg {
  width:24px;
  /*fill:var(--color);*/
  color:var(--color);
  fill:transparent;
  stroke:var(--stroke-svg-icon);
}
aside nav a svg path {
  stroke:var(--stroke-svg-icon);
}
aside nav a.sub svg {
  opacity:.4;
}
aside nav a.sub:hover svg {
  opacity:1;
}
aside nav > div {
  display:flex;
  width:100%;
}
aside nav > div a:first-child {
  flex:1;
}
aside nav a {
  display:flex;
  align-items:center;
  gap:0.6rem;
  /*padding:0 4rem 0 3rem;*/
  margin:0 0 1rem 0;
  font-weight:400;
  color:var(--color);
  letter-spacing:0.0125rem;
}
aside nav a:hover {
  color:var(--color-a-aside-hover);
}
aside .footer {
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:1rem;
}

aside .footer .space {
  flex:1;
}
aside .footer .settings {
  
}

aside .footer .colors {
  cursor:pointer;
}
aside .footer .color-schemes {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  display: grid; 
  grid-column-gap: 1rem; 
  grid-row-gap: 1rem; 
  grid-template-columns:repeat(6, 1fr); 
  grid-auto-rows: 1fr;
  transform: translate(0, -100%);
  
  padding:2rem;
  
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
aside .footer .color-schemes > span {
  border-radius:100%;
  aspect-ratio:1;
  border:1px solid var(--color);
}

aside .footer svg {
  width:24px;
  /*fill:var(--color);*/
  color:var(--color);
  fill:transparent;
  stroke:var(--stroke-svg-icon);
}
aside .footer svg g {
}
aside .footer svg path {
  stroke:var(--stroke-svg-icon);
}
aside .footer div.profile svg {
  width:32px;
  border-radius:100%;
  border:1px solid rgb(0 0 0 / 0.3);
  padding:0.1rem;
}
aside .footer .color-schemes .light {background-color:#ffffff;}
aside .footer .color-schemes .light-blue {background-color:#f4fcfe;}
aside .footer .color-schemes .light-yellow {background-color:#fdf9e7;}
aside .footer .color-schemes .dark {background-color:#151515;}
aside .footer .color-schemes .dark-blue {background-color:#162C35;}
aside .footer .color-schemes .dark-green {background-color:#151c0c;}

aside .footer form label {cursor:pointer;}
aside .footer form label input {display:none;}

form h1.header {
  /*background-color:#f1f1f1;*/
  margin:0;
  padding:0;
}
form h1.header > div {
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  height:auto;
}
form h1.header input[name="title"] {
  color:var(--color);
  padding:1rem 1.5rem;
  flex:1;
  font-size:2rem;
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  align-self:stretch;
  border:1px solid var(--border-color-main);
}
form h1.header input[name="title"]:focus {
  border:1px solid var(--border-color-main);
  outline:1px solid var(--border-color-main);
}
form h1.header input[name="save"] {
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  align-self:stretch;
  padding:1rem 1.5rem;
}
form h1.header input[name="save"].loading {
  color:Blue;
  display:block;
  position:relative;
}
form h1.header input[name="save"].loading:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

form h1.header > div:nth-child(2) {

}

form h1.header input {
  margin:0;
  padding:0;
}

form .main {
  display:flex;
}
form .main > div {
  padding:2rem;
}
form .main > div:first-child {
  flex:2;
}
form .main > div:last-child {
  flex:1;
  border-left:1px solid var(--border-color-main);
}

form textarea {
  display:block;
  width:100%;
  color:var(--color);
  /*border:1px solid #e1e1e1;
  outline:none;*/
}

form .translations {
  
}
form .translations .current {
  border-bottom:0.1rem solid #555;
}

form input[type="text"].number {
  text-align:center;
}

li label {
  all:unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin:0 0 0.5rem 0;
}
li label div {
  height:100%;
  display:flex;
  align-items:center;
}
li label div input {
  padding:0;
  margin:0;
}

.categories-tree {
  background-color:var(--background-color-categories-tree);
  padding:1rem;
  border-radius:0.5rem;
}
.categories-tree b {
  display:inline-block;
  margin:0 0 1rem 0;
}
.categories-tree ul {
  list-style-type:none;
  padding:0 0 0 1rem;
  margin:0;
}

.flex {
  display:flex;
  align-items:center;
}

main > h1 {
  padding:1rem 2rem;
  margin:0 0 1rem 0;
  border-bottom:1px solid var(--border-color-main);
  display:flex;
  align-items:center;
}

main > h1 .path {
  color:#999;
  padding:0 0.5rem;
}

label.upload, main > h1 a.new {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  font-size:0.8rem;
}

dialog.file, dialog.dir, dialog.uploads, dialog.source {
  width:100vw;
  height:100vh;
  padding:0;
  margin:0;
  position:fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  border:none;
  opacity:0;
  z-index:-1;
  background-color:var(--background-color-dialog);
  backdrop-filter: blur(0.175rem);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color);
}

dialog.uploads .main,
dialog.file .main,
dialog.dir .main,
dialog.source .main {
  background-color:var(--background-color-dialog-main);/**/
  border-radius:1rem;
  box-shadow:1px 1px 3px 0px rgb(0 0 0 / 0.6);
}

dialog.file .main {
  width:80rem;
}
dialog.dir .main {
  width:30rem;
}
dialog.uploads .main {
  width:80vw;
  height:80vh;
}

dialog.source .main {
  width:60vw;
  height:80vh;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
}
dialog.source .main h2 {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:0 0 1rem 0; 
  padding:0;
}
dialog.source .main h2 span.title {
  flex:1;
}
dialog.source .main h2 span:not(.title) {
  color:#999;
  font-size:70%;
  font-weight:normal;
  padding:0.1rem 0.3rem;
  cursor:pointer;
}
dialog.source .main textarea {
  flex-grow:1;
}

dialog.uploads .main h2 {
  margin:0 0 2rem 0;
  padding:0;
}
dialog.uploads .main h2 span:hover,
h1 span.path a:hover {
  color:#333;
  cursor:pointer;
}
dialog.uploads .main #uploads {
  padding:0;
  margin:0;
}

dialog.file[open], dialog.dir[open], dialog.uploads[open], dialog.source[open] {
  animation:dialogOpen 0.3s ease-in forwards;
}
@keyframes dialogOpen {
  0% {z-index:-1; opacity:0;}
  100% {z-index:1; opacity:1;}
}
@-webkit-keyframes dialogOpen {
  0% {z-index:-1; opacity:0;}
  100% {z-index:1; opacity:1;}
}
dialog.file[open] .main, 
dialog.dir[open] .main, 
dialog.uploads[open] .main, 
dialog.source[open] .main {
  animation:dialogMainOpen 0.3s ease-in forwards;
  
  overflow-y: scroll;
}
@keyframes dialogMainOpen {
  0% {
    opacity:0;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity:1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes dialogMainOpen {
  0% {
    opacity:0;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity:1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

dialog.dir .main, dialog.uploads .main, dialog.source .main {
  padding:1rem;
}
dialog.dir input[type="text"] {
  width:100%;
  text-align:center;
  margin:0 0 1rem 0;
}
dialog.dir input[type="submit"] {
  width:100%;
  margin:0;
}

dialog.file .main {
  display:flex;
  gap:1rem;
}
dialog.file .main .thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  width:40%;
}
dialog.file .main .thumb img {
  display:block;
  border-radius:0.5rem;
  width:100%;
}
dialog.file .main .info {
  flex:1;
}

dialog.file input[type="text"] {
  margin:0 0 1rem 0;
  width:100%;
}
dialog.file input[type="submit"],
dialog.file input[type="checkbox"] {
  margin:0;
}

dialog.file .info {
  padding:1rem 1rem 1rem 0;
}
dialog.file .info input[name="file"] {
  background-color:rgb(0 0 0 / 0.05);
}

label.replace, label.remove {
  cursor:pointer;
}

dialog form {
  padding:0; margin:0;
}

dialog .bar {
  text-align:right;
}
dialog .bar .close {
  cursor:pointer;
}

dialog form input[type="text"],
dialog form input[type="submit"] {
  padding:10px;
  margin:0 0 10px 0;
  color:var(--color);
}
dialog form input[type="text"] {
  background-color:var(--background-color-input-text);
}

#uploads {
  padding:1rem 0 4rem 0;
}
#uploads > .uploads {
  display: grid; 
  grid-column-gap: 1rem; 
  grid-row-gap: 1rem; 
  grid-template-columns:repeat(10, 1fr); 
  grid-template-rows:repeat(10, 1fr); 
  margin:0 1rem;
}
#uploads > .uploads > div {
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.4s;
  cursor:pointer;
}
#uploads > .uploads > div:hover {
  opacity:.7;
}
#uploads .thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  max-height:auto;
}
#uploads .thumb img {
  display:block;
  border-radius:0.5rem;
  max-width:100%;
}

#uploads > .dirs {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  padding:0 1rem 2rem 1rem;
}

#uploads > .dirs a {
  transition:0.6s;
}
#uploads > .dirs a:hover {
  opacity:0.6;
}

#uploads > .dirs .name {
  display:block;
  text-align:center;
}

#uploads span.path {
  color:#999;
}

#uploads .droparea {
  background-color:#f9f9f9;
  border:3px dashed #e9e9e9;
}

.dir-icon {
  display:block;
  width:75px;
  height:52px;
  margin:0 auto;
  position:relative;
  background-color:var(--background-color-dir-icon);
  border-radius:0 6px 6px 6px;
  box-shadow:1px 1px 2px var(--box-shadow-color-dir-icon);
}

.dir-icon:before {
  display:block;
  content:'';
  width:50%;
  height:7px;
  border-radius:10px 10px 0 0;
  background-color:var(--background-color-dir-icon-top);
  position:absolute;
  top:-7px;
  left:0px;
}

.sets-icon:after {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  content:"*";
  font-size:200%;
  width:100%;
  height:100%;
  color:var(--color-contrast);
}

span.add-dir span:first-child {
  display:block;
  width:75px;
  height:52px;
  margin:0 auto;
  position:relative;
  border-radius:0 6px 6px 6px;
  box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);
  background-color:var(--background-color-add-dir-icon);
}

span.add-dir span:first-child:before {
  display:block;
  content:"";
  width:50%;
  height:7px;
  border-radius:10px 10px 0 0;
  background-color:var(--background-color-add-dir-icon-top);
  position:absolute;
  top:-7px;
  left:0px;
}

span.add-dir span:first-child:after {
  display:flex;
  align-items:center;
  justify-content:center;
  content:"+";
  width:100%;
  height:100%;
  font-size:150%;
  color:rgb(0 0 0 / 0.4)
}

span.add-dir span.name {
  text-transform:lowercase;
}

#content {
  font-family:var(--font-family);
  font-size:var(--font-size);
}
#content h2,
#content h3,
#content p,
#content ul,
#content ol {
  padding:0;
  margin:0 0 1rem 0;
}

.flex {
  display:flex;
  align-items:stretch;
}

.space-between {
  justify-content:space-between;
}

.flex-center-center {
  display:flex;
  align-items:center;
  justify-content:center;
}

#editor .ql-source svg, #editor .ql-uploads svg {
  color:Black;
  stroke:var(--color);
}
#editor .ql-container.ql-snow, #editor .ql-toolbar.ql-snow {
  border:1px solid var(--border-color-main);
}
#editor .ql-snow .ql-stroke {
  stroke:var(--color);
}
#editor .ql-snow .ql-picker {
  color:var(--color);
}
#editor .ql-snow .ql-picker-options {
  background-color:#000
}
#editor .ql-editor.ql-blank::before {
  color:var(--color-pale);
}
#editor .ql-container {
  height:auto;
}
#editor .ql-editor {
  height:inherit;
}


kbd {
  font-size:90%;
  font-weight:bold;
  border:1px solid #ccc;
  padding:1px 4px;
  font-family:monospace, monospace;
}

#metaData {
  display:none;
}

ul#list {
  list-style:none;
  padding:0;
  margin:0;
}
ul#list li {
  padding:1rem 3rem;
  margin:0;
  display:flex;
  transition:0.4s;
}
ul#list li:hover {
  background-color:rgb(0 0 0 / .05);
}
ul#list li > div:first-child {
  flex:1;
  position:relative;
}
ul#list li > div:first-child:before {
  content:attr(data-id);
  position:absolute;
  top:5px;
  left:-22px;
  font-size:80%;
  font-weight:bold;
  color:rgba(0, 0, 0, 0.5);
}
ul#list li > div:last-child {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
  font-size:80%;
  color:var(--color-pale);
}
ul#list li div:last-child strong {
  display:block;
  text-align:right;
}
ul#list li a.title {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}
ul#list li a.title .deactivated {
  height:8px;
  width:8px;
  border-radius:50%;
  background-color:#f2545b;
  margin-right:0.3rem;
}
ul#list li a.title strong {
  flex:1;
}
ul#list li span.path {
  color:#777;
}
ul#list li sup.missing {
  background-color:#fdc500;
  color:Black;
  font-size:50%;
  padding:0 0.3rem;
  border-radius:100%;
}

details summary {
  cursor:pointer;
}

form#authentication {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
form#authentication .main {
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
}
form#authentication input[type="text"], 
form#authentication input[type="password"], 
form#authentication input[type="submit"] {
  min-width:400px;
  margin:0 0 10px 0;
}
form#authentication .avatar {
  display:flex;
  align-items:center;
  justify-content:center;
}
form#authentication .avatar .logo {
  font-family: "CarterOne", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size:4rem;
}

.publish {
  display:flex;
  gap:1rem;
  margin-bottom:2rem;
}
.date { 
  display: grid; 
  grid-template-columns:repeat(2, 1fr); 
  grid-template-rows:repeat(2, 1fr); 
  margin-bottom:2rem;
} 

div#settings {
  padding:2rem;
}

div#meta {
  
}
div#meta label {
  display:flex;
  margin-bottom:0.5rem;
}
div#meta label span {
  width:200px;
}
div#meta label input, div#meta label textarea {
  padding:10px 20px;
  flex:1;
}

form#editor {
  position:relative;
}
form#editor h1 {
  position:sticky;
  top:0;
  z-index:1;
}

div#meta label textarea {
  height:150px;
}

form.meta {
  display:flex;
  gap:0.5rem;
  margin-bottom:0.5rem;
}

@media screen and (min-width: 1024px) {
  body {
    
  }
  
  #app {
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
  }
  
  main {
    flex:1;
    /*overflow: auto;*/
  }
  
  aside {
    border-right:1px solid var(--border-color-main);
    position:sticky;
    /*width:250px;*/
  }
  aside nav {
    /*padding:2rem 0 2rem 0;*/
  }
}