html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

@media print {
  .note-app--controller .tool-bar--controller, .note-app--controller .note-meta--controller, .note-app--controller .note-edit--controller, .note-app--controller .note-nav--controller, .note-app--controller .content-header--controller, .note-app--controller .nav-header--controller {
    display: none !important;
  }
}

.note-app--controller .account-option--controller > span, .settings-app--controller > a {
  cursor: pointer;
}
.note-app--controller .account-option--controller > span:hover, .settings-app--controller > a:hover {
  text-decoration: underline;
}

.note-app--controller .content-header--controller, .note-app--controller .nav-header--controller {
  background: linear-gradient(rgb(254, 254, 254), rgb(230, 230, 230));
  font-weight: 100;
}

.note-app--controller .note-meta--controller, .settings-app--controller > div, .login-app--controller form {
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 90vw;
}
.note-app--controller .note-meta--controller h2, .settings-app--controller > div h2, .login-app--controller form h2 {
  font-size: 1.2em;
  font-weight: 500;
}
.note-app--controller .note-meta--controller > .message, .settings-app--controller > div > .message, .login-app--controller form > .message {
  text-align: center;
  background: #fbb;
  padding: 0.5em;
}
.note-app--controller .note-meta--controller > input, .settings-app--controller > div > input, .login-app--controller form > input, .note-app--controller .note-meta--controller > button, .settings-app--controller > div > button, .login-app--controller form > button {
  outline: none;
  font-size: 1.2em;
  padding: 0.5em;
  border: 1px solid rgb(204.1, 204.1, 204.1);
  box-shadow: inset 0 0 0 2px rgba(204.1, 204.1, 204.1, 0.5);
  border-radius: 6px;
}
.note-app--controller .note-meta--controller > input:hover, .settings-app--controller > div > input:hover, .login-app--controller form > input:hover, .note-app--controller .note-meta--controller > button:hover, .settings-app--controller > div > button:hover, .login-app--controller form > button:hover {
  border-color: rgb(255, 196, 210.6583850932);
}
.note-app--controller .note-meta--controller > input:focus, .settings-app--controller > div > input:focus, .login-app--controller form > input:focus, .note-app--controller .note-meta--controller > button:focus, .settings-app--controller > div > button:focus, .login-app--controller form > button:focus {
  border-color: #ff5e86;
  box-shadow: rgb(255, 196, 210.6583850932) 0 0 0 3px;
}
.note-app--controller .note-meta--controller > input[type=submit], .settings-app--controller > div > input[type=submit], .login-app--controller form > input[type=submit], .note-app--controller .note-meta--controller > button[type=submit], .settings-app--controller > div > button[type=submit], .login-app--controller form > button[type=submit] {
  border: none;
  color: white;
  background: #ff5e86;
  box-shadow: none;
}
.note-app--controller .note-meta--controller > input[type=submit]:focus, .settings-app--controller > div > input[type=submit]:focus, .login-app--controller form > input[type=submit]:focus, .note-app--controller .note-meta--controller > button[type=submit]:focus, .settings-app--controller > div > button[type=submit]:focus, .login-app--controller form > button[type=submit]:focus {
  box-shadow: rgb(255, 196, 210.6583850932) 0 0 0 3px;
}
.note-app--controller .note-meta--controller > *, .settings-app--controller > div > *, .login-app--controller form > * {
  margin-bottom: 1rem;
  background: white;
}
.note-app--controller .note-meta--controller > label > input, .settings-app--controller > div > label > input, .login-app--controller form > label > input {
  margin-right: 11px;
}

