@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);*{box-sizing:border-box;padding:0}*,body{margin:0}body{font-family:Poppins,sans-serif}.app-container{background-color:#f3f4f7;max-width:100%;min-height:100vh;padding:2rem 1rem;position:relative}.form-area{display:grid;margin-bottom:2rem;place-items:center;position:relative;width:100%}.form-area form{background-color:#fff;border-radius:1rem;box-shadow:0 2px 4px -2px #1018280f,0 4px 8px -2px #1018281a;display:flex;flex-direction:column;padding:1rem 1.5rem;position:relative;transition:all .3s;width:450px}.form-area.edit{background-color:rgba(0,0,0,.371);height:100vh;left:0;position:fixed;top:0;transition:all .3s;z-index:999}.form-area.edit.hidden{opacity:0;pointer-events:none}.form-area.edit.hidden form{-webkit-transform:scale(.5);transform:scale(.5)}.form-area h3{color:#728ddd;font-weight:600;margin:0 0 .5rem}.form-area input,.form-area label{display:block;font-size:.85rem;margin:.4rem 0}.form-area label{font-weight:500}.form-area input,.form-area textarea{background-color:#f3f4f7;border:2px solid #f3f4f7;border-radius:.25rem;font-family:Poppins,sans-serif;font-size:.9rem;outline:none;padding:.5rem .75rem;position:relative;resize:none}.form-area input::-webkit-input-placeholder,.form-area textarea::-webkit-input-placeholder{color:#949fae}.form-area input::placeholder,.form-area textarea::placeholder{color:#949fae}.form-area button{background-color:#728ddd;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:.85rem;margin:1rem 0 .5rem;padding:.65rem;text-align:center;transition:all .3s;width:100%}.form-area button:hover{background-color:#5369ab}.filter{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem}.filter-btn{background-color:#fff;border:none;border-radius:.5rem;box-shadow:0 4px 8px -2px #51596a1a;color:#728ddd;cursor:pointer;outline:none;padding:.65rem 1.25rem}.filter-btn.active{background-color:#728ddd;color:#fff}.tasks .title{margin-bottom:2rem;text-align:center;text-transform:capitalize}.task-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.task-box{word-wrap:break-word;background-color:#fff;border-radius:1rem;border-top:4px solid transparent;box-shadow:0 4px 8px -2px #1018281a;display:flex;flex-direction:column;height:-webkit-max-content;height:max-content;overflow:hidden;padding:.75rem 1.5rem 1.25rem;position:relative;width:300px}.task-box.completed{border-color:#728ddd}.task-completed{background-color:initial;border:1px solid #b5bcc5;border-radius:50%;color:#b5bcc5;cursor:pointer;display:grid;height:20px;place-items:center;position:absolute;right:.5rem;top:.5rem;width:20px}.task-completed i{position:relative;top:-2px}.task-completed.completed{background-color:rgba(208,197,242,.15);border-color:#728ddd;color:#728ddd}.task-id{color:#b5bcc5;font-size:.7rem;font-weight:500;margin-bottom:.75rem}.task-id span,.task-label{color:#728ddd}.task-label{font-size:.85rem;font-weight:600}.task-text{color:#23262c;font-size:.85rem;margin:0 0 .75rem;max-height:150px;overflow-y:scroll}.task-text::-webkit-scrollbar{width:3px}.task-text::-webkit-scrollbar-track{background:transparent}.task-text::-webkit-scrollbar-thumb{background:#f3f4f7}.task-text::-webkit-scrollbar-thumb:hover{background:#b5bcc5}.task-buttons{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}.task-buttons button{border-radius:.25rem;cursor:pointer;font-size:.7rem;outline:none;padding:.35rem .25rem;text-align:center}.delete-btn{background-color:#fef2f2;border:1px solid #f87171;color:#f87171}.edit-btn{background-color:#edfed1;border:1px solid #64b200;color:#64b200}.empty-message{background-color:#fef2f2;border:1px solid #f87171;border-radius:.5rem;color:#f87171;font-size:.9rem;margin:0 auto;padding:1rem 1.5rem;text-align:center;width:-webkit-max-content;width:max-content}.empty-message.fields{font-size:.8rem;padding:.75rem 1.25rem;text-align:left;width:100%}@media screen and (max-width:500px){.form-area form{width:100%}}
/*# sourceMappingURL=main.84e70d0d.css.map*/