*{margin:0;padding:0;box-sizing:border-box}body{display:grid;grid-template-rows:auto 1fr;grid-template-columns:300px 1fr;height:100vh;overflow:hidden}header{grid-column:1 / -1;background-color:#edf9ff;color:#373a40;padding:20px;position:relative}h1{display:block;font-size:2em;margin:.67em 0;font-weight:400;color:#000}h2{display:block;font-size:1.5em;margin:.83em 0;font-weight:400;color:#000}h3{display:block;font-size:1.17em;margin-bottom:1em;margin-left:0;margin-right:0;font-weight:400;color:#000}p{text-align:justify;margin-bottom:.8em}pre{font-size:.9em;background-color:#fff;color:#686d76;padding:15px;width:280px;border-radius:5px;overflow-x:auto;line-height:1.4}aside{background-color:transparent;padding:20px;overflow-y:auto;z-index:2}.control-panel{background-color:#edf9ff;padding:15px;border-radius:5px;margin-bottom:15px}main{padding:0;display:flex;margin-left:-300px;margin-right:-300px;justify-content:center;align-items:center;background-color:#fff;overflow:hidden;z-index:1}.montserrat-regular{font-family:Montserrat,serif;font-optical-sizing:auto;font-weight:400;font-style:normal}.fragment-mono-regular{font-family:Fragment Mono,serif;font-weight:400;font-style:normal;font-variant-ligatures:none}.fragment-mono-regular-italic{font-family:Fragment Mono,serif;font-weight:400;font-style:italic;font-variant-ligatures:none}.wrap-collapsible{margin-bottom:1.2rem 0}.collapse-checkbox{display:none}.lbl-toggle{display:block;padding:1rem;color:#4157a1;background:#d5f5ff;cursor:pointer;border-radius:7px;transition:all .25s ease-out}.lbl-toggle:hover{color:#081b57}.lbl-toggle:before{content:" ";display:inline-block;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid currentColor;vertical-align:middle;margin-right:.7rem;transform:translateY(-2px);transition:transform .2s ease-out}.toggle:checked+.lbl-toggle:before{transform:rotate(90deg) translate(-3px)}.collapsible-content{max-height:0px;overflow:hidden;transition:max-height .25s ease-in-out}.toggle:checked+.lbl-toggle+.collapsible-content{max-height:100vh}.toggle:checked+.lbl-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.collapsible-content .content-inner{background:#edf9ff;padding:1rem;border-bottom-left-radius:7px;border-bottom-right-radius:7px}ul{list-style:none;padding:0}li{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:.8em}li span{display:inline-block;flex-grow:1;text-align:left;text-overflow:ellipsis;overflow:hidden;margin-right:10px;padding:4px;max-width:160px;white-space:nowrap}.uploadButton{background-color:#abce30;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:.9rem;text-align:center;width:30px;display:inline-block}.deleteButton{background-color:#fa1a0d;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:.9rem;text-align:center;width:30px}.loadExampleButton{background-color:#abce30;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:.9rem;text-align:center;width:140px;float:right}.deleteButton:hover{background-color:#d53f3f}.uploadButton:hover,.loadExampleButton:hover{background-color:#388e3c}input[type=file]{display:none}.filter-item{font-size:.8em;height:30px}label[for=checkbox-sp]{color:#abce30}label[for=checkbox-sn]{color:#fa1a0d}label[for=checkbox-s]{color:#58b4ee}label[for=checkbox-a]{color:#000}label[for=checkbox-m]{color:#787878}
