*,*::before,*::after{box-sizing:border-box}*:not(dialog){margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{--border-color:#dfe1e4;--background-gray:#f4f5f7;--text-gray:#919192;--highlight-blue:#086dd6;--transition-duration:150ms}body{font-family:Roboto,sans-serif}[placeholder]:empty::before{content:attr(placeholder);color:#999}[placeholder]:empty:focus::before{content:""}.button{cursor:pointer;background-color:white;color:black;border:4px solid var(--highlight-blue);border-radius:20px;text-decoration:none;transition:all var(--transition-duration) ease-in}.notes-page{display:flex;flex-direction:row;padding-left:5%;padding-right:5%;position:absolute;top:0;height:100%;width:100%;.note-list-column{z-index:1;display:flex;flex-direction:column;width:50%;border-left:1px solid var(--border-color);header{padding:20px;border-bottom:1px solid var(--border-color)}footer{display:flex;flex-direction:row;padding:6px;border-top:1px solid var(--border-color);background-color:var(--background-gray);.new-note{margin-left:auto;border-color:var(--highlight-blue);line-height:40px;padding:0 40px;transition:all var(--transition-duration) ease-in;&:hover{border-color:color-mix(in oklab,var(--highlight-blue),transparent 40%)}}.logout{margin-right:auto;border-color:gray;line-height:40px;padding:0 20px;&:hover{border-color:color-mix(in oklab,gray,transparent 40%)}}}.search-input{width:100%;text-indent:20px;padding:6px;border:2px solid var(--border-color);border-radius:20px;transition:border-color var(--transition-duration) ease-in;&:focus{outline:none;border-color:var(--highlight-blue)}}.note-list{padding:0;height:100%;overflow-y:scroll;li.note-item{list-style:none;border-left:3px solid transparent;padding:10px;padding-left:20px;cursor:pointer;transition:border var(--transition-duration) ease-in,background var(--transition-duration) ease-in}li.note-item.selected{background-color:var(--background-gray);border-left:3px solid #086dd6}}.note-container{display:flex;flex-direction:column;gap:4px;.truncated-note{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}}}.note-focus-column{z-index:2;display:flex;flex-direction:column;width:50%;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);header{display:flex;flex-direction:row;gap:10px;padding:20px;border-bottom:1px solid var(--border-color);.content-column{flex:1}}.note-body{flex:1;margin-bottom:2px}footer{width:100%;bottom:0;display:flex;flex-direction:row;padding:6px;border-top:1px solid var(--border-color);background-color:var(--background-gray);.close-button{line-height:40px;padding:0 20px}}.note-body{font-size:18px;padding:20px}}.timestamp{font-size:14px;color:var(--text-gray)}}.login-page{display:flex;flex-direction:row;width:100%;height:60vh;justify-content:center;align-items:center;form.login-form{display:flex;flex-direction:column;gap:10px;h1{text-align:center}.error-message{color:red;text-align:center}input[type="password"]{padding:10px}input[type="submit"]{padding:10px;width:100%;cursor:pointer}}}@media screen and (width < 700px){.notes-page{padding:0;.note-list-column{transition:opacity var(--transition-duration) ease-in,width var(--transition-duration) ease-in;width:0;opacity:0;&.active{width:100%;display:flex;opacity:1}}.note-focus-column{transition:opacity var(--transition-duration) ease-in,width var(--transition-duration) ease-in;width:0;opacity:0;&.active{width:100%;display:flex;opacity:1}.actions-column{display:block}}}}