.app{display:flex;align-items:center;flex-direction:column;width:100%;min-height:100vh;height:100%;background-color:gray}.app .container{max-width:1368px;min-width:280px;width:100%;padding:0 1rem}.wrapper{display:flex;flex-direction:column;gap:2rem;margin:2rem;padding:0 2rem}.search-wrapper{height:45px;width:40%;display:flex;align-items:center;align-self:flex-end;background-color:#ffffff80;border-radius:.3rem;overflow:hidden}.search-wrapper .search-input{height:100%;width:100%;padding:.4rem .8rem;font-size:1rem;background-color:transparent;border:none;outline:none;color:#fff}.search-wrapper .search-input::placeholder{color:#f5f5f5}.search-wrapper .search-btn{height:100%;width:45px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:#f5f5f5;background-color:transparent}.search-wrapper .search-btn i{font-size:1.5rem}.notes-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}@media (max-width: 991px){.notes-wrapper{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.notes-wrapper{display:flex;flex-direction:column}}@media (max-width: 580px){.container{padding:0 .8rem}.search-wrapper{width:100%}}.navbar{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background-color:gray;position:sticky;top:0;z-index:999}.nav-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;color:#fff}.logo{font-size:2rem;font-weight:700;cursor:pointer}.nav-options{display:flex;align-items:center}.nav-icon{height:45px;width:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#ffffff80;margin-left:1rem;cursor:pointer;position:relative}.nav-icon i{font-size:1.5rem}.nav-icon:hover{background-color:#fff3}.palettes{display:flex;align-items:center;position:absolute;right:0px;padding:.5rem 1rem;gap:1rem;background-color:#ffffff80;border-radius:20px;transition:all .3s;opacity:0;z-index:-1}.palettes.active{right:50px;opacity:1;z-index:1}.palette-item{height:25px;width:25px;border-radius:50%}.palette-item.active,.palette-item:hover{border:2px solid white}.note-card-wrapper{display:flex;flex-direction:column;width:100%;min-height:150px;height:100%;border-radius:.3rem;background-color:#fff;color:#333;padding:1.5rem;overflow:hidden}.card-title{font-size:1.2rem;--max-lines: 2;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max-lines);word-wrap:break-word;cursor:pointer}.card-body{margin:.5rem 0;--max-lines: 2;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max-lines)}.card-details{font-size:14px;color:gray;cursor:pointer;width:fit-content}.card-footer{margin-top:.5rem;display:flex;align-items:center;justify-content:space-between}.card-timeline{font-size:14px;color:gray;font-style:italic}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.action-item{cursor:pointer;opacity:.8}.action-item:hover{opacity:1}.action-item .edit{color:#084083}.action-item .delete{color:#de3f05}.note-details{position:fixed;top:0;left:0;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.details-wrapper{width:40%;min-height:300px;padding:1.5rem;background-color:#fff;color:#333;box-shadow:0 .5rem 1.5rem #00000080;border-radius:.5rem;display:flex;flex-direction:column;gap:1rem}.details-back-btn{height:40px;width:40px;border-radius:50%;border:none;background-color:#0003;display:flex;align-items:center;justify-content:center;cursor:pointer}.details-back-btn i{font-size:1.2rem}.details-title{font-size:1.3rem}.details-timeline{font-size:1rem;color:gray;font-style:italic}@media (max-width: 991px){.details-wrapper{width:70%}}@media (max-width: 768px){.details-wrapper{width:80%}}@media (max-width: 580px){.details-wrapper{width:90%}}.upsert-note{position:fixed;top:0;left:0;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.upsert-wrapper{width:40%;min-height:300px;padding:1.5rem;background-color:#fff;box-shadow:0 .5rem 1.5rem #00000080;border-radius:.5rem;display:flex;flex-direction:column}.upsert-header{display:flex;align-items:center;justify-content:space-between}.upsert-header .close-btn i{font-size:1.5rem;color:#333;cursor:pointer}.upsert-form{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.input-form,.textarea-form{padding:.5rem .8rem;outline:none;border:1px solid #ddd;border-radius:.3rem}.textarea-form{resize:none;height:250px}.upsert-actions{display:flex;align-items:center;justify-content:flex-end}.upsert-actions button{padding:.5rem 2rem;font-weight:700;border:none;margin-left:1rem;border-radius:.3rem;color:#fff;cursor:pointer}.upsert-actions button.clear-btn{background-color:gray}.upsert-actions button.clear-btn:hover{background-color:#9e9d9d}.upsert-actions button.save-btn{background-color:#084083}.upsert-actions button.save-btn:hover{background-color:#07499a}@media (max-width: 991px){.upsert-wrapper{width:70%}}@media (max-width: 768px){.upsert-wrapper{width:80%}}@media (max-width: 580px){.upsert-wrapper{width:90%}}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}.blue-palette{background-image:linear-gradient(to bottom,#0d1282,#0a6ebd)}.rose-palette{background-image:linear-gradient(to bottom,#ff2171,#f266ab)}.violet-palette{background-image:linear-gradient(to bottom,#360d95,#4e31aa)}.black-palette{background-image:linear-gradient(to bottom,#333,#444)}