body{margin:0;font-family:sans-serif;--highlight-color: #1C77FF}#file-input{display:none}#file-area{display:flex;flex-direction:column;justify-content:center;width:100%;height:30vh;background-color:var(--highlight-color);color:#fff;text-align:center;cursor:pointer}#file-area h2,#file-area p{margin:5px}#side-panel{position:absolute;top:0;right:0;width:20em;height:30vh;padding:2em;box-sizing:border-box;pointer-events:none}#side-panel button{font-size:1rem;width:100%;padding:10px 20px;border:0;border-radius:10px;background-color:#fff;color:var(--highlight-color);font-weight:700;cursor:pointer;box-shadow:0 5px #a9a9a966;pointer-events:all}#side-panel button:active{transform:translateY(5px);box-shadow:0 0}#format-containers{display:flex}.format-container{display:flex;flex-flow:column nowrap;align-items:center;width:50vw;min-height:70vh;padding:.8em 7em}.format-container h2{text-align:center;margin-bottom:20px}#from-container{background-color:#d3d3d3}#to-container{background-color:#b8b8b8}.search{text-align:center;margin-bottom:30px;padding:10px 20px;border:0;border-radius:5px;outline:none;box-shadow:0 5px #a9a9a9}.format-list{display:flex;flex-flow:column nowrap;width:100%;align-items:center;background-color:#fff;border-radius:10px;padding:30px;margin-bottom:5vw}.format-list button{width:80%;margin:5px 0;padding:10px;color:#000;background-color:#d3d3d3;border:0;border-radius:10px;font-family:monospace;word-break:break-word;cursor:pointer}button.selected{background-color:var(--highlight-color);color:#fff;font-weight:700}#convert-button{position:fixed;left:50%;bottom:5%;transform:translate(-50%);font-size:1.5rem;padding:10px 20px;border:0;border-radius:10px;background-color:var(--highlight-color);color:#fff;cursor:pointer}.disabled{filter:grayscale(1);pointer-events:none}#popup-bg{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#00000080}#popup{position:fixed;left:50%;top:50%;width:20vw;transform:translate(-50%,-50%);background-color:#fff;padding:15px;border-radius:10px;text-align:center}#popup button{font-size:1rem;padding:7px 20px;border:0;border-radius:10px;background-color:#d3d3d3;color:#000;cursor:pointer}@media only screen and (max-width:800px){#drop-hint-text{display:none}.format-container{width:100%;box-sizing:border-box;padding:.8em 4em}.format-list button{width:100%}#format-containers{flex-flow:column nowrap}#popup{width:80vw}#side-panel{width:50%;padding:.8em;text-align:right}#side-panel button{font-size:.8rem;padding:10px}}