html, body{width:100%;  height:100%;  background-color:black;  color:white;}
body{display:flex;  flex-direction:column;  font-family:monospace, 'Courier New', Courier;}
bg{position:fixed;  background-color:black;  width:100%;  height:100%;  z-index:-1;  pointer-events:none;}
.tableview .pseudo-text::before{content:attr(contentBefore);}
img{object-fit:contain;  object-position:center;}
.spell-cell:hover{position:relative;}
.spell-cell:not(:empty):hover::before{content:attr(data-hover);  position:absolute;  left:50%;  top:50%;  transform:translate(-50%, -50%);  background-color:black;  border:1px outset red;  border-radius:1ch;  padding:0.4ch;  font-size:0.8em;  white-space:pre;  z-index:99;  pointer-events:none;}
input[type=text]{border-color:rgba(255, 255, 255, 0.144);}
button{background-color:black;  color:white;  cursor:pointer;  border-color:rgba(255, 255, 255, 0.473);}
input[type=checkbox]{cursor:pointer;}
.test input[type=checkbox]{border:1px solid red;  position:relative;  cursor:pointer;  width:1.3em;}
.test input[type=checkbox]::before{content:"";  display:block;  position:absolute;  width:1em;  height:1em;  top:0;  left:0;  border:2px solid #555555;  border-radius:3px;  background-color:white;}
.test input[type=checkbox]:checked::after{content:"";  display:block;  width:5px;  height:10px;  border:solid black;  border-width:0 2px 2px 0;  -webkit-transform:rotate(45deg);  -ms-transform:rotate(45deg);  transform:rotate(45deg);  position:absolute;  top:0px;  left:6px;}
*{box-sizing:border-box;  margin:0;  background-color:black;  color:rgb(183, 183, 183);}
.wand-stat-container{flex-shrink:0;  display:grid;  position:relative;  background-color:transparent;  font-weight:bolder;}
.wand-wrapper{position:relative;}
.wand-wrapper>*{display:block;}
#drop-area{position:relative;  display:flex; flex-direction:row;  align-items:center;}
.full{width:100%;  height:100%;}
details, summary{background-color:transparent;}
details > summary{font-weight:900;  white-space:nowrap;  text-decoration:underline;  cursor:pointer;}
details details{padding-left:1em;}
body details{padding-top:1em;}
details > summary:hover{background-color:rgba(200,200,100,0.15);}
input::file-selector-button{display:none;  background-color:black;  font-weight:bold;  color:rgb(30, 255, 105);  padding:0 0.5em;  border:thin solid grey;  border-radius:3px;}
#button-folder, #button-files{background-color:darkgreen;}
#btn-clear{background-color:darkred;}
#progress-container{display:flex; flex-direction:row; width:fit-content;}
.progress-table{position:relative;  display:grid;  height:fit-content;  padding:1ch;  grid-template-columns:repeat(9,1fr);  &.spells{grid-template-columns:repeat(12,1fr);}
& >.cell>img{object-fit:contain;  object-position:center;  aspect-ratio:1/1;  height:20px;  background-color:transparent;  &:hover{outline:1px solid yellow;  outline-offset:-1px;}
}
}
.hide{display:none !important;}