@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap";:root{--bg-color:#fff}@media (prefers-color-scheme:dark){:root{--bg-color:#202124}}*{font-family:Roboto\, san serif}body{background-color:var(--bg-color);box-sizing:border-box;width:100vw;margin:0;overflow-x:hidden}.material-symbols-outlined{padding:10px}.hover:hover{color:#000;cursor:pointer;background:#f1f3f4;border-radius:50%}.tooltip{display:inline;position:relative}.tooltip-text{color:#fff;opacity:.8;white-space:nowrap;visibility:hidden;z-index:1;background-color:#323232;border-radius:5px;padding:5px;font-size:.78rem;position:absolute;top:100%;left:0}.tooltip:hover .tooltip-text{visibility:visible}:root{--bg-color:#f0f0f0;--text-color:#5f6368;--mobile-bg-color:#282a2c;--hover-bg-color:#e7e7e7;--search-bg-color:#e6e6e6;--border-color:#e6e6e6}@media (prefers-color-scheme:dark){:root{--bg-color:#282a2c;--text-color:#969799;--mobile-bg-color:white;--hover-bg-color:#3c3e40;--border-color:#2a2c30;--search-bg-color:white}}nav{color:var(--text-color);border-bottom:.5px solid #5f6368;justify-content:space-between;align-items:center;padding:.5rem;display:flex}.logo-area{align-items:center;display:flex}.logo-text{font-size:1.2rem}.search-area{border:1px solid var(--border-color);border-radius:8px;align-items:center;width:45.625rem;height:3rem;display:flex}.search-area input{background:var(--bg-color);border:none;width:100%;height:95%;margin-left:.2rem;font-size:1rem;font-weight:bolder}input:focus{outline:none}.search-area span{margin-left:.625rem}.hover:hover{background-color:var(--hover-bg-color);color:var(--text-color)}.tooltip-text{z-index:1000;position:absolute}.mobileSearch{display:none}@media (width<=599px){.search-area,.tooltip-text,.profile-actions-area div:nth-child(3){display:none}.profile-actions-area{align-items:center;display:flex}.mobileSearch{width:2.5rem;display:block}.mobileInput{z-index:1000;background:var(--mobile-bg-color);border-radius:5px;align-items:center;width:60%;display:flex;position:absolute;left:.2rem}.mobileInput .material-symbols-outlined{background-color:var(--mobile-bg-color)}.mobileInput input{background-color:var(--mobile-bg-color);border:none;outline:none}}@media (width<=794px){.search-area,.tooltip-text{display:none}.profile-actions-area{align-items:center;display:flex}.mobileSearch{width:2.5rem;display:block}.mobileInput{z-index:1000;background:var(--mobile-bg-color);border-radius:5px;align-items:center;width:60%;display:flex;position:absolute;left:.2rem}.mobileInput .material-symbols-outlined{background-color:var(--mobile-bg-color)}.mobileInput input{background-color:var(--mobile-bg-color);border:none;outline:none}}@media (width<=1024px){.search-area{width:40%}.tooltip-text{z-index:1000;position:absolute}}@media (width>=1025px) and (width<=1199px){.search-area{width:60%}}:root{--bg-color:white;--text-color:black;--hover-bg-color:#f1f3f4;--active-bg-color:#fef0c3}@media (prefers-color-scheme:dark){:root{--bg-color:#202124;--text-color:#e8eaed;--hover-bg-color:#3c4043;--active-bg-color:#41331c}}.sidebar{z-index:1;color:#5f6368;background-color:var(--bg-color);width:4.0625rem;transition:"ease-in-out 1s";flex-direction:column;height:100%;margin-top:.3125rem;display:flex;position:fixed;top:4rem;left:-.7rem;overflow-x:hidden}.sidebar-shadow{background:var(--bg-color);box-shadow:0 1px 2px #292c2e4d,0 2px 6px 2px #090a0a26}.active{background-color:var(--active-bg-color);color:var(--text-color);border-radius:50%}.active:hover{background-color:var(--active-bg-color)}.sidebar .sidebar-item{cursor:pointer;white-space:nowrap;align-items:center;padding:.1875rem;display:flex}.sidebar-item .sidebar-text{color:var(--text-color);width:15.625rem;margin-left:1.25rem;font-size:.9rem}.sidebar-item .material-symbols-outlined{margin-left:1.125rem}.sidebar-item:first-child{margin-top:.3125rem}.sidebar-item:hover{background:var(--hover-bg-color);border-top-right-radius:25px;border-bottom-right-radius:25px}.sidebar-active-item{background-color:var(--active-bg-color);border-top-right-radius:25px;border-bottom-right-radius:25px}.sidebar-active-item:hover{background-color:var(--active-bg-color)}@media (width<=599px){.sidebar{z-index:100}}@media (prefers-color-scheme:dark){:root{--bg-color:#202124;--text-color:#dcdddf}}.form-container{background:var(--bg-color);border:.5px solid #999;border-radius:8px;max-width:37.375rem;margin:3% auto 2% 26%;box-shadow:0 3px 5px #0a0e114d,0 4px 8px 5px #0a0e1126}.form-container form{color:#5f6368;justify-content:space-between;align-items:center;height:100%;display:flex}.note-text{background-color:var(--bg-color);color:var(--text-color);border:none;width:90%;height:100%;margin-left:.625rem;margin-right:.625rem;padding:.625rem .375rem .625rem .3125rem;font-size:1rem}.note-title{background-color:var(--bg-color);color:var(--text-color);border:none;width:90%;height:100%;margin-left:.625rem;margin-right:.625rem;padding:.625rem .375rem .625rem .3125rem;font-size:1.2rem;font-weight:bolder}.form-actions{display:flex}.active-form{display:block}.form{flex-direction:column;width:100%;padding:10px;display:flex}.form .form-actions .icons{display:flex}.form .form-actions{justify-content:space-between;width:100%;margin-top:.3125rem;margin-right:.625rem;display:flex}.close-btn{color:gray;cursor:pointer;background:0 0;border:none;margin-right:1rem;font-size:1rem}.small-icon{color:gray;font-size:1.1rem}@media (width<=794px){.form-container{width:83%;margin:1rem auto auto 5.3rem}}@media (width<=599px){.form-container{width:75%;margin:1rem auto auto 5.3rem}}:root{--bg-color:#fff;--text-color:#1e1f21}@media (prefers-color-scheme:dark){:root{--bg-color:#202124;--text-color:#fff}}.notes{flex-wrap:wrap;justify-content:center;gap:.7rem;display:flex}.note{background-color:var(--bg-color);box-sizing:border-box;border:.7px solid #929292;border-radius:8px;width:20%;max-width:100%;margin:.625rem 0;position:relative}.note .title{color:var(--text-color);width:100%;margin:.9375rem 0 0 .9375rem;font-weight:700}.note .text{color:var(--text-color);width:100%;margin:.625rem 0 0 .9375rem}.note-reminder{color:var(--text-color);border:1px solid #c8c8c8;border-radius:12px;align-items:center;gap:.25rem;margin:.8rem 0 0 .9375rem;padding:.2rem .5rem;font-size:.78rem;display:inline-flex}.note-reminder .material-symbols-outlined{font-size:.85rem}.note-reminder-past{background-color:#ffca2829;border-color:#ffca28}.note .note-footer{justify-content:center;margin-top:.9375rem;padding:0;display:flex}.reminder-picker{border:1px solid #d3d3d3;border-radius:8px;margin:.7rem .9375rem .8rem;padding:.5rem}.reminder-picker input{background-color:var(--bg-color);width:100%;color:var(--text-color);border:1px solid #c8c8c8;border-radius:6px;padding:.3rem}.reminder-actions{justify-content:flex-end;gap:.4rem;margin-top:.5rem;display:flex}.reminder-actions button{color:var(--text-color);cursor:pointer;background:0 0;border:1px solid #d0d0d0;border-radius:6px;padding:.2rem .5rem}.note-footer .material-symbols-outlined{color:#5f6368;font-size:.9rem}.note .check-circle{color:var(--text-color);position:absolute;top:-1.25rem;left:-1.25rem}@media (width<=1024px){.notes{flex-wrap:wrap;gap:.7rem;width:60%;margin:0 10rem;display:flex}.note{width:40%;max-width:60%}}@media (width<=794px){.notes{box-sizing:border-box;flex-wrap:wrap;gap:.7rem;width:100%;max-width:100%;margin:1rem auto auto 1rem;padding:0 1rem 2rem;display:flex}.note{width:40%;max-width:60%}}@media (width<=599px){.notes{gap:.3rem;width:88%;margin:.5rem 0 auto 4.6rem}.note{width:80%;max-width:100%}}:root{--icon-color:#c8c8c8;--text-color:#5f6368}@media (prefers-color-scheme:dark){:root{--icon-color:#3c3c3c;--text-color:#969799}}.empty-list-container{flex-direction:column;justify-content:center;align-items:center;margin-top:7rem;display:flex;position:relative;left:0}.empty-list-icon{color:var(--icon-color);font-size:7rem}.empty-list-container p{color:var(--text-color);font-size:x-large}.modal{z-index:100;visibility:hidden;background-color:#00000080;width:100%;height:100%;position:fixed;top:0;left:0}.modal .modal-content{width:100%;transition:"ease-in-out 1s";position:relative;top:30%;left:50%;transform:translate(-50%,-50%)}.open-modal{visibility:visible}@media (width<=599px){.modal .modal-content{width:40rem;max-width:60rem;left:25%}}@media (width>=600px) and (width<=794px){.modal .modal-content{width:50rem;max-width:60rem;left:40%}}@media (width>=795px) and (width<=1024px){.modal .modal-content{left:47%}}@media (width>=1024px) and (width<=1150px){.modal .modal-content{left:50%}}