.inter{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"slnt" 0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter;margin:0 auto;overflow:hidden;height:100vh;max-width:768px}#notesAppContainer{position:relative;padding:16px;display:flex;flex-direction:column;height:100%}button{cursor:pointer}.hidden{display:none!important}.title-large{color:#1b1c1e;font-weight:500;font-size:20px;line-height:30px}.title-extramedium{color:#1b1c1e;font-weight:500;font-size:16px;line-height:25.6px}.title-medium{color:#1b1c1e;font-weight:500;font-size:14px;line-height:23.8px}.text-extramedium{color:#3b3c3e;font-weight:400;font-size:16px;line-height:25.6px}.text-medium{color:#3b3c3e;font-weight:400;font-size:14px;line-height:23.8px}.text-small{color:#3b3c3e;font-weight:400;font-size:12px;line-height:15.6px}.icon-large{width:30px;height:30px}.icon-medium{width:24px;height:24px}.icon-small{width:20px;height:20px}.searchbar{display:inline-flex;align-items:center;column-gap:8px;width:100%;padding:8px 12px;border-radius:12px;color:#5b5c5e;background-color:#eeeff0}.searchbar input{padding-block:0;padding-inline:0;flex-grow:1;height:24px;color:#5b5c5e;outline:none;border:none;background-color:transparent;font-family:Inter}.heading{display:inline-flex;align-items:center;column-gap:8px;height:30px;width:180px}.button{display:inline-flex;justify-content:center;align-items:center;text-align:center;column-gap:8px;height:40px;line-height:24px;padding:8px 16px;border-radius:12px;font-family:Inter;font-weight:500;font-size:16px;transition:.2s}.button.dark{color:#fff;border:none;background-color:#6b3c9b}.button.dark:hover{background-color:#844dba}.button.dark:active{background-color:#5b2f87}.button.light{color:#1b1c1e;border:1px solid #cccccc;background-color:#fff}.button.light:hover{background-color:#e7e7e7}.button.light:active{background-color:#bdbdbd}.note{display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;width:100%;border-radius:12px;padding:12px;row-gap:12px;border:1px solid #6b3c9b;box-shadow:0 4px 16px #00000012}.note>div{width:100%}.note .titlebar{display:flex;align-items:center;justify-content:space-between}.note .titlebar .controls{display:flex;column-gap:8px}.note .titlebar .controls svg{cursor:pointer}.note .body{word-wrap:break-word}.note .adddate{color:#5b5c5e}.customTextarea{position:relative;height:auto;padding:10px 16px 72px;border-radius:12px;background:#fff;border:2px solid #1b1c1e}.customTextarea textarea{width:100%;height:82px;min-height:60px;max-height:180px;font-family:Inter;font-size:16px;line-height:25.6px;font-weight:400;padding-right:6px;color:#5b5c5e;border:none;resize:none;outline:none}.customTextarea textarea::-webkit-scrollbar{width:6px}.customTextarea textarea::-webkit-scrollbar-track{background-color:transparent}.customTextarea textarea::-webkit-scrollbar-thumb{background-color:#1b1c1e85;border-radius:12px}.customTextarea button.add{position:absolute;bottom:20px;right:16px}.customTextarea .dragger{position:absolute;bottom:0;right:0;transform:translate(-25%,-25%);cursor:nw-resize}.upperArea{display:flex;flex-direction:column;justify-content:space-evenly;align-items:stretch;row-gap:24px;margin-bottom:24px}.addNewNote{display:flex;flex-direction:column;gap:24px;width:100%;margin:24px 0;padding:20px 16px;box-shadow:0 0 16px #00000014;border-left:0;border-right:0;border-style:solid;border-color:#eeeff0;background:#fff}.addNewNote .upperbar{display:flex;align-items:center;justify-content:space-between}.addNewNote .upperbar .cancel{color:#0f75b8;border:none;outline:none;background-color:transparent}.noNotesYet{display:flex;flex-direction:column;align-items:center;justify-content:space-between;row-gap:16px;padding:16px 0}.noNotesYet .texts{display:flex;flex-direction:column;align-items:center;justify-content:space-between;row-gap:12px;width:80%;text-align:center}.notesList{display:flex;flex-direction:column;flex-grow:1;row-gap:24px;padding-right:6px;max-height:100%;height:auto;overflow-x:hidden;overflow-y:auto}.notesList::-webkit-scrollbar{width:6px}.notesList::-webkit-scrollbar-track{background-color:transparent}.notesList::-webkit-scrollbar-thumb{background-color:#1b1c1e85;border-radius:12px}#modal-container{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:0;margin:0;z-index:1000}#modal-container.hidden{z-index:0}#modal-container .overlay{background-color:#0000004d;width:100%;height:100%;display:flex;align-items:center;justify-content:center}#modal-container .overlay .modal{width:90%;background-color:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 4px #00000026;display:flex;flex-direction:column;row-gap:24px}#modal-container .overlay .modal .buttons{display:flex;column-gap:16px}#modal-container .overlay .modal .buttons .button{flex-grow:1}