*{padding:0;box-sizing:border-box}*,body{margin:0}body{height:100vh;font-family:Lato,sans-serif;font-weight:700;font-size:1.5rem;text-transform:uppercase}#app{width:100vw;height:100%;display:flex;transition:background-color .5s}.interface-container{margin:auto;display:flex;flex-direction:column;align-items:center}ul{list-style:none;margin:0;padding:0}li{margin-bottom:5px;display:flex;align-items:center;position:relative}li>button{border-radius:0 10px 10px 0}.button-group button,li>button{background:#000;color:#fff;padding:15px;cursor:pointer;min-width:25px;text-align:center}.moveInput button{font-size:1.25rem;cursor:pointer;height:100%;width:100%;text-align:center}.moveInput button:hover{color:#fff}.moveInput{display:flex;flex-direction:column;justify-content:center;position:absolute;right:100%;height:100%;width:35px}li .up:before{content:"\f062";opacity:0}li .down:before{content:"\f063";opacity:0}li:hover .down:before,li:hover .up:before{opacity:1;transition:opacity .3s ease-out}.down:before,.up:before{font-family:FontAwesome;content:" "}button,input{all:unset}input{display:inline;background:#fff;padding:15px;max-width:225px;border-radius:10px 0 0 10px;transition:color .3s,background .3s ease-out}.lockedInput{background:#000;color:#fff;animation-duration:.6s}li>button:before{font-family:FontAwesome;content:"\f09c"}.locked:before{content:"\f023"}button{transition:.3s}.button-group{display:flex;justify-content:space-between;width:100%}.button-group button{border-radius:10px}.button-group>div>button:first-of-type{margin-right:5px}.button-group>div>button{padding:15px 20px}.button-group button:hover{background:#fff;color:#000}#add:before{font-family:FontAwesome;content:"\f067"}#remove:before{font-family:FontAwesome;content:"\f068"}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}ul li i{content:"#";padding:15px;padding-right:0;background:#fff;border-radius:10px 0 0 10px}li.shake{animation-duration:.75s;animation-name:shake}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.flip-list-move{transition:transform .3s}.flip-list-leave-active{position:absolute;opacity:0}