.template-container{display:flex;flex-wrap:wrap;justify-content:center}.template{width:100px;height:100px;margin:5px;cursor:pointer}canvas,img{width:100px;height:100px;border:1px solid #000}.gif-frame{display:none;margin-bottom:2px;justify-content:center;align-items:center;box-sizing:border-box}.gif-frame-img{max-width:100px;max-height:100px}.gif-frame-item{flex:1;text-align:center;max-width:100px;margin:5px}.gif-to-handle{width:100px;height:100px}#make-gif{border:none;background-color:#1e90ff;color:#fff;padding:1em 0;border-radius:5px;width:100%;font-size:16px;outline:0;cursor:pointer}#output{margin-bottom:5em}#gif-config-panel{display:flex;background-color:#eee;width:100%;background-color:#00f}.frame-config-panel,.text-config-panel{flex:1;display:flex;flex-direction:column;background-color:orange;width:50%}.container{display:flex}.title{background-color:#ccc;text-align:center;padding:10px 0}.left,.text-config-panel{border-right:1px solid #fff}input{font-size:16px;margin:10px 0;padding:5px}.tip-text{font-size:16px;padding:10px;text-align:center;border-bottom:1px solid #fff}.config-item{display:flex;justify-content:space-between}.left,.right{flex:1}hr{border:none;border-bottom:1px solid #eee;margin:2em 0}