@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#2b3346;color:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{height:100vh;display:grid;grid-template-rows:auto 1fr auto}.header{height:85px;overflow:hidden;margin:0 20px;display:flex;justify-content:space-between;align-items:center}.header button{font-size:1.3rem;padding:10px 20px;margin:auto 0;background-color:#f2930d;color:#fff;outline:inherit;border:none;border-radius:5px}@media (max-width: 819px){.header h1{font-size:1.5rem}.header button{font-size:1rem}#sidebar-wrapper{display:none}}@media (max-width: 650px){.header h1{font-size:1rem}.header button{padding:5px 10px}}.header button:hover{cursor:pointer;background-color:#da840b}.header button:active{background-color:#c2750a}.contentContainer{height:100%;overflow:auto;padding:0 40px;display:flex;flex-direction:row;justify-content:center}.component{--width: 200px;color:#fff;box-sizing:border-box;-webkit-user-select:none;user-select:none;padding:10px;border-radius:10px;margin:10px;box-shadow:0 0 10px #00000080;width:calc(var(--width) + 20px);overflow:hidden;transition:all .3s ease;cursor:pointer}.component.disabled{background-color:#c37822;cursor:not-allowed}.component.selected{background-color:#22c373;color:#000}.component img{border-radius:10px;width:var(--width);aspect-ratio:16/9;object-fit:cover}.component h1{font-size:1.3rem;white-space:nowrap;max-width:var(--width);overflow:hidden;text-overflow:ellipsis}.component p{max-width:var(--width)}.broken{padding:5px;-webkit-backdrop-filter:brightness(.35) blur(3px);backdrop-filter:brightness(.35) blur(3px);pointer-events:none;border-radius:5px}.categoryList{justify-self:center;max-width:1200px}.categoryList h2{-webkit-user-select:none;user-select:none;cursor:pointer}.componentList{display:flex;flex-wrap:wrap;align-content:baseline;height:auto;overflow:hidden}.componentList.collapsed{height:0}#form-file-upload{max-width:100%;text-align:center;position:relative;margin:50px 10px 10px}#input-file-upload{display:none}#label-file-upload{display:flex;align-items:center;justify-content:center;border-width:2px;border-radius:1rem;border-style:dashed;border-color:#cbd5e1;padding:10px}#label-file-upload.drag-active{background-color:#2b3346}.upload-button{cursor:pointer;padding:.25rem;font-size:1rem;border:none;background-color:transparent;color:#bbb}.upload-button:hover{text-decoration-line:underline}#drag-file-element{position:absolute;width:100%;height:100%;border-radius:1rem;top:0;right:0;bottom:0;left:0}#sidebar-wrapper{position:relative;margin-left:50px;min-width:190px}#sidebar{position:fixed;height:calc(100vh - 126px);overflow:auto;width:190px;background:#1f2637;padding:10px;border-radius:5px;box-sizing:border-box;box-shadow:0 0 10px #00000080;display:grid;grid-template-rows:auto auto 1fr}#sidebar h2{margin:10px 0}#sidebar p{margin:0;overflow:auto}