style.css

/* Icons SVG files */
:root {
    --info: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-information-outline" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>');
    --home: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-home-outline" viewBox="0 0 24 24"><path d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22" /></svg>');
    --shot: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-camera-outline" viewBox="0 0 24 24"><path d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>');
    --ota: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-cpu-32-bit" viewBox="0 0 24 24"><path d="M9,3V5H7A2,2 0 0,0 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11H21V9H19V7A2,2 0 0,0 17,5H15V3H13V5H11V3M7,9H10.5A1,1 0 0,1 11.5,10V14A1,1 0 0,1 10.5,15H7V13.5H10V12.75H8.5V11.25H10V10.5H7M12.5,9H16A1,1 0 0,1 17,10V11.75A1,1 0 0,1 16,12.75H14V13.5H17V15H12.5V12.25A1,1 0 0,1 13.5,11.25H15.5V10.5H12.5" /></svg>');
    --browse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-edit-outline" viewBox="0 0 24 24"><path d="M10 20H6V4H13V9H18V12.1L20 10.1V8L14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H10V20M20.2 13C20.3 13 20.5 13.1 20.6 13.2L21.9 14.5C22.1 14.7 22.1 15.1 21.9 15.3L20.9 16.3L18.8 14.2L19.8 13.2C19.9 13.1 20 13 20.2 13M20.2 16.9L14.1 23H12V20.9L18.1 14.8L20.2 16.9Z" /></svg>');
    --cog: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-cog-outline" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>');
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>');
    --trash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-trash-can-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>');
    --download: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-download" width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>');
    --upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-upload-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M12,12L16,16H13.5V19H10.5V16H8L12,12Z" /></svg>');
    --flash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chip" viewBox="0 0 24 24"><path d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z" /></svg>');
    --file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-outline" viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" /></svg>');
    --dir: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder-outline" viewBox="0 0 24 24"><path d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" /></svg>');
    --diropen: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder-open-outline" viewBox="0 0 24 24"><path d="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z" /></svg>');
    --html: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-code-tags" viewBox="0 0 24 24"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>');
    --image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-image-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M17,13V19H7L12,14L14,16M10,10.5A1.5,1.5 0 0,1 8.5,12A1.5,1.5 0 0,1 7,10.5A1.5,1.5 0 0,1 8.5,9A1.5,1.5 0 0,1 10,10.5Z" /></svg>');
    --zip: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-cabinet" viewBox="0 0 24 24"><path d="M14,8H10V6H14V8M20,4V20C20,21.11 19.11,22 18,22H6C4.89,22 4,21.11 4,20V4A2,2 0 0,1 6,2H18C19.11,2 20,2.9 20,4M18,13H6V20H18V13M18,4H6V11H18V4M14,15H10V17H14V15Z" /></svg>');
    --cmd: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-application-outline" viewBox="0 0 24 24"><path d="M21 2H3C1.9 2 1 2.9 1 4V20C1 21.1 1.9 22 3 22H21C22.1 22 23 21.1 23 20V4C23 2.9 22.1 2 21 2M21 20H3V6H21V20Z" /></svg>');
    --css: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-script-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 16,19V4H8A1,1 0 0,0 7,5V16H5V5A3,3 0 0,1 8,2H19A3,3 0 0,1 22,5V6H20V5A1,1 0 0,0 19,4A1,1 0 0,0 18,5V9L18,19A3,3 0 0,1 15,22H5A3,3 0 0,1 2,19V18H13A2,2 0 0,0 15,20Z" /></svg>');
    --ttf: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-format-text" viewBox="0 0 24 24"><path d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" /></svg>');
    --eye: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-eye-outline" viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" /></svg>');
    --json: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-code-braces" viewBox="0 0 24 24"><path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" /></svg>');
    --audio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-music-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M13,10V12H11V17A2,2 0 0,1 9,19A2,2 0 0,1 7,17A2,2 0 0,1 9,15C9.4,15 9.7,15.1 10,15.3V10H13Z" /></svg>');
}

