body{margin:0}#app{width:50%;margin:0 auto;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}#app .home,#app .note{height:100vh;display:flex;flex-direction:column}#app .home .main-block,#app .note .main-block{flex:1 0 87%;margin-top:15px;border:1px solid #d3d3d3}#app .home .main-block .title-label,#app .note .main-block .title-label{display:flex;width:100%}#app .home .require,#app .note .require{flex:0 0 8%;width:100%;color:#2c3e50}#app .home .require span,#app .note .require span{float:right;padding-right:10px}#app .edit,#app .remove{cursor:pointer;font-size:1rem;padding:5px 10px;border:none;border-radius:10%;color:#f5f5f5;transition:all .3s ease-out}#app .remove{background-color:#f08080}#app .remove:hover{background-color:darkred}#app .edit{margin-right:5px;background-color:green}#app .edit:hover{background-color:#006400}#app a{text-decoration:none;color:#6495ed}#app .head{justify-content:space-between;padding-right:10px;padding-left:10px}#app .head,#app .head .btn-block{display:flex;align-items:center}#app .head .btn-block button{border-radius:3px}#app .head .btn-block span{display:block;margin-top:-4px}#app .head h1{text-shadow:2px 2px 1px #d3d3d3}#app .head .add{cursor:pointer;font-size:2rem;line-height:26px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:#6495ed;color:#f5f5f5;border:none;border-radius:10%;transition:all .3s ease-out}#app .head .add:hover{background-color:#483d8b}.empty{text-align:center;font-size:18px;padding-left:10px;padding-right:10px}.tasks{flex-direction:column;-webkit-padding-start:20px;padding-inline-start:20px;list-style-type:none;padding-left:0}.tasks li{position:relative;word-break:break-all;padding-right:10px}.tasks li:nth-child(3):after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";width:100%;z-index:20;background:linear-gradient(hsla(0,0%,100%,.4),#fff)}.notes{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d3d3d3;padding:0 10px}.notes:last-child{border-bottom:1px solid #d3d3d3}.notes .action-note{display:flex;justify-content:end;flex:1 0 28%}.notes .note-section{flex:1 0 72%}.notes .note-section .note-title{font-size:24px;margin-bottom:10px;margin-top:10px;word-break:break-all}.title-input{border:none;outline:none;font-size:24px;width:100%;margin-top:30px;margin-bottom:15px;padding:0 10px;caret-color:#6495ed;color:#777377}.modal .dialog{color:#000;background:#f5f5f5;padding:30px;border-radius:5px}.modal .dialog .dialog-actions{display:flex;justify-content:end}.modal .dialog .dialog-actions button{color:#323233;font-weight:700;border:none;padding:10px 15px;border-radius:5px;transition:all .2s ease-out}.modal .dialog .dialog-actions button:first-child{background-color:#90ee90;margin-right:5px}.modal .dialog .dialog-actions button:last-child{background-color:#d3d3d3}.modal .dialog .dialog-actions button:first-child:hover{background-color:#006400;color:#fff}.modal .dialog .dialog-actions button:last-child:hover{background-color:#a9a9a9;color:#fff}@media only screen and (max-width:768px){#app{width:90%}#app .dialog{width:218px}#app .title-input{margin-top:10px;margin-bottom:5px}#app h1{margin-top:5px;margin-bottom:5px}#app .task .task-input{width:90%}}.tip{left:0;top:0;text-align:center;font-size:16px;position:fixed;width:100%;padding:15px;background-color:#6495ed;color:#fff}.done{-webkit-text-decoration:line-through 2px #3d4148;text-decoration:line-through 2px #3d4148}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.modal[data-v-7a5cf440]{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:40;display:flex;justify-content:center;align-items:center}.done-block{position:absolute;width:100%;height:.1rem;background-color:#595959;top:calc(50% - .1rem)}.task{display:flex;align-items:center;justify-content:space-between;padding:10px;border-top:1px solid #d0c4c4}.task:last-child{border-bottom:1px solid #d0c4c4}.task .desc-block{width:90%;display:flex;justify-content:center;align-items:center}.task .desc-block input[type=checkbox]{width:1.2rem;height:1.2rem;margin-right:5px}.task .desc-block .description{width:100%;position:relative;word-break:break-all}.task .desc-block .description input{width:100%;border:none;outline:none;padding:10px;background-color:transparent;caret-color:#6495ed;color:#777377}