body{margin:0;font-family:sans-serif;font-size:.9rem}#app{display:flex;flex-direction:column;height:100vh}#toolbar{display:flex;align-items:center;background-color:#555;color:#fff;padding:.5em}#page-mode input,#toolbar button{color:currentColor;background-color:transparent;font:inherit;border:1px solid currentColor;border-radius:3px;padding:.25em .5em}#page-mode input:focus,#page-mode input:hover,#toolbar button:focus,#toolbar button:hover{color:#90ee90}#page-mode{display:flex;align-items:center;padding:.25em .5em}#viewport-container{flex:1;background:#eee;overflow:auto}#viewport{width:90%;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center}#viewport>div{text-align:center;max-width:100%}#viewport canvas{width:100%;box-shadow:0 2px 5px grey}#viewerContainer::-webkit-scrollbar{-webkit-appearance:none!important}#viewerContainer::-webkit-scrollbar:vertical,.#viewerContainer>#viewerContainer::-webkit-scrollbar:vertical{width:8px!important}#viewerContainer::-webkit-scrollbar-thumb{background-color:#babcbf;border-radius:20px;border:1px solid #ededed}.dropZone{width:80%;height:150px;position:relative;border:4px dashed red}.dropZone:hover{border:2px solid #d8d8d8}.dropZone:hover .dropZone-title{color:#1975a0}.dropZone-info{color:red;position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}.dropZone-title{color:#787878}.dropZone input{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0}.dropZone-upload-limit-info{display:flex;justify-content:flex-start;flex-direction:column}.dropZone-over{background:#d8d8d8;opacity:.8}.dropZone-uploaded{width:80%;height:200px;position:relative;border:2px dashed #eee}.dropZone-uploaded-info{display:flex;flex-direction:column;align-items:center;color:#d8d8d8;position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}.removeFile{width:200px}