@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*{margin:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#f5f5f5;overflow:hidden}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.createfolder{background-color:#fff;border-radius:6px;padding:20px;font-weight:500;letter-spacing:.56px;display:flex;flex-direction:column}.createfolder__title{font-size:29px}.groupname,.choosecolor,.colors{display:flex;gap:20px;align-items:center;margin:15px 0}.groupname>label,.choosecolor>label{font-size:27px}.groupname>input{font-size:23px;font-weight:400;outline:none;border:2px solid #ccc;border-radius:22px;padding:5px 20px}.groupname>input::placeholder{font-weight:400;color:#979797;font-size:23px}.choosecolor{display:flex;gap:20px;align-items:center}.colors{display:flex;gap:5px}.color__palette{width:40px;height:40px;border-radius:50%;cursor:pointer}.create-btn{background-color:#001f8b;color:#fff;border:none;font-weight:400;padding:10px 35px;font-size:20px;border-radius:11px;cursor:pointer;align-self:flex-end;letter-spacing:.56px}@media (max-width: 720px){.createfolder{justify-content:center}.createfolder__title{font-size:18px}.groupname,.choosecolor,.colors{display:flex;gap:10px;align-items:center;margin:10px 0}.groupname>label,.choosecolor>label{font-size:14px}.groupname>input::placeholder{font-size:10px}.color__palette{width:17px;height:17px}.create-btn{font-size:17px;align-self:center;padding:10px 55px}.groupname>input{font-size:10px;font-weight:400;outline:none;border:2px solid #ccc;border-radius:22px;padding:5px 20px}}.titlecard{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:24px;font-weight:500;cursor:pointer}.titlecard__profile{width:70px;height:70px;background-color:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.titlecard__name{letter-spacing:.32px}.titlecard.active{background-color:#2f2f2f2b;border-radius:16px}@media (max-width: 820px){.titlecard{padding:10px;font-size:18px;gap:5px}.titlecard__profile{width:62px;height:62px;font-size:20px}}.sidebar{width:430px;background-color:#f4f4f4;position:sticky;box-shadow:2px 0 5px #0000001a;position:relative;width:25%}.sidebar__title{font-size:35px;font-weight:500;padding:20px;text-align:center;letter-spacing:.32px}.sidebar__titlecards{overflow-y:auto;display:flex;flex-direction:column;gap:5px;height:90vh}.sidebar__addfolder{position:sticky;bottom:30px;left:50%;transform:translate(-50%);background-color:#16008b;color:#fff;width:93px;height:93px;border-radius:50%;cursor:pointer}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:#d9d9d9;border-radius:5.5px}::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4.5px}@media (max-width: 720px){.sidebar{width:100%;display:block}.sidebar__title{font-size:32px}.sidebar__addfolder{left:95%;transform:translate(-50%);background-color:#16008b;width:75px;height:75px;border-radius:50%}.btn-img{width:40%}}.desktop{display:flex}.app__noteSection{display:flex;width:75%;height:100vh;flex-direction:column;justify-content:space-between}.mobile{display:none}@media (max-width: 720px){.app{width:100%;display:block}.desktop{display:none}.mobile{display:block}.app__noteSection{width:100%;height:100vh}}.noteheader{display:flex;align-items:center;gap:10px;padding:10px 30px;background-color:#001f8b;width:100%;color:#fff;font-size:24px;font-weight:500;height:max-content}.noteheader__profile{width:68px;height:68px;background-color:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.noteheader__name{letter-spacing:.32px}.back-btn{background:none;border:none;cursor:pointer;margin-right:10px;display:none}.back-btn img{width:24px;height:24px}@media (max-width: 720px){.back-btn{display:flex}.back-btn img{width:15px}.noteheader__name{font-size:16px}.noteheader__profile{width:48px;height:48px;font-size:16px}}.notedetails{background-color:#dae5f5;width:100%;padding:20px;flex-grow:.6;overflow-y:auto;flex-grow:1}.notedetail__card{background-color:#fff;padding:15px;display:flex;flex-direction:column;gap:20px;box-shadow:#00000059 0 5px 15px;margin:10px 0}.note{letter-spacing:.56;font-weight:400;font-size:18px;line-height:1.5}.time{color:#353535;align-self:flex-end;letter-spacing:.32;font-weight:500;display:flex;align-items:center;gap:8px}.dot{width:4px;height:4px;background-color:#353535;border-radius:50%;display:inline-block}.notedetails::-webkit-scrollbar-track{background-color:#000000a1;border-radius:5.5px}@media (max-width: 720px){.note,.time{font-size:13px}}.noteinbox{background-color:#001f8b;padding:20px;height:max-content}.noteinbox__container{margin:0 auto;background-color:#fff;padding:10px;border-radius:9px;height:150px;display:flex;flex-direction:column}textarea{height:100%;width:100%;padding:10px;font-size:29px;font-weight:400;resize:none;color:#9a9a9a;border:none;outline:none;border-radius:9px}.send__btn{align-self:flex-end;border:none;background:none;cursor:pointer}@media (max-width: 720px){textarea{font-size:17px}.send__btn img{width:21px}}.nonote{width:75%;height:100vh;background-color:#dae5f5;display:flex;flex-direction:column;align-items:center;padding-top:100px;gap:15vh}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:max-content;max-width:75%}.img__container{width:100%;display:flex;justify-content:center}.nonote__title{font-size:50px;font-weight:700}.nonote__img{min-width:100%}.note__description{font-size:22px;font-weight:500;color:#292929;max-width:650px}.footer{display:flex;justify-content:center;align-items:center;justify-self:flex-end;gap:10px}