h1{font-family:Poppins,sans-serif;font-weight:400}.todoListContainer{width:90%;max-width:800px;margin:100px auto 0}.listColor{display:inline-block;height:20px;width:20px;border-radius:5px;margin-right:1rem}.btn-menu{position:fixed;top:25px;left:25px;height:36px;width:36px;background-color:#dfe1e5;border-radius:10px;padding:10px;z-index:1}.btn-menu:hover{background-color:#b8b8bc;cursor:pointer}.form{background-color:#dfe1e5;border-radius:10px;display:flex}.form__input{border:none;outline:none;background-color:transparent;font-size:16px;padding:1rem;flex:1;font-family:Poppins,sans-serif}.btn-submit{border:none;padding:1rem;border-radius:0 10px 10px 0;font-size:16px;background-color:#e9e9ed}.btn-submit:hover{background-color:#b8b8bc;cursor:pointer}.todolist{padding-left:0}.todo{display:flex;justify-content:space-between;background-color:#fff;padding:1rem;border-radius:10px;font-family:Poppins,sans-serif;margin-bottom:1rem}.todo div{display:flex;align-items:center}.todo__checkbox{position:relative;cursor:pointer}.todo__checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.todo__customCheckbox{position:absolute;top:0;left:0;height:20px;width:20px;background-color:#e9ebed;border-radius:5px}.todo__checkbox:hover input~.todo__customCheckbox{background-color:#ccc}.todo__checkbox input:checked~.todo__customCheckbox{background-color:#000}.todo__customCheckbox:after{content:"";position:absolute;display:none}.todo__checkbox input:checked~.todo__customCheckbox:after{display:block}.todo__checkbox .todo__customCheckbox:after{left:7px;top:2px;width:4px;height:10px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.todo__text{margin-left:30px;display:inline-block;list-style-type:none}.todo__checkbox input:checked~.todo__text{text-decoration:line-through}.btn{border-color:transparent;border-radius:5px;background-color:#e9e9ed;height:36px;width:36px;padding:0}.btn:hover{background-color:#b8b8bc;cursor:pointer}.btn:first-child{margin-right:10px}.listBadge{height:20px;width:20px;border-radius:5px;margin-left:1rem}.modal{display:none;position:fixed;z-index:3;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-shown{display:block}.modal__content{background-color:#fefefe;margin:15% auto;padding:20px;max-width:500px;width:90%;border-radius:10px;display:flex;flex-direction:column}.modal__header{display:flex;justify-content:space-between;margin-bottom:10px}.modal__header h2{font-family:Poppins,sans-serif;margin:0;font-weight:400}.modal__input,.modal__listSelect{border:#dfe1e5 2px solid;border-radius:.5rem;outline:none;padding:.5rem;font-family:Poppins,sans-serif;margin-bottom:10px}.modal__form{display:flex;flex-direction:column}.btn-close{width:32px;border-color:transparent;border-radius:5px;padding-top:5px;background-color:#e9e9ed;align-self:flex-end}.btn-save{background-color:#e9e9ed;border-color:transparent;border-radius:5px;padding:5px 10px;font-family:Poppins,sans-serif;font-size:16px}.btn-save:hover,.btn-close:hover{background-color:#b8b8bc;cursor:pointer}.modal{display:none;position:fixed;z-index:3;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-shown{display:block}.modal__content{background-color:#fefefe;margin:15% auto;padding:20px;max-width:500px;width:90%;border-radius:10px;display:flex;flex-direction:column}.modal__header{display:flex;justify-content:space-between;margin-bottom:10px}.modal__header h2{font-family:Poppins,sans-serif;margin:0;font-weight:400}.modal__content p{font-family:Poppins,sans-serif}.modal__question{text-align:center;font-size:20px}.modal__warning{color:#d20000}.btn-close{width:32px;border-color:transparent;border-radius:5px;padding-top:5px;background-color:#e9e9ed;align-self:flex-end}.btn-remove{background-color:#e60000;color:#fff;border-color:transparent;border-radius:5px;padding:5px 10px;font-family:Poppins,sans-serif;font-size:16px}.btn-close:hover{background-color:#b8b8bc;cursor:pointer}.btn-remove:hover{background-color:#b00;cursor:pointer}.listName-remove{color:red}nav{height:95%;width:0;position:fixed;z-index:2;top:0;left:0;background-color:#fff;overflow-x:hidden;transition:.5s;border-radius:20px;margin:20px;border:#f2f4f4 1px solid}.nav__btn-close{position:absolute;top:25px;right:25px;font-size:36px;background-color:#e9e9ed;height:36px;width:36px;border-radius:10px;text-align:center;line-height:36px}.nav__btn-close:hover{background-color:#b8b8bc;cursor:pointer}.nav-open{width:400px}.nav__linkContainer{width:80%;margin:80px auto;overflow-y:auto}@media screen and (max-height: 450px){nav{height:90%}.sidenav a{font-size:18px}}.link{display:flex;justify-content:space-between;align-items:center;height:36px;cursor:pointer;border-radius:10px;font-family:Poppins,sans-serif;padding:5px}.link-active,.link:hover{background-color:#f4f4f7}.link__info{display:flex;align-items:center}.link__info .listColor{margin:0 10px}.link__name{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:200px}.link__todoCount{color:gray;background-color:#e9e9ed;padding:0 5px;border-radius:5px;margin-right:5px}.btn-trash{background-color:#e9e9ed;padding:0 0 0 2px;margin-right:10px;border-radius:5px;height:25px;width:20px}.btn-trash:hover{background-color:#b8b8bc}.btn-trash svg{margin-block:-3px}.link__right{display:flex}.listForm{display:flex;background-color:#dfe1e5;border-radius:10px}.listForm__name{appearance:none;outline:none;border:none;background-color:transparent;font-family:Poppins,sans-serif;padding:.5rem;flex:1}.listForm__color{border:none;background-color:#f3f3f5;height:36px;width:22px}.listForm__color:hover{background-color:#b8b8bc;cursor:pointer}.listForm button{background-color:#f3f3f5;border:none;border-radius:0 10px 10px 0;font-size:16px;padding:.5rem}.listForm button:hover{background-color:#b8b8bc;cursor:pointer}body{background-color:#f2f4f4}