.header{position:fixed;top:0;left:0;width:100%;z-index:100;text-align:center;background-color:#fe0}.header h1{display:inline-block;padding:12px 16px;font-size:14px;font-weight:700;line-height:1;text-transform:uppercase;text-align:center;color:#000}*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:Helvetica Neue,Arial,Sans-serif;color:#fff;background-color:#333}.main{height:100vh;padding-top:60px;padding-bottom:100px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.container{padding:0 15px}.empty{padding-top:50px;text-align:center}.empty svg{width:180px;height:180px;margin-bottom:20px}.empty p{font-size:22px}.todo{max-width:600px;margin:0 auto}.todo .sortable-drag{opacity:0}.todo__list{list-style-type:none}.todo__item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;margin-bottom:16px;border-radius:30px;-webkit-box-shadow:0 0 0 1px #fe0;box-shadow:0 0 0 1px #fe0;background-color:hsla(0,0%,100%,.1);cursor:move}.todo__item.sortable-ghost{-webkit-box-shadow:6px 8px 0 rgba(0,0,0,.15);box-shadow:6px 8px 0 rgba(0,0,0,.15);cursor:move}.todo__item.sortable-chosen{cursor:move}.todo__item.sortable-chosen:before{content:"";position:absolute;top:calc(50% - 10px);left:-30px;width:20px;height:20px;border-radius:50%;background-color:#fe0}.todo__item--done{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.15);background-color:hsla(0,0%,100%,.025)}.todo__item:last-of-type{margin-bottom:0}.todo__item .checkbox{position:absolute;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:60px;height:100%}.todo__title{width:100%;margin-left:60px;padding:10px 15px;font-size:16px;color:#fff;border-radius:25px;border:none;background-color:transparent;outline:none;-webkit-transition-property:background-color,-webkit-box-shadow;transition-property:background-color,-webkit-box-shadow;transition-property:background-color,box-shadow;transition-property:background-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.25s;transition-duration:.25s;overflow:hidden;text-overflow:ellipsis}.todo__title.-js-editing{overflow:visible;text-overflow:clip;-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.35);box-shadow:inset 0 0 4px rgba(0,0,0,.35);background-color:#333}.todo__item--done .todo__title{color:#999;text-decoration:line-through}.todo__delete{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;padding:0 15px 0 10px;border-radius:0 30px 30px 0;cursor:pointer;-webkit-transition:all .25s;transition:all .25s}.todo__item--done .todo__delete{opacity:.25}.todo__delete svg{width:20px;height:20px}.todo__delete:hover{color:#fe0;background-color:rgba(0,0,0,.25)}.checkbox{display:inline-block;position:relative;width:25px;height:25px;padding-left:20px;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkbox__checkmark{position:relative;top:0;left:0;width:25px;height:25px;border-radius:50%;background-color:#eee}.checkbox:hover .checkbox__input~.checkbox__checkmark{background-color:#ccc}.checkbox .checkbox__input:checked~.checkbox__checkmark{background-color:#fe0}.checkbox__checkmark:after{content:"";position:absolute;display:none}.checkbox .checkbox__input:checked~.checkbox__checkmark:after{display:block}.checkbox .checkbox__checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.todo__toolbar{margin-bottom:20px}.form-todo{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.form-todo__input{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:auto;flex-basis:auto;height:40px;padding:10px 15px;font-size:16px;line-height:1;border-radius:25px 0 0 25px;border:0;background-color:#fff;outline:0;-webkit-transition:all .25s;transition:all .25s}.form-todo__input:active,.form-todo__input:focus{-webkit-box-shadow:0 0 0 5px #000;box-shadow:0 0 0 5px #000}.form-todo__submit{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:150px;flex-basis:150px;margin:0;padding:0;font-size:16px;font-weight:700;line-height:1;color:#000;border-radius:0 25px 25px 0;border:3px solid transparent;background-color:#fe0;outline:0;cursor:pointer;-webkit-transition:all .25s;transition:all .25s}.form-todo__submit:hover{border:3px solid #fff67e}.form-todo__submit span{display:inline-block;-webkit-transition:all .25s;transition:all .25s}.form-todo__submit:active span{-webkit-transform:scale(.92);transform:scale(.92)}.clear-all{display:inline-block;margin:0 0 0 15px;padding:0;font-size:12px;text-transform:uppercase;color:#fe0;border:none;background-color:transparent;outline:0;cursor:pointer;-webkit-transition:all .25s;transition:all .25s}.clear-all:hover{color:#fff}.clear-all:active{-webkit-transform:scale(.92);transform:scale(.92)}