*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}html{width:100%;height:100%;font-family:"Open Sans",Roboto,Helvetica,sans-serif}body{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%}body>*{flex:0 0 auto}.dropzone{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:800px;height:30vh;min-height:150px;margin:40px 15px 0 15px;border:dashed 3px #bce3f2}.dropzone.dropzone-active{border-style:solid;border-color:#4faacb}
.dropzone input{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;opacity:0}.dropzone img{width:60px}.dropzone p{margin-top:10px;color:#224856;cursor:default;font-size:17px}.resize .settings{width:100%;margin:2.5px 0}.resize .settings .label-container{display:flex;justify-content:center;align-items:center}.resize .settings .label-container label{flex:1 1 auto}.resize .settings .label-container label:first-child{margin-right:15px}.resize .settings .label-container label:last-child{margin-left:15px}
.resize .settings>label{display:inline-block;width:100%}.resize .settings label{margin:2.5px 0;text-align:left}.resize .settings label span{display:inline-block;margin-bottom:5px}.resize .settings label input{width:100%;padding:5px 7.5px;border:solid 1px #bbb;border-radius:4px}.img-container{width:800px;padding:0 15px;text-align:center}.img-container img{max-width:100%}.img-container .buttons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:5px 0}.img-container .buttons .button{padding:5px 40px;margin:5px 7.5px;border-radius:4px;cursor:pointer;transition:background 150ms 0s linear}
.img-container .buttons .button.button-primary{background:#0f9aef;color:#fbfbfb}.img-container .buttons .button.button-primary:hover{background:#0e92e3}.img-container .buttons .button.button-secondary{background:#ccc;color:#292b2c}.img-container .buttons .button.button-secondary:hover{background:#c6c6c6}.opacity-animation{opacity:0;transition:opacity 100ms 0s linear}.opacity-animation:not(.active){display:none}.opacity-animation.animation-active{opacity:1}@media(max-width:800px){body>*{width:100% !important}
}