.add__note-btn{position:fixed;bottom:30px;right:30px;width:56px;height:56px;display:flex;justify-content:center;align-items:center;box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;background:#f3edf7;border-radius:16px;transition:.5s;transform:scale(1)}.add__note-btn.no-active{transform:scale(0)}.add__note-btn:active{transform:scale(.95)}.main{padding-top:30px;display:flex;flex-direction:column;gap:30px}.main__header{display:flex;align-items:center;justify-content:space-between}.main__header-title{color:#323232;font-size:22px;font-weight:400;line-height:28px}.main__header button{border-radius:16px;width:121px;height:56px;box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;background:#f3edf7;padding:16px 20px;display:flex;align-items:center;justify-content:center;gap:14px}.main__header button span{color:#6750a4;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px}.note__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:30px}.note__list.between{grid-template-columns:1fr}.note__list-item{padding:16px;border-radius:16px;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;background:#f3edf7}.note__list-item-top{display:flex;flex-direction:column}.note__list-item-top.between{flex-direction:row;justify-content:space-between}.note__list-item-title{color:#1c1b1f;font-size:16px;font-weight:500;line-height:24px;letter-spacing:.1px}.note__list-item span{color:#cac4d0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px}.note__list-item-body{color:#49454f;font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;margin-top:16px}.note__list-item-btns{display:flex;justify-content:end;align-items:center;gap:24px;margin-top:12px}.note__list-item-btn{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;text-align:center;text-transform:uppercase;transition:.5s}.note__list-item-btn:active{transform:scale(.95)}.note__list-item-btn.edit{color:#6750a4}.note__list-item-btn.remove{color:#cf1b1b}.fade-enter{opacity:0;transform:scale(.9)}.fade-enter-active{opacity:1;transform:scale(1);transition:opacity .5s,transform .5s}.fade-exit{opacity:1;transform:scale(1)}.fade-exit-active{opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}.modal{width:100%;position:fixed;top:0;left:0;background:#00000059;height:100%;visibility:hidden;transition:.5s;opacity:0;display:flex;justify-content:center;align-items:center}.modal.active{visibility:visible;opacity:1}.modal__dialog{padding:24px;box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;background:#f3edf7;border-radius:24px;width:100%;max-width:312px;display:flex;flex-direction:column;gap:16px}.modal__dialog-title{color:#1c1b1f;font-size:24px;font-weight:400;line-height:32px}.modal__dialog label{display:flex;flex-direction:column;border-radius:4px 4px 0 0;background:#e7e0ec;border-bottom:1px solid black;padding:8px 16px}.modal__dialog label span{color:#6750a4;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px}.modal__dialog label input{color:#49454f;font-size:16px;font-weight:400;line-height:24px;letter-spacing:.5px}.modal__dialog label input::placeholder{color:#49454f}.modal__dialog-btns{display:flex;align-items:center;justify-content:end;gap:8px}.modal__dialog-btns button{padding:10px 12px}.modal__dialog-btns button span{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;text-align:center;text-transform:uppercase}.modal__dialog-btns button span.add{color:#6750a4}.modal__dialog-btns button span.cancel{color:#cf1b1b}.nav{height:64px;box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;background:#f3edf7;display:flex;justify-content:space-between;align-items:center;padding:0 16px}.nav__title{color:#1c1b1f;font-size:22px;font-weight:400;line-height:28px}.nav button{transition:.5s}.nav button:active{transform:scale(.95)}.nav button span{font-size:20px;color:#1c1b1f}.nav input{width:90%;color:#9d9d9d;font-size:16px;font-weight:400;line-height:20px}.nav input::placeholder{color:#9d9d9d}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto}li{list-style:none}a{text-decoration:none}button,input{border:none;outline:none;background:unset;cursor:pointer}@font-face{font-family:Roboto;src:url(/assets/Roboto-Regular-BHeBnKzs.ttf);font-weight:400}@font-face{font-family:Roboto;src:url(/assets/Roboto-Medium-CFKDKRMh.ttf);font-weight:500}.container{width:100%;max-width:1160px;margin:0 auto;padding:0 15px}::-webkit-scrollbar{width:0}