@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--primary-color: #131927;--secondary-color: #9ea2ae;--background-color: #f9fafc;--button-color: #4e61f6}*{font-family:Inter,sans-serif;margin:0;padding:0;box-sizing:border-box;color:var(--primary-color)}body{width:100vw;height:100vh}body #root{width:100%;height:100%;display:flex}.main{width:77%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.main .left-arrow-icon{cursor:pointer}.main .note-form{box-sizing:border-box;padding:2rem;margin:3rem;align-self:stretch;height:80%;display:flex;flex-direction:column;align-items:start;justify-content:flex-start;box-shadow:0 1px 17px 1px #00000040;border-radius:20px}.main .note-form label{font-size:1rem;font-weight:500;margin:.5rem 0}.main .note-form input,.main .note-form textarea,.main .note-form select,.main .note-form option{background-color:var(--background-color);border:#e5e7ea 1px solid;border-radius:8px;color:var(--secondary-color);width:100%;padding:.5rem;height:2.5rem;cursor:pointer}.main .note-form select{appearance:none;background-image:url("data:image/svg+xml,%3csvg%20width='14'%20height='8'%20viewBox='0%200%2014%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201L7%207L13%201'%20stroke='%239EA2AE'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:.8rem}.main .note-form .note-title,.main .note-form .note-priority{display:flex;flex-direction:column;width:100%;height:15%}.main .note-form .note-content{display:flex;flex-direction:column;width:100%;flex-grow:1}.main .note-form .note-content textarea{resize:none;height:90%}.main .note-form .note-delete-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:2rem;padding-bottom:0}.main .note-form .note-delete-button img{align-self:flex-end;width:1.5rem;cursor:pointer}.main .disabled{opacity:.3;pointer-events:none}@media (max-width: 780px){.main{width:100%}.main .app-name{margin-bottom:0;width:100%;text-align:center;padding:1rem;border-bottom:1px solid #4e61f6;display:flex;justify-content:center;align-items:center}.main .app-name h1{font-size:1.5rem}.main .app-name .left-arrow-icon{position:absolute;left:2rem}.main .note-form{box-shadow:none;width:100%;height:100%;margin:0;padding:0}.main .note-form .note-title,.main .note-form .note-priority,.main .note-form .note-content{padding:1rem}.main .note-form .note-delete-button{padding:1rem 2rem 2rem}}.saved-notification{margin-left:auto;font-weight:200;font-style:italic;font-size:.875rem;transition:all .5s ease}.hidden{opacity:0}@media (max-width: 780px){.saved-notification{position:absolute;top:5rem;right:1.5rem}}.loader{width:50px;aspect-ratio:2;--_g: no-repeat radial-gradient(circle closest-side, var(--button-color) 90%, #00000000);background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:calc(100% / 3) 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.user-display{align-self:flex-end;margin-top:1rem;display:flex;align-items:center;justify-content:space-between;margin-right:3rem}.user-display .user-name-display{font-size:1rem;font-weight:600}.user-display button{font-size:.625rem;font-weight:500;color:var(--button-color);border:2px solid var(--button-color);background-color:transparent;height:1.5rem;width:4.25rem;border-radius:8px;padding:0;text-align:center;align-items:center;cursor:pointer}.user-display img{width:1.5rem;margin:.7rem}h2{font-size:1.5rem;font-weight:600}h4{font-size:1rem;font-weight:500;margin:.5rem 0}h6{font-size:.875rem;font-weight:400;margin:1rem 0}.user-selection .users-list{margin:1rem 0;background-color:var(--background-color);border-radius:10px}.user-selection .users-list .user-item{padding:1rem .5rem;display:flex;justify-content:space-between;align-items:center;margin:.5rem;font-size:1rem;font-weight:400;height:2.5rem;cursor:pointer;transition:all .3s ease}.user-selection .users-list .active{transform:scale(105%);font-weight:700}@media (max-width: 780px){.user-selection{width:100%;display:flex;flex-direction:column}.user-selection .app-name{width:100%;text-align:center;padding:1rem;border-bottom:1px solid #4e61f6;display:flex;justify-content:center;align-items:center}.user-selection .app-name h1{font-size:1.5rem}.user-selection .app-name .left-arrow-icon{position:absolute;left:2rem}.user-selection .add-user-button{font-weight:700;margin:.5rem 0;align-self:flex-end;padding:1rem}.user-selection .add-user-button button{background-color:var(--button-color);border:none;color:#fff;border-radius:10px;padding:10px 20px;font-size:.875rem;font-weight:500;width:8.5rem;height:2.5rem;display:flex;align-items:center;cursor:pointer;height:3rem;width:10rem}.user-selection .add-user-button button img{margin-right:20px;width:.875rem}.user-selection .users-list{margin:1rem;background-color:var(--background-color);border-radius:5px}.user-selection .users-list .user-item{display:flex;justify-content:space-between;align-items:center;margin:1rem;font-size:1rem;font-weight:400;height:2.5rem;cursor:pointer;transition:all .3s ease}.user-selection .users-list .active{transform:scale(105%)}}.modal{height:100%;width:100%;background-color:#00000080;position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.modal .modal-content{border-radius:20px;padding:1.5rem;width:80%;max-width:700px;background-color:#fff}.add-user{display:flex}.add-user input{background-color:var(--background-color);border:#e5e7ea 1px solid;border-radius:8px;color:var(--secondary-color);width:100%;padding:.5rem;height:2.5rem;cursor:pointer;align-self:stretch}.add-user button{background-color:var(--button-color);border:none;color:#fff;border-radius:12px;width:8rem;height:2.5rem;margin-left:.5rem;font-size:.875rem;font-weight:500;cursor:pointer}@media (max-width: 780px){.add-user{flex-direction:column}.add-user input{width:100%}.add-user button{width:100%;margin:.5rem 0 0}}.add-note-button{font-weight:700;margin:2rem 0}.add-note-button button{background-color:var(--button-color);border:none;color:#fff;border-radius:10px;padding:10px 20px;font-size:.875rem;font-weight:500;width:8.5rem;height:2.5rem;align-self:self-end;display:flex;align-items:center;cursor:pointer}.add-note-button button img{margin-right:10px;width:.875rem}.disabled{opacity:.5;pointer-events:none}@media (max-width: 780px){.add-note-button{margin:.5rem 0;padding:1rem}.add-note-button button{height:3rem;width:10rem}.add-note-button button img{margin-right:20px}}.note-list-priority{margin:1.5rem 0;background-color:var(--background-color);border-radius:10px}.note-item{display:flex;justify-content:space-between;align-items:center;margin:1rem;font-size:1rem;font-weight:500;height:2rem;cursor:pointer;transition:all .3s ease}.active{transform:scale(1.1)}@media (max-width: 780px){.note-item .edit-mobile-span{color:#6d717f;margin-right:1rem}.active{transform:none}}.side-bar{padding:1.5rem;display:flex;flex-direction:column;align-items:center;width:23%;height:100%;background-color:var(--background-color);box-shadow:1px 0 9px 1px #00000040}.side-bar .app-name{margin-bottom:1rem}.side-bar .app-name h1{font-size:1.5rem}.side-bar .add-note-container{width:100%;display:flex;align-items:center;justify-content:space-between}.side-bar .add-note-container .loader-container{margin:0 auto}.side-bar .note-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}@media (max-width: 780px){.side-bar{width:100%;height:100%;margin:0 auto;padding:0;box-shadow:none;background-color:#fff}.side-bar .app-name{margin-bottom:0;width:100%;text-align:center;padding:1rem;border-bottom:1px solid #4e61f6;display:flex;justify-content:center;align-items:center}.side-bar .app-name h1{font-size:1.5rem}.side-bar .app-name .left-arrow-icon{position:absolute;left:2rem}.side-bar .note-list{width:95%;padding:1rem;background-color:#fff;border-radius:10px}}