@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: normal;
    src: url('fonts/Lato-Regular.woff2') format('woff2'), url('fonts/Lato-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: bold;
    src: url('fonts/Lato-Bold.woff2') format('woff2'), url('fonts/Lato-Bold.woff') format('woff');
}
BODY {
  width: 100vw; height: 100vh; margin: 0;
  background-color: grey; font-family: 'Lato', sans-serif;
}
BODY.dragging { cursor: alias; }
BODY.dragging .note-li { cursor: grabbing; }
BODY.dragging DIV.sidepanel { cursor: grabbing; }
BODY.dragging #input { cursor: inherit; }
BODY.dragging #tab-pinned A:hover::before { content: ""; display: block; width: 100%; border-top: solid black 2px; }
PRE { position: relative; background-color: rgb(251, 244, 208); padding: 5px 5px; border: solid #ddcb8e 1px; overflow: auto; max-height: 85%; }
PRE[data-info]::after { content: attr(data-info); position: absolute; top: 0; right: 0; padding: 5px; background-color: rgba(255, 255, 255, 0.7); border-left: solid #ddcb8e 1px; border-bottom: solid #ddcb8e 1px; }
CODE.inline { background-color: rgb(251, 244, 208); white-space: pre; padding: 1px; margin: -1px; }
A.link-note { text-decoration-style: dashed; text-decoration-thickness: from-font; }
A.link-head { text-decoration-style: dotted; }
TABLE { margin-top: 1em; margin-bottom: 1em; border-collapse: collapse; }
#render TH, #render TD { border: solid #ccc 1px; padding: 0 3px; }
H1 { padding-bottom: 5px; border-bottom: solid #ccc 1px; }
H2 { display: table; margin-top: 1rem; margin-bottom: 0; padding-bottom: 3px; border-bottom: solid #ccc 1px; }
H3 { display: table; margin-top: 0.5rem; margin-bottom: 0; padding-bottom: 3px; border-bottom: dotted #ccc 1px; font-size: 20px; }
H4 { margin-top: 0.5rem; margin-bottom: 0; font-size: 18px; }
H4::first-letter { padding-bottom: 3px; border-bottom: solid #ccc 1px; }
H5 { margin-top: 0.5rem; margin-bottom: 0; font-size: 16px; }
H5::first-letter { padding-bottom: 3px; border-bottom: dotted #ccc 1px; }
:target { border-bottom-color: red; }
P { margin-top: 0.5rem; }
BLOCKQUOTE { margin-left: 3px; padding-left: 15px; border-left: solid #ccc 2px; margin-right: 20px; }
DIV#panels { position: fixed; height: 100%; width: 100vw; display: flex; overflow: hidden; touch-action: none; background-color: grey; }
DIV.sidepanel { width: 20em; flex-shrink: 0; background-color: rgb(200,200,200); transition: margin 1s; }
DIV.sidepanel A { text-decoration: none; color: inherit; }
DIV#panel-left { position: relative; display: flex; flex-direction: column; }
DIV#panel-right { margin-right: -20rem; }
DIV#panel-main { position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 252px; max-width: calc(100vw - 68px); }
DIV#panel-main.dragging-file { border: solid green 5px; }
DIV.panel-buttons { display: flex; flex-direction: column; background-color: rgb(40,40,40); }
DIV.panel-buttons > DIV { cursor: pointer; padding: 5px; }
#button-mode-edit { position: relative; }
.button-svg { display: block; margin-left: auto; margin-right: auto; user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.button-active { background-color: rgb(80,80,80) !important; }
.button-touched::after { border-radius: 5px; background-color: #F2A51B; content: ''; position: absolute; bottom: 5px; right: 5px; width: 7px; height: 7px; }
DIV#button-export,DIV#button-help { margin-top: auto; }
DIV#status { position: absolute; top: 0; right: 0; padding: 5px; color: white; background-color: rgb(180,0,0) !important; transition: opacity 1s ease-in; z-index: 1000; }
DIV#stats { position: absolute; right: 0; bottom: 0; padding: 0.1em 0.2em; font-size: 0.9rem; text-align: right; }
DIV#snap { position: absolute; flex-direction: column; top: 0; left: 50%; transform: translateX(-50%); border-radius: 0 0 15px 15px; padding: 0.2rem 0.5rem; background-color: rgba(0,0,0,0.5); color: white; text-align: center; }
DIV#link { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: rgb(251, 244, 208); padding: 0.3rem 5px; border: solid #ddcb8e 1px; white-space: nowrap; }
DIV#update { position: absolute; flex-direction: column; top: 0; left: 50%; transform: translateX(-50%); border-radius: 0 0 15px 15px; padding: 0.2rem 0.5rem; background-color: rgba(0,0,0,0.5); color: white; text-align: center; z-index: 1006; }
.button-unpin { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyMCAxMjAiPgogIDxwYXRoIHN0cm9rZT0iI0YwMCIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Im0xNCwxNCA5Miw5Mm0wLTkyLTkyLDkyIi8+Cjwvc3ZnPgo=); }
DIV#button-unpublish { display: inline-block; margin-left: 5px; width: 16px; height: 16px; vertical-align: middle; cursor: pointer; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyMCAxMjAiPgogIDxwYXRoIHN0cm9rZT0iI0YwMCIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Im0xNCwxNCA5Miw5Mm0wLTkyLTkyLDkyIi8+Cjwvc3ZnPgo=); }
INPUT#button-snap-restore,INPUT#button-snap-close,INPUT#button-update-now { align-self: center; margin: 0.2rem 0; }
TEXTAREA#input,DIV#render { width: 80%; height: 80%; background-color: white; overscroll-behavior: contain; }
DIV#render { box-sizing: border-box; padding: 0 20px; overflow: auto; }
DIV#render IMG { max-height: 70vh; max-width: 100%; }
DIV#compare { display: flex; gap: 5px; width: 95%; padding: 10px; white-space: pre-wrap; overflow-y: auto; }
DIV#compare H1 { text-align: center; border-bottom: none; margin-bottom: 10px; }
DIV#compare > DIV { width: 10px; overflow-x: clip; flex-grow: 1; }
DIV#compare > DIV > DIV { padding: 10px; background-color: white; height: max-content; font-family: monospace; }
DIV#compare-from INS { visibility: hidden; }
DIV#compare-to DEL { visibility: hidden; }

.note-li { position: relative; margin: 4px; padding: 5px 5px 5px 8px; border: solid transparent 1px; border-radius: 5px; background-color: #9ABCBD; cursor: pointer; white-space: nowrap; }
.note-active { background-color: #6BA2A5 !important; }
.note-touched::after { border-radius: 5px; background-color: #F2A51B; content: ''; position: absolute; bottom: 5px; right: 5px; width: 10px; height: 10px; }
.note-selected { border: solid black 1px !important; }
.note-deleted { text-decoration: line-through; }
.note-title { font-weight: bold; line-height: 1.4; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; }
.note-details { display: flex; font-size: 0.9em; }
.note-icons { margin-left: auto; line-height: 1.2; font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif; }
.note-icons SPAN { margin-left: 0.25rem; }
.note-hits { position: absolute; top: 3px; right: 5px; color: blue; font-size: 0.9em; }
.list-divider { padding: 0.5rem; background-color: rgb(150,150,150); }
.list-none { padding: 0.5rem; font-style: italic; }
.snap-li { position: relative; margin: 4px; padding: 5px 5px 5px 8px; border: solid transparent 1px; border-radius: 5px; background-color: #BDB586; cursor: pointer; white-space: nowrap; }
.snap-action { position: absolute; right: 3px; width: 18px; height: 18px; }
.snap-lock { top: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/></svg>'); }
.snap-unlock { top: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>'); }
.snap-delete { top: 24px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 120 120"><path stroke="red" stroke-width="8" stroke-linecap="round" d="m14,14 92,92m0-92-92,92"/></svg>'); }
.snap-modified,.snap-stats { font-size: 0.9em; white-space: nowrap; }
.span-modified { margin-bottom: 1px; }
.upload-li { position: relative; margin: 4px; padding: 5px 5px 5px 8px; border: solid transparent 1px; border-radius: 5px; color: rgb(240,240,240); background-color: #705350; cursor: pointer; white-space: nowrap; }
.upload-modified { font-size: 0.9em; white-space: nowrap; }
.upload-modified A { text-decoration: underline !important; }
.upload-action { position: absolute; right: 3px; width: 18px; height: 18px; }
.upload-delete { top: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 120 120"><path stroke="red" stroke-width="8" stroke-linecap="round" d="m14,14 92,92m0-92-92,92"/></svg>'); }
.toc-li { margin: 4px; padding: 5px 5px 5px 8px; border: solid transparent 1px; border-radius: 5px; background-color: #BD9BB1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar { display: flex; }
.tablabel { flex-grow: 1; padding: 5px; background-color: rgb(150,150,150); cursor: pointer; }
#label-recent { z-index: 1002; }
#label-search { z-index: 1001; }
#label-pinned { z-index: 1000; }
.tab-active { background-color: rgb(200,200,200) !important; }
.tab { width: 20em; position: relative; }
.tab-button { display: block; margin: 5px auto; border: none; border-radius: 8px; padding: 0.7em 1em; background-color: rgb(50,50,50); color: white; font-size: 1em; }
.tab-button:hover { background-color: rgb(75,75,75); cursor: pointer; }
#tab-right { display: flex; flex-direction: column; height: 100vh; }
DIV#scrolled { position: absolute; left: calc(10em - 22px); top: 2.8em; z-index: 1000; padding: 5px; background-color: rgba(0, 0, 0, 0.3); border-radius: 10px; cursor: pointer; }
DIV#scrolled:hover { background-color: rgba(0, 0, 0, 0.4); }
DIV#scrolled > * { display: block; width: 40px; height: 40px; }
DIV#search-box { display: flex; }
DIV#search-results { position: relative; }
INPUT#search-input { flex-grow: 1; margin-right: 0; font-size: inherit; }
BUTTON#search-sort { padding: 0; margin: 5px 5px 0 0; width: 1.75rem; }
BUTTON#search-sort > * { display: block; }
DIV#search-sort-notice { margin: 5px; font-style: italic; }
DIV.mask { overflow: hidden; }
.search-controls { margin: 5px 5px 0 5px; }
DIV#modal-overlay { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: rgba(0,0,0,0.5); transition: opacity 0.3s linear; z-index: 1005; }
DIV#modal-overlay > DIV { display: flex; flex-direction: column; padding: 18px 25px; border-radius: 25px; box-sizing: border-box; max-height: 95%; max-width: 95%; background-color: rgba(50,50,50,1); color: white; }
DIV#modal-overlay > DIV > IMG { margin: 7px 0; max-height: 90vh; }
DIV#modal-overlay H1 { margin: 0; }
DIV#modal-overlay H2 { margin-top: 1rem; }
DIV#modal-overlay P { margin-bottom: 0.5rem; }
DIV#modal-overlay HR { background-color: #ccc; }
DIV#modal-body { overflow-y: auto; scrollbar-width: none; }
P#modal-error { display: none; color: rgb(255,0,0); }
.modal-button { background-color: rgb(204,204,204); border-radius: 8px; border: none; padding: 0.7em 1em; font-size: 1em; }
.modal-button:hover { background-color: white; cursor: pointer; }
.modal-button-small { background-color: rgb(204,204,204); border-radius: 5px; border: none; padding: 0.35em 0.6em; font-size: 0.9em; }
.modal-button-small:hover { background-color: white; cursor: pointer; }
.modal-button-secondary { background-color: rgb(77, 77, 77); color: white; }
.modal-button-secondary:hover { color: black; }
#modal-settings FORM { display: flex; flex-direction: column; gap: 3px; }
#tag-icons { display: flex; flex-direction: column; gap: 1px; }
#tag-icons INPUT[name="icon"] { width: 2rem; text-align: center; font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif; }
#picker-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 1006; }
#upload-dropzone { display: flex; flex-direction: column; height: 30rem; width: 30rem; margin-top: 1rem; margin-bottom: 7px; border: dashed grey 4px; padding: 1rem; align-items: center; justify-content: center; }
#upload-progress table td { max-width: 25rem; overflow: hidden; text-overflow: ellipsis; }
#upload-progress table td:first-child { padding-right: 1rem; }
DIV#copied { position: absolute; width: max-content; opacity: 0; border-radius: 5px; padding: 5px; background-color: black; color: white; transition: opacity 500ms; }
.settings-label { display: inline-block; min-width: 10em; }
#settings-save { margin-top: 1rem; }
#token-list { cursor: help; }
#list-u2f { padding-left: 1.5rem; }
.webauthn-delete { display: inline-block; position: relative; top: 2px; width: 1rem; height: 1rem; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyMCAxMjAiPgogIDxwYXRoIHN0cm9rZT0iI0YwMCIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Im0xNCwxNCA5Miw5Mm0wLTkyLTkyLDkyIi8+Cjwvc3ZnPgo=); }
.input-password { width: 10em; }
.input-smallint { width: 2.6em; }
#tour-bubble { position: absolute; min-width: 12rem; max-width: 25rem; border-radius: 1rem; background-color: rgba(0,0,0,0.7); padding: 0 1rem; color: white; z-index: 1000; transition: opacity 0.5s; }
#tour-bubble::before { content: ""; position: absolute; border-style: solid; }
#tour-bubble.top-left::before { top: 0; left: 0; border-width: 0 0 1rem 1rem; border-color: transparent orange; }
#tour-bubble.top-right::before { top: 0; right: 0; border-width: 0 1rem 1rem 0; border-color: transparent orange; }
#tour-bubble.bottom-right::before { bottom: 0; right: 0; border-width: 1rem 1rem 0 0; border-color: transparent orange; }
#tour-bubble.bottom-left::before { bottom: 0; left: 0; border-width: 1rem 0 0 1rem; border-color: transparent orange; }
#tour-bubble INPUT { margin: 0 1rem 1rem 0; }
.tour-anchor { position: relative; }

#tags { position: absolute; top: calc(90% + 0.7rem); max-height: calc(10% - 1.2rem); width: 80%; display: flex; flex-wrap: wrap; gap: 0.3rem; overflow-y: auto; }
#tags > DIV, #render .tag { border: solid rgb(85, 85, 85) 1px; border-radius: 0.18rem; padding: 0 0.18rem; background-color: rgb(180, 180, 180); cursor: pointer; }
#tags > DIV:hover { background-color: rgb(200, 200, 200); }
#render .tag { background-color: rgb(213, 213, 213); padding: 0.12rem 0.18rem; }
#render .tag:hover { background-color: rgb(230, 230, 230); }

.scrolly { overflow-y: scroll; scrollbar-width: none; touch-action: pan-y; }
.scrolly::-webkit-scrollbar { display: none; }
.mta { margin-top: auto; }
.notransition { transition: none !important; }
.nointeraction { pointer-events: none; }
.noselect {
  -webkit-user-select: none; /* Safari */
          user-select: none;
  outline: none;
}
INS { background-color: rgba(0, 255, 0, 0.3); text-decoration: none; }
DEL { background-color: rgba(255, 0, 0, 0.3); }

.tips {
  margin: 1rem;
  border: solid #ddcb8e 1px;
  border-radius: 1rem;
  padding: 0 0.7rem;
  background-color: rgb(251, 244, 208);
  color: #6a6a6a;
}
.tips H1 {
  font-size: 1.2rem;
}

/* Loader CSS from loading.io - License: CC0 */
.loader {
  position: relative;
  width: 80px;
  height: 30px;
  margin: 0 auto;
}
.loader div {
  position: absolute;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: black;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.loader div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


@media (max-width: 1024px) {
  HTML { font-size: 14px; }
}
@media (max-width: 800px) {
  HTML { font-size: 12px; }
}
@media (max-width: 600px) and (min-resolution: 2x) {
  HTML { font-size: 10px; }
}
@media (max-width: 524px) {
  DIV#panels { width: auto; min-width: 100vw; }
}
@media (max-width: 400px) {
  TEXTAREA#input,DIV#render,#tags { width: 90%; }
}
@media print {
  #panel-left,#panel-buttons,#panel-right { display: none; }
  DIV#render { width: 100%; height: 100%; }
}