.fn:hover {
  text-decoration: underline;
}
.fi {
  display: inline-block;
  vertical-align: middle;
  width: 1.1rem;
  height: 1.25rem;
  mask-size: auto;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--txt);
}
.fa {
  display: block;
  text-indent: -9999px;
  width: clamp(2rem, 7.5vw, 5rem);
  height: 2rem;
  mask-size: auto;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--clr-primary-400);
  transition: 0.5s;
  padding: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.fa-browse  { mask-image: var(--browse);    -webkit-mask-image: var(--browse)}
.fa-cog     { mask-image: var(--cog);       -webkit-mask-image: var(--cog)}
.fa-download{ mask-image: var(--download);  -webkit-mask-image: var(--download)}
.fa-upload  { mask-image: var(--upload);    -webkit-mask-image: var(--upload)}
.fa-home    { mask-image: var(--home);      -webkit-mask-image: var(--home)}
.fa-info    { mask-image: var(--info);      -webkit-mask-image: var(--info)}
.fa-ota     { mask-image: var(--ota);       -webkit-mask-image: var(--ota)}
.fa-shot    { mask-image: var(--shot);      -webkit-mask-image: var(--shot)}
.fa-star    { mask-image: var(--star);      -webkit-mask-image: var(--star)}
.fa-trash   { mask-image: var(--trash);     -webkit-mask-image: var(--trask)}
.fa-flash   { mask-image: var(--flash);     -webkit-mask-image: var(--flash)}
.fa-file    { mask-image: var(--file);      -webkit-mask-image: var(--file)}
.fa-dir     { mask-image: var(--dir);       -webkit-mask-image: var(--dir)}
.fa-diropen { mask-image: var(--diropen);   -webkit-mask-image: var(--diropen)}
.fa-eye     { mask-image: var(--eye);       -webkit-mask-image: var(--eye)}
.fa-zip     { mask-image: var(--zip);       -webkit-mask-image: var(--zip)}
.fa-css     { mask-image: var(--css);       -webkit-mask-image: var(--css)}
.fa-cmd     { mask-image: var(--cmd);       -webkit-mask-image: var(--cmd)}
.fa-json    { mask-image: var(--json);      -webkit-mask-image: var(--json)}
.fa-jsonl   { mask-image: var(--json);      -webkit-mask-image: var(--json)}
.fa-image   { mask-image: var(--image);     -webkit-mask-image: var(--image)}
.fa-audio   { mask-image: var(--audio);     -webkit-mask-image: var(--audio)}
.fa-html    { mask-image: var(--html);      -webkit-mask-image: var(--html)}
.fa-ttf     { mask-image: var(--ttf);       -webkit-mask-image: var(--ttf)}

.nav-list {
  font-size: var(--fs-nav);
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  gap: clamp(1.5rem, 10vw, var(--size-500));
  width: clamp(275px, 80vw, 600px);
}
.nav-list a {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  color: var(--clr-primary-400);
}
.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--clr-accent-400);
}
.nav-list a .text {
  position: absolute;
  letter-spacing: -0.05rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-semi-bold);
  white-space: nowrap;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(0.5rem);
}
.nav-list a:hover .text,
.nav-list a:focus-visible .text {
  opacity: 1;
  transform: translateY(1rem);
}
.nav-list a:hover .fa,
.nav-list a:focus-visible .fa {
  background-color: var(--clr-accent-400);
  transform: translateY(-0.5rem);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Set default margin */
* {
   margin: 0px;
   padding: 0px;
}
p {
  margin: 1em 0px;
}

/* Main Style */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    height: 100%;
    background: var(--bg);
    color: var(--txt)
}
a {
    text-decoration: none;
}
a[href],
input[type='submit'],
label[for],
select,
button,
.pointer {
    cursor: pointer;
}

