:root{
  --thisoe: #178577;
  /* TABLE CONFIG */
    --r1:30pt;
    --r2:70%;
}


/* reset */
html,body{margin:0;padding:0}
i,p{all:unset;display:block}

/* global */
::-webkit-scrollbar{width:8pt;height:8pt}
::-webkit-scrollbar-track{background-color:#222}
::-webkit-scrollbar-thumb{background-color:var(--thisoe);transition:background-color .2s ease;border-radius:9pt}
::-webkit-scrollbar-thumb:hover{background-color:#399}
*::selection{
  background:var(--thisoe);
  color:#cef;
  text-shadow: 1px 1px #335;
}

.svg{
  display:inline-block;
  background-repeat:no-repeat;
  background-size:100% 100%;
}


/* FILE HUB */
.loading{
  margin:auto;
  font-size:16pt;
  font-weight:bold;
}
#emptymsg{display:flex;flex-direction:column;padding-top:9vh}
#emptymsg *{margin:auto;text-align:center;font-weight:bold}

#table{
  position:relative;
  width:100%; height:100%;
  display:flex;flex-direction:column;
  max-width:390px;margin:auto;
}
#table a{text-decoration:none;color:#000}

.tr{
  display:flex;flex-direction:row;
  justify-content:space-evenly;
  flex:1;
  gap:3pt;
}.tr:nth-child(odd){background:#f1f1f1}

.tr p{
  padding:5pt;
  font-size:12pt;
  font-weight:normal;
  font-family:serif;
  overflow:hidden;
  text-wrap:nowrap; white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
}
.tr .id{width:var(--r1)}
.tr .dir{width:var(--r1);display:none}
.tr .tt{width:var(--r2);text-align:start}
.tr:not(#th) .tt{font-weight:bold}

.get{
  width:50%;min-width:16pt;
  margin:auto;
  border-radius:3pt;
  cursor:pointer;
}
.get:hover{background-color:#cef}

#th{
  position:sticky;
  top:0;left:0;
  background:#ccc;
}
#th p{font-family:sans-serif}
.folder{ /* SVG */
  width:12pt;height: 12pt;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23178577' d='m11.17 8l-.58-.59L9.17 6H4v12h16V8h-8z' opacity='0.3'/%3E%3Cpath fill='%23178577' d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m0 12H4V6h5.17l1.41 1.41l.59.59H20z'/%3E%3C/svg%3E")
}

#table a{cursor:pointer}
#table a:hover{background:#e1e1e1}

#emptymsg{display:flex;flex-direction:column;padding-top:9vh}
#emptymsg *{margin:auto;line-height:2;text-align:center}
#emptymsg p{font-weight:bold;font-size:16pt}
#emptymsg a{font-size:12pt;color:var(--thisoe);cursor:pointer}
#emptymsg a:hover{text-decoration:underline;background:transparent}


@media only screen and (max-width: 500px) {
  #th{display:none}
  .tr:nth-child(odd){background:#f7f7f7}
  .tr:nth-child(even){background:#eee}
  #table a{padding:7px}
  .tr .id{display:none}
  .tr .tt{
    font-weight:bold;
    width:calc(100% - 36pt);
  }
  .tr .dir{display:block}
}



/* DETAIL PAGE */
article,section{
  display:flex;flex-direction:column;
  margin:1vh auto;
  width:99vw;
  max-width:700px;
}
article{min-height:39vh}
article *{margin-right:auto}
h1{
  margin:0; padding:9pt 0;
  font-size:20pt;
  line-height:1;
  font-weight:bold;
  font-family:sans-serif;
}
h2,h3{
  margin:0;padding:0;
  padding-left:9pt;
  font-size:12pt;
  line-height:1.6;
  font-weight:normal;
  color:#555;
  overflow:hidden;text-overflow:clip;white-space:nowrap;
}h2::before{content:"　";
  margin-right:3pt;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='ipSCalendar0'%3E%3Cg fill='none' stroke-linejoin='round' stroke-width='4'%3E%3Cpath fill='%23fff' stroke='%23fff' d='M5 19h38v21a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath stroke='%23fff' d='M5 9a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v10H5z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M16 4v8m16-8v8'/%3E%3Cpath stroke='%23000' stroke-linecap='round' d='M28 34h6m-20 0h6m8-8h6m-20 0h6'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='%23555' d='M0 0h48v48H0z' mask='url(%23ipSCalendar0)'/%3E%3C/svg%3E");
}h3::before{content:"　";
  margin-right:3pt;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M19 18v-4h-2v4h-2l3 3l3-3zM11 4C8.8 4 7 5.8 7 8s1.8 4 4 4s4-1.8 4-4s-1.8-4-4-4m0 10c-4.4 0-8 1.8-8 4v2h9.5c-.3-.8-.5-1.6-.5-2.5c0-1.2.3-2.3.9-3.4c-.6 0-1.2-.1-1.9-.1'/%3E%3C/svg%3E");
}
#maintxt{
  margin:0; padding:16pt 3pt 27pt;
  font-size:12pt;
  line-height:1.17;
}


section{display:flex;flex-direction:column}

#multifile{
  display:flex;
  margin:9px;
  padding-top:9px;
  align-items:center;
  border-style:solid; border-width:3px 0 0;
  border-image:linear-gradient(to right,#aaa,#ccc7,#0000) 1;
}
#submit-btn{
  outline:#188 solid 2px;
  margin-left:9pt;padding:3px 5pt;
  border-radius:7px;
  cursor:pointer;
}
#submit-btn:hover{background-color:#cef}
#submit-btn:active{background-color:#bcf}
#submit-btn::before{content:"　";
  margin-right:3pt;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 14 14'%3E%3Cpath fill='%2337f' fill-rule='evenodd' d='M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14m3.146-5.69l-2.793 2.793a.5.5 0 0 1-.707 0L3.854 8.31a.5.5 0 0 1 .353-.853H6V3.75a1 1 0 0 1 2 0v3.707h1.793a.5.5 0 0 1 .353.853' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.fwrap{display:flex;gap:7px;padding:7px;align-items:center}
#s-a,input[name="todl"]{min-width:16px;min-height:16px}
.afile{
  display:flex;
  align-items:stretch;
  gap:3px;
  outline:var(--thisoe) solid 2px;
  background-color:#ccc;
  border-radius:9px;
  margin-right:auto;
}
.afile div{
  padding:9pt;
  background-color:#eee;
  border-radius:9px 0 0 9px;
  cursor:pointer;
  font-size:16pt; /* size of `::after` */
  align-content:center;
}.afile div:hover{
  background-color:#cef;
}.afile div:active{
  background-color:#bcf;
}.afile div::after{content:"　";
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 14 14'%3E%3Cpath fill='%23178577' fill-rule='evenodd' d='M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14m3.146-5.69l-2.793 2.793a.5.5 0 0 1-.707 0L3.854 8.31a.5.5 0 0 1 .353-.853H6V3.75a1 1 0 0 1 2 0v3.707h1.793a.5.5 0 0 1 .353.853' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.afile label{
  padding:9pt;
  background-color:#eee;
  border-radius:0 9px 9px 0;
  font-size:12pt;
  text-wrap:nowrap; white-space:nowrap;text-overflow:ellipsis;
}.afile label p:nth-child(1){font-weight:bold}