.login-app--controller form .-error-animation {
  animation: horizontalShake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes horizontalShake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.settings-app--controller > a {
  display: block;
  text-align: center;
}

.note-app--controller .note--controller {
  display: grid;
}
.note-app--controller .note--controller > .nav-header--controller {
  grid-area: nh;
}
.note-app--controller .note--controller > .content-header--controller {
  grid-area: ch;
}
.note-app--controller .note--controller > .note-nav--controller {
  grid-area: nav;
}
.note-app--controller .note--controller > .note-content--controller {
  grid-area: cc;
}
.note-app--controller .note--controller > .resize--controller {
  grid-area: r;
}
@media screen and (min-width: 600px) {
  .note-app--controller .note--controller {
    grid-template-rows: 45px calc(100vh - 45px);
    --columnOneWidth: 30vw;
    grid-template-columns: var(--columnOneWidth) max(5px, calc(10px - var(--columnOneWidth)));
    height: 100vh;
    grid-template-areas: "nh r  ch" "nav r  cc";
  }
  .note-app--controller .note--controller > * {
    overflow-y: auto;
  }
}
@media screen and (max-width: 599px) {
  .note-app--controller .note--controller {
    grid-template-columns: 100% !important;
    grid-template-rows: 45px auto 45px auto;
    grid-template-areas: "nh" "nav" "ch" "cc";
  }
  .note-app--controller .note--controller > .resize--controller {
    display: none;
  }
  .note-app--controller .note--controller > .note-content--controller, .note-app--controller .note--controller > .note-content--controller textarea {
    min-height: calc(100vh - 45px);
  }
}
.note-app--controller .note--controller > .content-header--controller {
  position: relative;
}
.note-app--controller .note--controller > .content-header--controller > .account-option--controller {
  position: absolute;
  right: 11px;
  top: 15px;
}
.note-app--controller .note--controller > .nav-header--controller {
  display: flex;
  flex-direction: row-reverse;
}
.note-app--controller .note--controller > .nav-header--controller button {
  height: 100%;
  width: 30px;
  padding: 0;
}
.note-app--controller .note--controller > .nav-header--controller input[name=search] {
  width: calc(100% - 30px);
}
.note-app--controller .note--controller > .note-content--controller, .note-app--controller .note--controller > .note-content--controller .tab--controller, .note-app--controller .note--controller > .note-content--controller .tab--controller > *, .note-app--controller .note--controller > .note-content--controller textarea {
  height: 100%;
  width: 100%;
}
.note-app--controller .note--controller > .note-content--controller .tab--controller {
  display: flex;
}
.note-app--controller .note--controller > .note-content--controller .tab--controller > * {
  overflow: auto;
}
.note-app--controller .resize--controller {
  background: rgb(204.1, 204.1, 204.1);
  color: pink;
  cursor: col-resize;
}
.note-app--controller .resize--controller:hover {
  background: rgb(191.35, 191.35, 191.35);
}
.note-app--controller .resize--controller.-resizing {
  background: rgb(178.6, 178.6, 178.6);
}
.note-app--controller .account-option--controller {
  text-align: right;
}
.note-app--controller .account-option--controller > span {
  user-select: none;
}
.note-app--controller .nav-header--controller {
  border-bottom: 1px solid rgb(229.6, 229.6, 229.6);
}
.note-app--controller .nav-header--controller button {
  background: white;
  border-width: 0;
  font-size: 1.1em;
}
.note-app--controller .nav-header--controller button:hover {
  background: rgb(255, 196, 210.6583850932);
}
.note-app--controller .nav-header--controller input[name=search] {
  font-size: 1em;
  border: none;
  outline: none;
  padding: 11px;
}
.note-app--controller .note-nav--controller {
  background: white;
  font-size: 0.8em;
}
.note-app--controller .note-nav--controller > ul {
  background: linear-gradient(rgb(229.6, 229.6, 229.6), rgb(255, 196, 210.6583850932));
}
.note-app--controller .note-nav--controller > ul > li {
  font-weight: 500;
  font-size: 0.95em;
  padding: 0.8em 0.5em 0.8em 11px;
  background: white;
  margin-top: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (max-width: 599px) {
  .note-app--controller .note-nav--controller > ul > li {
    font-size: 1.1em;
  }
}
.note-app--controller .note-nav--controller > ul > li:first-child {
  margin-top: 0px;
}
.note-app--controller .note-nav--controller > ul > li:hover {
  background-color: rgb(255, 196, 210.6583850932);
}
.note-app--controller .note-nav--controller > ul > li.-active {
  color: white;
  background: #ff5e86;
  cursor: default;
}
.note-app--controller .note-nav--controller > ul > li.-archived {
  font-style: italic;
}
.note-app--controller .note-nav--controller > ul > li.-starred {
  font-weight: bold;
}
.note-app--controller .note-nav--controller > ul > li.-tag {
  text-align: right;
  font-weight: bold;
  background: white inline-image("tag.svg") no-repeat;
  background-size: 1.6em;
  background-position: 0.8em center;
}
.note-app--controller .note-nav--controller > ul > li.-tag:hover {
  background-color: rgb(255, 196, 210.6583850932);
}
.note-app--controller .note-nav--controller > ul > li > time {
  float: right;
  font-size: 0.95em;
  color: rgba(0, 0, 0, 0.4);
}
.note-app--controller .note-view--controller {
  line-height: 1.85;
  hyphens: auto;
}
@media screen {
  .note-app--controller .note-view--controller {
    padding: 22px;
  }
}
.note-app--controller .note-view--controller h6, .note-app--controller .note-view--controller h5, .note-app--controller .note-view--controller h4, .note-app--controller .note-view--controller h3, .note-app--controller .note-view--controller h2, .note-app--controller .note-view--controller h1 {
  font-weight: bold;
  line-height: 1.42;
  position: relative;
  font-family: Georgia, Helvetica, Arial, serif;
}
.note-app--controller .note-view--controller h6::before, .note-app--controller .note-view--controller h5::before, .note-app--controller .note-view--controller h4::before, .note-app--controller .note-view--controller h3::before, .note-app--controller .note-view--controller h2::before, .note-app--controller .note-view--controller h1::before {
  color: #ddd;
  position: absolute;
  left: -1em;
  font-size: 0.9rem;
  font-weight: 100;
}
.note-app--controller .note-view--controller table, .note-app--controller .note-view--controller ul, .note-app--controller .note-view--controller ol, .note-app--controller .note-view--controller p, .note-app--controller .note-view--controller h6, .note-app--controller .note-view--controller h5, .note-app--controller .note-view--controller h4, .note-app--controller .note-view--controller h3, .note-app--controller .note-view--controller h2, .note-app--controller .note-view--controller h1 {
  margin-block-start: 16px;
  margin-block-end: 16px;
}
.note-app--controller .note-view--controller strong,
.note-app--controller .note-view--controller b {
  font-weight: bold;
}
.note-app--controller .note-view--controller em,
.note-app--controller .note-view--controller i {
  font-style: italic;
}
.note-app--controller .note-view--controller h1 {
  font-size: 2.1867647056em;
}
.note-app--controller .note-view--controller h1::before {
  content: "1";
}
.note-app--controller .note-view--controller h2 {
  font-size: 1.8220588232em;
}
.note-app--controller .note-view--controller h2::before {
  content: "2";
}
.note-app--controller .note-view--controller h3 {
  font-size: 1.5323529408em;
}
.note-app--controller .note-view--controller h3::before {
  content: "3";
}
.note-app--controller .note-view--controller h4 {
  font-size: 1.3176470584em;
}
.note-app--controller .note-view--controller h4::before {
  content: "4";
}
.note-app--controller .note-view--controller h5 {
  font-size: 1.177941176em;
}
.note-app--controller .note-view--controller h5::before {
  content: "5";
}
.note-app--controller .note-view--controller h6 {
  font-size: 1.1132352936em;
}
.note-app--controller .note-view--controller h6::before {
  content: "6";
}
.note-app--controller .note-view--controller p {
  height: auto;
  line-height: 1.45;
}
.note-app--controller .note-view--controller h1 {
  margin-top: 0;
  padding: 0.1em 0 !important;
}
.note-app--controller .note-view--controller small {
  font-size: 0.707em;
}
.note-app--controller .note-view--controller img,
.note-app--controller .note-view--controller canvas,
.note-app--controller .note-view--controller iframe,
.note-app--controller .note-view--controller video,
.note-app--controller .note-view--controller svg,
.note-app--controller .note-view--controller select,
.note-app--controller .note-view--controller textarea {
  max-width: 100%;
}
.note-app--controller .note-view--controller div {
  width: 100%;
}
.note-app--controller .note-view--controller div img {
  width: 100%;
}
.note-app--controller .note-view--controller ol {
  list-style: decimal;
}
.note-app--controller .note-view--controller ul {
  list-style: disc;
}
.note-app--controller .note-view--controller li {
  margin-left: 2rem;
}
.note-app--controller .note-view--controller code {
  font-family: Consolas, "Courier New", Courier, monospace;
  background: bottom repeat-x rgba(223, 221, 221, 0.3);
  padding: 4px;
  border-radius: 3px;
}
.note-app--controller .note-view--controller .compile-error, .note-app--controller .note-view--controller pre > code {
  font-family: Menlo, Monaco, Courier New, monospace;
  font-size: 0.8rem;
}
.note-app--controller .note-view--controller pre > code {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.4em;
  margin: 0;
  padding: 1.125em;
  display: block;
  overflow: auto;
}
.note-app--controller .note-view--controller pre > code.language-bash, .note-app--controller .note-view--controller pre > code.language-zsh, .note-app--controller .note-view--controller pre > code.language-console {
  background-color: black;
  color: white;
}
.note-app--controller .note-view--controller a {
  color: #3498db;
}
.note-app--controller .note-view--controller a:visited {
  color: #3498db;
}
.note-app--controller .note-view--controller a:hover {
  color: #2980b9;
}
.note-app--controller .note-view--controller a:focus {
  color: #2980b9;
}
.note-app--controller .note-view--controller a:active {
  color: #2980b9;
}
.note-app--controller .note-view--controller blockquote p {
  font-style: italic;
  padding: 0 0 0 2em;
  border-left: 1px solid #333;
}
.note-app--controller .note-view--controller table {
  font-size: 0.95em;
  border-collapse: collapse;
}
.note-app--controller .note-view--controller table td,
.note-app--controller .note-view--controller table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}
.note-app--controller .note-view--controller table th {
  text-align: center;
  font-size: 0.9em;
  font-weight: 100;
  border-bottom-width: 3px;
  border-bottom-style: double;
}
.note-app--controller .note-view--controller script {
  display: block;
  background: rgba(0, 0, 0, 0.05);
}
.note-app--controller .note-view--controller script::before {
  content: "<script>";
  color: #999;
}
.note-app--controller .note-view--controller .compile-error {
  display: block;
  background: rgba(255, 0, 0, 0.1);
  padding: 1.125em;
  white-space: pre-wrap;
}
.note-app--controller .note-edit--controller textarea {
  border: none;
  font-family: Fira Code, Consolas, Courier New, Courier, monospace;
  font-size: 1em;
  outline: none;
  padding: 22px;
  resize: none;
  display: block;
}
.note-app--controller .note-edit--controller textarea:read-only {
  background: rgb(204.1, 204.1, 204.1);
}
.note-app--controller .note-meta--controller dd {
  font-weight: 300;
  margin: 0.5em;
}
.note-app--controller .note-meta--controller .tags > li {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  background: rgb(229.6, 229.6, 229.6);
}
.note-app--controller .note-meta--controller .tags > li:hover {
  background: rgb(255, 196, 210.6583850932);
}
.note-app--controller .note-meta--controller .tags > li.-unsaved {
  opacity: 0.5;
}
.note-app--controller .tool-bar--controller {
  display: flex;
  height: 40px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  position: fixed;
  right: 50px;
  bottom: 0;
  border-right: 3px solid rgb(229.6, 229.6, 229.6);
  border-top: 3px solid rgb(229.6, 229.6, 229.6);
  border-left: 3px solid rgb(229.6, 229.6, 229.6);
}
.note-app--controller .tool-bar--controller > input[type=image] {
  width: 32px;
  height: 32px;
  margin: 2px;
  padding: 4px;
}
.note-app--controller .tool-bar--controller > input[type=image]:hover {
  background: rgb(255, 196, 210.6583850932);
}

body {
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.flash--controller {
  font-size: 0.8em;
  position: fixed;
  bottom: 0;
  right: 11px;
  max-width: calc(80vw - 11px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  padding: 6px 10px;
  opacity: 0.8;
  transition: 400ms;
}
.flash--controller.-hidden {
  opacity: 0;
  display: none;
}
.flash--controller[data-style=ok] {
  background: #cdc;
}
.flash--controller[data-style=error] {
  background: #dcc;
}

.tab-chooser {
  --inner-padding: 6px;
  font-weight: 400;
  display: inline-block;
  height: calc(100% - var(--inner-padding));
  margin-top: var(--inner-padding);
  margin-left: var(--inner-padding);
  cursor: pointer;
}
.tab-chooser > li {
  height: 100%;
  display: inline-block;
  padding: 0 16px;
  padding-top: 11px;
  border: 1px solid transparent;
  border-top-width: 3px;
  border-radius: var(--inner-padding) var(--inner-padding) 0 0;
  border-bottom: none;
}
.tab-chooser > li.-active {
  border-color: #ccc;
  border-top-color: #ff5e86;
  background: white;
}
.tab-chooser > li.-active:hover {
  background: white;
}
.tab-chooser > li:hover {
  background: rgb(255, 196, 210.6583850932);
}

.tab--controller {
  display: flex;
}
.tab--controller .tab-hidden {
  display: none !important;
}

/* width */
::-webkit-scrollbar {
  width: 0.7em;
}

/* Track */
::-webkit-scrollbar-track {
  background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(204.1, 204.1, 204.1);
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(191.35, 191.35, 191.35);
}

::selection {
  background: #ff5e86;
  color: white;
  text-shadow: none;
}

/*# sourceMappingURL=style.css.map */