/* Message Fields */
.error,
.info,
.success,
.validation,
.warning {
    border: 1px solid;
    margin: 1rem auto;
    padding: 2rem 1rem 1rem 3rem;
    background-repeat: no-repeat;
    background-position: 10px center;
    max-width: 500px
}
.info   { color: #00529B; background-color: #BDE5F8 }
.success{ color: #4F8A10; background-color: #DFF2BF }
.warning{ color: #9F6000; background-color: #FEEFB3 }
.error  { color: #D8000C; background-color: #FFD2D2 }

.left { float: left }
.right { float: right }
.bold { font-weight: bold }

/* Main Page */
#doc {
    text-align: left;
    margin: 0 auto;
    /* display: inline-block;
    display: table; */
    color: var(--txt);
    width: 80%;
    min-width: 300px;
    max-width: 600px;
}

#doc>a,
.dist>a,
#doc button,
#doc input[type=submit] {
    /* padding: 12px; */
    height: 3rem;
    border: 1px solid var(--btnbrd);
    border-radius: .6rem;
    background-color: var(--btnbg);
    color: var(--btnfg);
    font-size: 1rem;
    width: 100%;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none
}

#doc>a:hover,
.dist>a:hover,
#doc button:hover,
#doc input[type=submit]:hover {
    background-color: var(--btnbghi)
}

#doc input:not([type=file]) {
    background-color: var(--fldbg);
    color: var(--fldfg)
}
#doc input[type=checkbox],
#doc input[type=radio] {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem
}
#doc input[type=color] {
    width: 30%;
    padding: 5px
}
#doc input:invalid {
    border: 1px solid var(--fldred)
}
#doc select {
    background-color: var(--fldbg);
    color: var(--fldfg)
}

.c {
    text-align: center
}

#doc>a.red,
#doc button.red {
    background-color: var(--btnred)
}

#doc>a.red:focus,
#doc>a.red:hover,
#doc button.red:focus,
#doc button.red:hover {
    background-color: var(--btnredhi)
}

#doc td {
    padding-bottom: 0;
    padding-top: 0
}
#doc th {
    padding-top: .5rem
}

#doc input,
#doc select,
#doc textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: .6rem;
    resize: vertical
}
#doc select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem
}

#doc label {
    padding-right: 18px;
    padding-left: .25rem;
    display: inline-block
}

#bmp {
  max-width: 100%;
  height: auto;
}

.required {
    background-image: var(--star);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
}

.icon {
    background-size: 1.25rem 1.25rem;
    background-position: left;
    background-repeat: no-repeat;
    width: 1.5rem;
    display: inline-block;
    text-decoration: none
}

.icon:before{content: "\0000a0"}
.edit{background-image: var(--browse)}
.trash{background-image: var(--trash)}

/* Forms */
.container {
    background-color: var(--grpbg);
    color: var(--grpfg);
    border-radius: .6rem;
    padding: 10px;
    margin: 20px 0
}

.dist {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 1rem 0
}

.dist>a {
    flex-grow: 1;
    margin: 0 6px
}

.dist>a:first-child {
    margin-left: 0
}

.dist>a:last-child {
    margin-right: 0
}

.row:after {
    content: "";
    display: table;
    clear: both
}

.row {
    /* font-size: .833rem; */
    margin: 5px
}

.gap,
.row:last-of-type {
    margin-bottom: 1rem
}

.col-25 {
    /* float: left;
    width: 25%; */
    text-align: left;
}

/* .col-75 {
    float: left;
    width: 75%
} */

#doc label,
#doc legend {
    padding: 5px 18px 5px 0;
}
#doc fieldset {
    display: contents
}
[v-cloak] > * { display:none }
/* [v-cloak]::before { content: "Loading…"; margin: auto; } */

    
@media screen and (min-width:800px) {
    .row {
      display:flex;
      align-items:center
    }
    .col-25,
    .col-75
    {
        float: left;
        width: 75%;
        margin-top: 0
    }

    .col-25 {
        width: 25%;
        text-align: right
    }
}


