html, body {height:100%;}
html {font-family:sans-serif;font-size:62.5%;}
body {background-color:#222;color:#fff;font-size:1.5rem;margin:0;}

/*

header, #wrapper, footer {display:flex;}
header > *, #wrapper > *, footer > * {box-sizing:border-box;}

header {background-color:#1b1b1b;border-bottom:1px solid #444;}
header > * {height:5rem;line-height:5rem;padding:0 1rem;}

#searchterm, #encryptionkey {margin-right:0.5rem;}
#searchterm {margin-bottom:1rem;}
#encryptionkey {margin-top:1rem;}

#wrapper {height:calc(100vh - 10rem - 2px);}

main {display:flex;justify-content:center;}
main > article, main > textarea {line-height:1.5;outline:none;overflow-y:auto;padding:5rem calc((100% - 80rem) / 2) 20rem;width:100%;}

nav, aside {display:flex;flex-direction:column;overflow-y:auto;padding:2rem;}
section:not(:first-child):not(:last-child) {flex:1;}
nav {border-right:1px solid #333;padding-right:1.5rem;}
aside {border-left:1px solid #333;}

body[data-collection="0"] main > article,
body[data-collection="0"] main > article a {color:#555;}
body[data-collection="0"] main > article h1,
body[data-collection="0"] main > article h2 {color:#444;}
body[data-collection="0"] main > article code {background-color:transparent;padding:0.25rem;}

body[data-panelleft="0"][data-panelright="0"] main {max-width:100vw;}
body[data-panelleft="1"][data-panelright="0"] main,
body[data-panelleft="0"][data-panelright="1"] main {max-width:calc(100vw - 28rem);}
body[data-panelleft="1"][data-panelright="1"] main {max-width:calc(100vw - 56rem);}

@media (max-width:860px) {
  body[data-panelleft="0"][data-panelright="0"] main > article,
  body[data-panelleft="0"][data-panelright="0"] main > textarea {padding:5rem;}
}

@media (max-width:1160px) {
  body[data-panelleft="1"][data-panelright="0"] main > article,
  body[data-panelleft="1"][data-panelright="0"] main > textarea,
  body[data-panelleft="0"][data-panelright="1"] main > article,
  body[data-panelleft="0"][data-panelright="1"] main > textarea {padding:5rem;}
}

@media (max-width:1460px) {
  body[data-panelleft="1"][data-panelright="1"] main > article,
  body[data-panelleft="1"][data-panelright="1"] main > textarea {padding:5rem;}
}

footer {background-color:#1b1b1b;border-top:1px solid #333;color:#444;height:5rem;line-height:5rem;}
#collections {padding:0 1rem;}
#status, #about {padding:0 2rem;}
#about {display:flex;}
#about > div:not(:last-child):after {content:'\b7';margin:0 1rem;}
#about a {color:#444;text-decoration:none;transition:0.05s color;}
#about a:hover {color:#fff;}

#content, #aside, nav, aside, #collections {width:28rem;min-width:28rem;}
body[data-panelleft="0"] nav, body[data-panelright="0"] aside {border:none;overflow:hidden;padding:0;width:0;min-width:0;}

#notesettings, main, #status {flex:1;}

body[data-changesnote="1"] nav li.active span:after {content:'*';}

#notelist {list-style-type:none;margin:0;padding:0;}
#notelist li {cursor:default;display:flex;height:3.5rem;line-height:3.5rem;position:relative;transition:0.05s color;}
#notelist li:not(.active) {color:#666;}
body[data-changesnote="0"][data-notemeta="0"] #notelist li:not(.active):hover {color:#888;cursor:pointer;}
#notelist span, #notelist input {flex:1;}
#notelist span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#notelist input {margin-right:1rem;}
#notelist div {background:transparent none center center no-repeat;background-size:2rem;cursor:pointer;margin:0.25rem 0;transition:0.05s opacity;width:3rem;}
#notelist div:not(:hover) {opacity:0.3;}
#notelist div.rename {background-image:url('/icon/note_rename.svg');}
#notelist div.delete {background-image:url('/icon/note_delete.svg');}
#notelist div.confirm {background-image:url('/icon/confirm.svg');}
#notelist div.cancel {background-image:url('/icon/cancel.svg');}
//#notelist li.active:after {background-color:#222;border:1px solid transparent;border-top-color:#333;border-right-color:#333;content:'';position:absolute;top:1rem;right:-2.25rem;transform:rotate(45deg);width:1.25rem;height:1.25rem;}
#notelist li:not(.active) div,
#notelist li:not(:hover):not(.rename):not(.delete) div,
#notelist li.rename span,
#notelist li.rename div.rename,
#notelist li.delete div.rename,
#notelist li.rename div.delete,
#notelist li.delete div.delete,
#notelist li:not(.rename):not(.delete) .confirm,
#notelist li:not(.rename):not(.delete) .cancel,
#notelist li:not(.rename) input {display:none;}

#tableofcontents {line-height:3.5rem;list-style-type:none;margin:0;padding:0;}
#tableofcontents li {color:#666;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tableofcontents li:hover {color:#888;}
#tableofcontents li[data-level="2"] {padding-left:0.75rem;}
#tableofcontents li[data-level="3"] {padding-left:1.5rem;}
#tableofcontents li[data-level="4"] {padding-left:2.25rem;}
#tableofcontents li[data-level="5"] {padding-left:3rem;}
#tableofcontents li[data-level="6"] {padding-left:3.75rem;}

ul.menu {display:flex;list-style-type:none;margin:0;padding:0.5rem 0;}
ul.menu li:not([id]) {flex:1;}
ul.menu li[id], #zenmodeexit {background:transparent none center center no-repeat;cursor:pointer;height:4rem;transition:0.05s opacity;width:4rem;}
ul.menu li:not(:hover), #zenmodeexit:not(:hover) {opacity:0.3;}
ul.menu li label, ul.menu li a {cursor:pointer;display:block;width:100%;height:100%;}
ul.menu input[type="file"] {display:none;}

#zenmodeexit {position:fixed;top:0.5rem;right:1rem;}

#panel_left_open {background-image:url('/icon/panel_left_open.svg');}
#panel_left_close {background-image:url('/icon/panel_left_close.svg');}
#note_create {background-image:url('/icon/note_create.svg');}
#note_update {background-image:url('/icon/note_update.svg');}
#note_discard {background-image:url('/icon/note_discard.svg');}
#group_create {background-image:url('/icon/group_create.svg');}
#mode_edit {background-image:url('/icon/mode_edit.svg');}
#mode_view {background-image:url('/icon/mode_view.svg');}
#zenmode, #zenmodeexit {background-image:url('/icon/zenmode.svg');}
#panel_right_open {background-image:url('/icon/panel_right_open.svg');}
#panel_right_close {background-image:url('/icon/panel_right_close.svg');}
#collection_new {background-image:url('/icon/collection_new.svg');}
#collection_upload {background-image:url('/icon/collection_upload.svg');}
#collection_download {background-image:url('/icon/collection_download.svg');}
#collection_close {background-image:url('/icon/collection_close.svg');}
#tagfilter {background-image:url('/icon/option_tagfilter.svg');}
#search {background-image:url('/icon/option_search.svg');}
#encryption {background-image:url('/icon/option_encryption.svg');}


body[data-collection="0"] #note_create,
body[data-collection="0"] #group_create,
body[data-collection="0"] #tagfilter,
body[data-collection="0"] #search,
body[data-collection="0"] #mode_edit,
body[data-collection="0"] #mode_view,
body[data-collection="0"] #collection_download,
body[data-collection="0"] #collection_close,
body[data-collection="1"] #collection_new,
body[data-collection="1"] #collection_upload,
body[data-changesnote="0"] #note_update,
body[data-changesnote="0"] #note_discard,
body[data-changesnote="1"] #note_create,
body[data-changesnote="1"] #group_create,
body[data-changesnote="1"] #collection_close,
body[data-changescollection="1"] #collection_close,
body[data-activenote="0"] #mode_edit,
body[data-activenote="0"] #mode_view,
body[data-activenote="0"] #zenmode,
body[data-activenote="0"] aside section,
body[data-editormode="0"] #mode_view,
body[data-editormode="0"] main > textarea,
body[data-editormode="0"] #tags,
body[data-editormode="1"] #mode_edit,
body[data-editormode="1"] main > article,
body[data-editormode="1"] #taglist,
body[data-zenmode="0"] #zenmodeexit,
body[data-panelleft="0"] #panel_left_close,
body[data-panelleft="1"] #panel_left_open,
body[data-panelright="0"] #panel_right_close,
body[data-panelright="1"] #panel_right_open,
body[data-search="0"] #searchterm,
body[data-encryption="0"] #encryptionkey {display:none;}


textarea {appearance:none;background:none;border:none;color:#fff;font-family:monospace;font-size:1.5rem;padding:0;resize:none;}
input {appearance:none;background-color:#333;border:none;border-radius:3px;box-sizing:border-box;color:#fff;display:block;font-family:sans-serif;font-size:1.5rem;line-height:3.5rem;min-width:0;outline:none;padding:0 1rem;vertical-align:center;width:100%;}

article > :first-child {margin-top:0;}
article ul {padding-left:2rem;}
article img {max-width:100%;height:auto;}
article a {color:#fff;cursor:alias;}
article span.notelink {cursor:pointer;text-decoration:underline;}
article span.notelink.undefined {cursor:not-allowed;}
article code {background-color:#000;border-radius:3px;display:inline-block;padding:0 0.5rem;}
article pre code {background-color:#000;display:block;overflow-x:auto;padding:1.5rem 2rem 1.75rem;}
article blockquote {margin-left:0;margin-right:0;}
article blockquote:before {color:#888;content:'»';float:left;margin-right:1rem;}
article blockquote p {display:flex;font-style:italic;}
article table {border-collapse:collapse;}
article table th, article table td {border:1px solid #555;padding:0.125rem 0.625rem 0.375rem;}
article hr {background-color:transparent;border:none;border-bottom:1px solid #555;}

aside #taglist {display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:end;list-style-type:none;margin:0 0 2.5rem;padding:0;}
aside #taglist li {cursor:pointer;}
aside #taglist li:before {content:'#';}
aside #modified, aside #created {line-height:2.5rem;text-align:right;}
aside #modified:before, aside #created:before {margin-right:0.375em;}
aside #modified:before {color:#666;content:'modified';}
aside #created:before {color:#666;content:'created';}


body[data-zenmode="1"] header,
body[data-zenmode="1"] footer {border:none;height:0;overflow:hidden;}
body[data-zenmode="1"] #wrapper {height:100vh;}
body[data-zenmode="1"][data-panelleft][data-panelright] main {max-width:unset;width:100vw;}
body[data-zenmode="1"] nav,
body[data-zenmode="1"] aside {border:none;min-width:0;overflow:hidden;padding:0;width:0;}
*/