body{overflow:auto;height:100vh;font-family:sans-serif;background-color:red;color:#0d311d}#app{padding-bottom:100px}aside{position:fixed;width:100%;height:100%;top:0;left:0;z-index:3;transition:all .2s linear;background-color:rgba(0,0,0,0);pointer-events:none}aside.show{pointer-events:unset;background-color:rgba(0,0,0,.7)}aside .menu{width:70%;max-width:500px;background-color:#fff;height:100%;padding:20px;box-sizing:border-box;transform:translateX(-100%);transition:inherit;display:flex;flex-direction:column}aside .menu ul{flex-grow:1;overflow-y:auto;padding-left:0;list-style:none}aside .menu ul li{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between}aside .menu ul li .delete-gallery{font-weight:700;color:red;cursor:pointer}aside.show .menu{transform:translateX(0)}aside .menu h2{margin:0}aside .menu h2 .version-no{font-size:14px;font-weight:400}.image-container{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:5px;align-items:center}.image-item{background-color:#fff;height:120px;overflow:hidden;position:relative}.image-item.disabled{filter:opacity(.4) grayscale(1)}.image-item input[type=checkbox]{position:absolute;top:5px;right:5px;width:20px;height:20px}.image-item img{width:100%;height:100%;object-fit:contain}.action-group{position:fixed;bottom:0;left:0;width:100%;padding:0;display:flex;justify-content:space-between;box-sizing:border-box}.action{padding:10px 15px;font-weight:700;border-radius:100px;font-size:18px;line-height:1.2;min-width:calc(18px * 1.2 + 20px);box-shadow:2px 2px 10px -1px #562c2c;border:none;color:#f2542d;margin-bottom:30px}.action .btn-text{font-size:12px}.menu-toggle{margin-left:20px}.add{margin-right:20px}.shake{width:50%;color:#fff;background-color:#f2542d;box-shadow:2px 2px 10px -1px #f5dfbb}.cancel-multiple,.delete,.disable{padding:20px 10px;margin-bottom:0;flex-grow:1;border-radius:0;box-shadow:none}.delete,.disable{border-right:1px solid #ddd}.delete{color:red}.disable{color:#127475}.cancel-multiple{color:#555}.hidden{display:none}.result{position:fixed;width:100%;height:100%;background-color:#000;top:100%;left:0;transition:all .2s linear}.result.show{top:0}.result img{width:100%;height:100%;object-fit:contain}.add-gallery{border-top:1px solid #eee;padding-top:12px}.update-notification{position:fixed;width:calc(100% - 20px);top:10px;left:0;margin:10px;max-width:500px;border-radius:5px;padding:10px 15px;box-sizing:border-box;background-color:#fff;box-shadow:0 0 7px 1px #000;transform:translateY(-50%);opacity:0;transition:all .1s linear}.update-notification.show{transform:translateY(0);opacity:1}.update-notification .content .title{font-weight:700;margin-top:5px}.update-notification .actions{display:flex;padding-top:5px}.update-notification .actions .action-item{flex-grow:1;text-align:center;padding:5px;font-weight:700;cursor:pointer}.update-notification .actions .action-item:not(:last-child){border-right:1px solid #ccc}.loader-wrap{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex}.loader-wrap .loader-core{position:absolute;top:calc(50% - 3px);left:calc(50% - 3px);width:6px;height:6px;background-color:#fff;border-radius:100%}.loader-wrap .loader{position:absolute;top:calc(50% - 30px);left:calc(50% - 30px);width:60px;height:60px}.loader-wrap .loader .loader-icon{width:6px;height:6px;background-color:#fff;border-radius:100%;position:absolute;top:27px;left:27px;animation:loader-move .9s linear 0s infinite;transform-origin:center center}.loader-wrap .loader .loader-path{position:absolute;top:0;left:15px;width:29px;height:58px;border:1px solid #fff;transform-origin:center center;border-radius:100%}.loader-wrap .loader:nth-child(2){transform:rotate(120deg)}.loader-wrap .loader:nth-child(3){transform:rotate(240deg)}.loader-wrap .loader:nth-child(2) .loader-icon{animation-delay:.3s}.loader-wrap .loader:nth-child(3) .loader-icon{animation-delay:.6s}@keyframes loader-move{0%{transform:translate(-15px,0)}5%{transform:translate(-14.806px,4.811px)}10%{transform:translate(-14.099px,10.243px)}15%{transform:translate(-12.357px,17.007px)}20%{transform:translate(-8.173px,25.155px)}25%{transform:translate(0,30px)}30%{transform:translate(8.173px,25.155px)}35%{transform:translate(12.357px,17.007px)}40%{transform:translate(14.099px,10.243px)}45%{transform:translate(14.806px,4.811px)}50%{transform:translate(15px,0)}55%{transform:translate(14.806px,-4.811px)}60%{transform:translate(14.099px,-10.243px)}65%{transform:translate(12.357px,-17.007px)}70%{transform:translate(8.173px,-25.155px)}75%{transform:translate(0,-30px)}80%{transform:translate(-8.173px,-25.155px)}85%{transform:translate(-12.357px,-17.007px)}90%{transform:translate(-14.099px,-10.243px)}95%{transform:translate(-14.806px,-4.811px)}100%{transform:translate(-15px,0)}}@media screen and (min-width:1400px){.container{max-width:1200px;margin:auto}.image-container{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.image-item{height:230px}.update-notification{left:calc(50% - 250px)}}