/*
@media screen and (max-width:800px) {

    // #doc input[type=submit],
    .col-25,
    .col-75
    {
        width: 100%;
        margin-top: 0
    }

    .col-25 {
        text-align: left
    }

    #doc label {
        padding: 5px 18px 5px 0
    }
}
*/

/* ********** Page Footer ********** */
.foot {
    background-color: transparent !important;
    all: revert;
    float: right;
    margin: 0;
    font-size: .6rem
}
a.foot:link,
a.foot:visited {
    color: var(--footfg)
}
.clear {
    clear: both
}

/* ********** File Editor ********** */
.container__editor {
	/* display: none; */
	display: flex;

	/* Misc */
	border: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--bg);
}
.container__left {
	/* Initially, the left takes 3/4 width */
	width: 10rem;
	min-width: 6rem;
	max-width: 20rem;

	/* Misc */
	/* align-items: center; */
	display: flex;
	justify-content: left;
	overflow-x: clip;
	overflow-y: scroll;
	background-color: var(--treebg);

	/* Popout */
	top: 0;
	bottom: 0;
	left: 0;
	right: clamp(10rem, 15vw, 80rem);
	z-index: 10;
	/* position: absolute; */
	/* visibility: hidden; */
}
.resizer {
	background-color: #d5dbe2;
	cursor: ew-resize;
	height: 100%;
	width: 5px;
}
.container__right {
	/* Take the remaining width */
	flex: 1;
	flex-direction: column;

	/* Misc */
	align-items: center;
	display: flex;
  background-color: #888;
}
.toolbar {
	text-align: center;
	width: 100%;
	padding: 0.5rem;
	color: var(--btnfg);
	background-color: var(--toolbg)
}
.container__bottom {
	/* Take the remaining width */
	flex: 1;

	/* Misc */
	align-items: center;
	display: flex;
	justify-content: center;
	top: 0;
	bottom: 0;
	width: 100%;
	/* background-color: bisque; */
}
#sizeList {
	width: 4rem;
}
#ctx {
	display: none;
	top: 10px;
	left: 50px;
	position: absolute;
	background: #fff;
	z-index: 10;
	padding: 0.75rem;
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.25);
}
#ctx > ul {
	padding-left: 0px;
}
#ctx > ul > li {
  white-space: nowrap
}
#ctx > ul > li:hover {
  background: #ccc;
}
#fontsize, #page {
  width: 3rem
}
#preview {
  padding: 0.3rem;
  overflow: scroll;
}
#preview > img {
  max-width:100%;
  max-height:100%;
 	height: 100%;
  margin: auto;
  display: block
}
#download-frame,
#preview {
  display:none;
}
#tree {
  width: 100%;
  line-height: 1.3rem;
  font-size: 0.95rem;
}
.download{background-image: var(--download)}
.upload{background-image: var(--upload)}
.eye{background-image: var(--eye)}
.flash{background-image: var(--flash)}
.file{background-image: var(--file)}
.zip{background-image: var(--zip)}
.css{background-image: var(--css)}
.cmd{background-image: var(--cmd)}
.json{background-image: var(--json)}
.jsonl{background-image: var(--json)}
.image{background-image: var(--image)}
.audio{background-image: var(--audio)}
.html{background-image: var(--html)}
.dir{background-image: var(--dir)}
.diropen{background-image: var(--diropen)}


#toast {
  position: fixed;
  bottom: 1rem;
  right: 1.5rem;
  display: grid;
  align-items: end;
  align-content: end;
  gap: 1rem;
}

.toast {
  font-size: 1rem;
  margin: 0;
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 1em;
  background-color: lightblue;
  animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

@keyframes toastIt {
  0%,
  100% {
    transform: translateY(150%);
    opacity: 0;
  }
  10%,
  90% {
    transform: translateY(0);
    opacity: 1;
  }
}