.wrapper{width:100%;max-width:1600px;margin:0 auto;justify-content:center;align-items:center;display:flex;height:calc(100vh - 52px)}.card-wrapper{width:80%;display:flex;height:70vh}.left-panel{width:25%;overflow:hidden}.divider{width:4%;justify-content:center;display:flex}.right-panel{width:70%}.new-note{display:flex;width:100%;justify-content:center;flex-direction:row;align-items:center;gap:var(--xxs);padding:var(--xs) var(--base);background-color:var(--background);border-radius:var(--s);cursor:pointer}.notes-list-container{height:100%;.notes-list{display:flex;flex-direction:column;row-gap:24px;overflow:scroll;@media (max-width:600px){display:grid;grid-template-columns:repeat(2,1fr);grid-gap:16px;gap:16px}}.list-item{width:100%;padding:16px;border:2px solid var(--border-divider);border-radius:var(--s);cursor:pointer;.title{white-space:nowrap}.description,.title{overflow:hidden;text-overflow:ellipsis}.description{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}}}.create-note{position:relative;background-color:var(--background);overflow:hidden}.create-note .MuiInputBase-root:after,.create-note .MuiInputBase-root:before{border-bottom:none!important}.new-note-right{display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer}.preview{.title-wrapper{display:flex;justify-content:space-between;column-gap:var(--m);align-items:flex-start}.edit-icon{border:2px solid var(--btn-links);border-radius:100%}.delete-icon,.edit-icon{width:var(--xl);height:var(--xl);display:flex;align-items:center;justify-content:center;cursor:pointer}.delete-icon{border:2px solid var(--error);border-radius:100%}}.chip-wrapper{display:flex;gap:var(--s)}.tools-panel{.tools-container{display:flex;align-items:center;border-radius:999px;border:2px solid var(--btn-links);justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.1);width:40px;height:40px;transition:width .3s ease;overflow:hidden;box-sizing:border-box}.tools-container.expanded{width:235px}.tools-icons{display:flex;gap:var(--s);align-items:center;margin-left:var(--s);flex-grow:1;.bgColor{background-color:var(--surface)}.tools{width:32px;height:32px;justify-content:center;display:flex;align-items:center;border-radius:100%;&:hover{background-color:var(--surface)}}}.color-wrapper{position:absolute;top:-48px;left:120px;background-color:var(--surface);border:2px solid var(--border-divider);border-radius:var(--xxs);padding:var(--xs);width:120px;.no-color{padding:4px;border:2px solid var(--border-divider);border-radius:var(--xxs);display:flex;justify-content:center;align-items:center;margin-bottom:var(--s)}.color-block{display:flex;flex-wrap:wrap;row-gap:var(--s);column-gap:var(--s);.color-item{width:var(--base);height:var(--base)}}}}