*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.right-2 {
  right: 0.5rem;
}

.right-4 {
  right: 1rem;
}

.top-14 {
  top: 3.5rem;
}

.top-2 {
  top: 0.5rem;
}

.top-7 {
  top: 1.75rem;
}

.z-10 {
  z-index: 10;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-3 {
  width: 0.75rem;
}

.w-full {
  width: 100%;
}

.max-w-xs {
  max-width: 20rem;
}

.translate-x-96 {
  --tw-translate-x: 24rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.flex-row {
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.fill-orange-600 {
  fill: #ea580c;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.opacity-0 {
  opacity: 0;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-500 {
  transition-duration: 500ms;
}

:root {
  --bg-left: hsl(202, 74%, 30%);
  --bg-main: hsl(202, 72%, 41%);
  --tree-bg-2: hsl(202, 59%, 47%);
  --tree-bg-2-lighter: hsl(202, 50%, 56%);
  --tree-fg-2: hsl(202, 0%, 30%);
  --tree-bg-1: hsl(202, 48%, 60%);
  --tree-bg-1-lighter: hsl(202, 43%, 67%);
  --active-bg: hsl(202, 100%, 100%);
  --selection-color: hsl(86, 54%, 51%);
  --emphasis-color: hsl(36, 100%, 50%);
  /* --edit-bg is not defined here,
     so that we can fallback to
     "handmadepaper.png" background
     image.
   */
  --edit-boxshadow: inset 2px 2px 7px 0px rgb(0 0 0 / 22%), inset 0px 0px 2px 0.5px rgb(0 0 0 / 63%);
  --edit-text-color: hsl(27,28%,22%);
  --edit-text-shadow: -1px -1px 0px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,0.8);
  --normal-text-color: hsl(0, 20%, 17%);
  --normal-text-color-medium: #333;
  --body-font: "Open Sans";
  --header-font: "Bitter";
  --background-sidebar: hsl(200, 15%, 90%);
  --background-sidebar-menu: hsl(200, 13%, 95%);
  --small-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  --translucent-emphasis-1: hsla(0,100%,100%, 0.4);
  --translucent-emphasis-2: hsla(0,100%,100%, 0.1);
  --ui-1-fg: #334;
  --ui-1-bg: white;
  --ui-2-fg: black;
  --ui-2-bg: hsl(202, 34%, 96%);
  --ui-2-border-color: hsl(212deg 5% 58%);
  --ui-3-fg: #334;
  --ui-3-bg: rgb(217,217,217);
  --ui-3-border-color: #c8d3d8;
  --ui-4-fg: hsl(212deg 4% 30%);
  --fullscreen-card-borders: #dedede;
  --fullscreen-inactive-text-color: hsl(27,11%,75%);
  --card-btn-color: hsl(0,0%,20%);
  --scrollbar-bg-color: #ddd;
  --scrollbar-thumb-color: #61808e;
  --scrollbar-shadow-color: #312c2c;
  --scrollbar-thumb-border-top: #8499a2;
  --scrollbar-thumb-border-bottom: #566e78;
}

html, body {
  margin: 0;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: caption;
  background: var(--tree-bg-2-lighter);
}

.container h1 {
  margin: 0;
}

label {
  font: caption;
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 20px;
  box-shadow: inset 1px 0px 2px 0px rgba(0,0,0,0.3);
}

*::-webkit-scrollbar-thumb {
  background: #61808e;
  border-radius: 20px;
  border-top: 1px solid #8499a2;
  border-bottom: 1px solid #566e78;
}

#container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content auto;
  grid-gap: 0px 0px;
  grid-template-areas: "top" "middle" "bottom";
}

#new-row {
  grid-area: top;
  padding: 20px 15px;
  background-color: var(--bg-left);
}

#open-import-row {
  grid-area: middle;
  padding: 20px 15px;
  background-color: var(--bg-main);
}

#recent-documents-block {
  grid-area: bottom;
  padding: 10px 15px 0px;
  overflow-y: auto;
  min-height: 150px;
}

.document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: hsl(0, 1%, 90%);
  padding: 0 10px;
  margin-bottom: 4px;
  cursor: pointer;
  box-shadow: 1px 0px 2px hsla(0,0%,0%,0.4);
  border-radius: 2px;
  border-bottom: 1px solid hsl(0,0%,25%);
  border-top: 1px solid white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-item:hover {
  background: white;
}

.doc-title {
  flex: auto;
  color: black;
  text-decoration: none;
}

.document-item:hover .remove-button {
  opacity: 0.3;
}

.remove-button {
  font-size: 150%;
  opacity: 0;
  transition: opacity 1s;
}

.document-item:hover .remove-button:hover {
  opacity: 1;
}

#import-selecting {
  position: fixed;
  height: 100%;
  overflow-y: scroll;
}

#buttons-block {
  position: relative;
  display: flex;
  justify-content: flex-end;
  grid-area: footer;
  background-color: #477085;
  box-shadow: 2px -2px 2px rgba(0,0,0,0.2);
  padding: 10px 20px;
}

.document-item.language-button {
  position: absolute;
  left: 20px;
  bottom: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background: #588094;
  border-top: 1px solid #84b1c7;
}

.document-item.language-button:hover {
  background: #84b1c7;
  border-top: 1px solid #9fcbe0;
}

.language-item {
  flex: auto;
  padding: 3px 10px;
  width: 100%;
  text-align: center;
}

.language-item.selected {
  background: hsl(0, 0%, 100%,0.6);
}

.template-item {
  cursor: pointer;
}

a.template-item {
  color: hsl(0,0%,94%);
  text-decoration: none;
}

.template-thumbnail {
  width: 120px;
  background: white;
  height: 80px;
  margin-bottom: 5px;
  box-shadow: 1px 1px 4px black;
  border: 4px solid transparent;
}

.template-item:hover .template-thumbnail {
  border: 4px solid #a6cc90;
}

.template-title {
  font-weight: bold;
  font-size: 90%;
  max-width: 160px;
}

.template-description {
  font-size: 75%;
  font-style: italic;
  color: #aaa;
  max-width: 120px;
}

.template-thumbnail.new {
  background: url('./docs-blank_1.png');
  background-size: cover;
  background-position-y: center;
}

.template-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-section-header {
  color: hsl(221, 44%, 88%);
  display: flex;
  margin-bottom: 8px;
  padding-right: 20px;
  justify-content: space-between;
  align-items: baseline;
}

.list-header {
  color: hsl(202, 69%, 26%);
  font-size: 80%;
  font-weight: normal;
}

.document-list.archived {
  max-height: 138px;
}

.doc-opened {
  opacity: 0.8;
  font-size: 80%;
}

.doc-title, .doc-opened {
  margin-right: 10px;
  padding: 10px 0;
}

.doc-buttons * {
  width: 18px;
}

.doc-buttons *:hover path {
  background-color: white;
}

#import-selection-list {
  height: 80%;
  overflow-y: scroll;
  box-shadow: inset 2px 2px 3px #e5e1e1;
  border: 1px solid #c6c6c6;
  margin-bottom: 10px;
}

#import-selection-list ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  line-height: 1.4;
}

#import-selection-list ul input[type="checkbox"] {
  margin-right: 10px;
}

#import-selection-list li {
  display: flex;
}

#import-selection-list li span:first-child {
  flex: auto;
}

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('./fonts/glyphicons-halflings-regular.woff2');
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  display: flex;
  background: var(--bg-main);
}

body {
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to   {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to   {
    opacity: 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: 0 -100px;
  }

  100% {
    background-position: 0 600px;
  }
}

::-moz-selection {
  background: #9fe147;
}

::selection {
  background: #9fe147;
}

/* ======== Non-doc pages ===== */

#form-page {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0px, 0.5fr) 20px max-content 1fr;
  grid-template-rows: minmax(60px, 0.2fr) min-content 1fr;
  grid-template-areas:
    ". . . ."
    ". . headline headline"
    ". . form .";
}

@media only screen and (max-width:28em) {
  #form-page .subtitle {
    display: none;
  }

  #form-page a.brand {
    display: none;
  }
}

@media only screen and (max-width: 28em) and (orientation: landscape) {
  #form-page .page-backdrop {
    display: none;
  }
}

#form-page * {
  z-index: 1;
}

.page-backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url("https://gingkowriter.com/img/cork-wallet.png");
  mix-blend-mode: multiply;
}

#form-page .form-header-container {
  grid-area: headline;
}

#form-page .brand {
  align-items: center;
  padding-left: 20px;
  padding-top: 20px;
}

#form-page .brand h1 {
  font-family: Catamaran, Helvetica, Arial, sans-serif;
  font-size: 2rem;
}

#form-page a.brand {
  text-decoration: none;
  color: black;
  width: -moz-fit-content;
  width: fit-content;
}

#form-page #logo {
  width: 72px;
  margin-bottom: 3px;
  margin-right: 8px;
}

#form-page .page-bg {
  background-color: aliceblue;
  grid-area: 1 / 2 / 6 / 7;
  box-shadow: -3px 0px 3px hsla(0, 0%, 0%,0.5);
}

#form-page .headline {
  padding-left: 20px;
  font-family: Catamaran,Helvetica,Arial,sans-serif;
  font-weight: 200;
  font-size: 2.4em;
}

#form-page .subtitle {
  padding-left: 20px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 1em;
}

#form-page .header {
  grid-area: header;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

#form-page span.alt-action {
  color: #888;
}

#show-hide-password {
  display: flex;
  cursor: pointer;
}

#show-hide-password .icon {
  width: 16px;
  margin-right: 4px;
  fill: #808080;
}

#show-hide-password:hover {
  color: black;
}

#show-hide-password:hover .icon {
  fill: black;
}

#post-cta-divider {
  margin-top: 26px;
  margin-bottom: 12px;
  display: flex;
  color: #b1b1b1;
}

#post-cta-divider hr {
  width: 80%;
  height: 0;
  border: 1px solid #ccc;
}

#post-cta-divider div {
  margin: 0 8px;
}

.extra-info {
  color: #888;
  width: 30ch;
}

#form-page .extra-info.legacy {
  background-color: #ffe89a;
  color: #333;
  padding: 12px;
  border-radius: 10px;
  box-shadow: var(--small-shadow);
}

#form-page .cta {
  background-color: var(--selection-color);
  color: #122000;
  text-shadow: 0px 1px 1px #b7e779;
  font-size: 110%;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #358b11;
  cursor: pointer;
  margin-top: 21px;
  box-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.2);
}

#form-page .cta:hover {
  background-color: #94cb56;
}

#form-page label {
  color: #808080;
  margin-bottom: 5px;
  position: relative;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.center-form {
  grid-area: form;
  padding: 20px;
  max-width: 300px;
}

.center-form form {
  display: flex;
  flex-direction: column;
}

.center-form input {
  margin-bottom: 22px;
}

.center-form .alt-action {
  text-align: center;
}

.center-form .alt-action a {
  text-decoration: none;
  color: #84b1c7;
}

#form-page input:not([type='checkbox']), #contact-form input:not([type='radio']), #contact-form textarea {
  border: 1px solid gray;
  padding: .5em 1em;
  font-size: 1em;
  box-shadow: inset 2px 2px 3px #eee;
  border-radius: 4px;
}

a.forgot-password {
  margin-top: 0px;
  margin-bottom: 18px;
  text-align: right;
  font-size: smaller;
  color: #b1b1b1;
}

#form-errors {
  background: #ffebee;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #b71c1c;
}

input.has-error {
  border: 1px solid #f44336 !important;
}

.input-errors {
  color: #f44336;
  font-size: 12px;
  margin-top: -20px;
  margin-bottom: 6px;
}

#message-page {
  position: fixed;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

.message-card {
  position: relative;
  background: var(--active-bg);
  color: var(--normal-text-color);
  border: none;
  box-shadow: 0px 1px 3px hsl(0deg 0% 0% / 79%), 0px 0px 40px hsl(0deg 0% 0% / 10%);
  padding: 50px;
  border-radius: 10px;
}

.message-cta {
  position: absolute;
  right: 50px;
}

/* ======== THEMES ======== */

.classic-theme {
  --bg-left: hsl(214, 20%, 80%);
  --bg-main: hsl(214, 20%, 80%);
  --tree-bg-2: hsl(240, 6%, 88%);
  --tree-bg-2-lighter: hsl(240, 6%, 92%);
  --tree-bg-1: hsl(240, 7%, 94%);
  --tree-bg-1-lighter: hsl(240, 7%, 98%);
  --active-bg: hsl(202, 100%, 100%);
  --selection-color: hsl(86, 54%, 51%);
  --edit-bg: #fcfcfc;
  --edit-text-color: hsl(27,28%,22%);
  --edit-boxshadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 10px #d8f1bc;
  --edit-border: 1px solid #8cc63f;
  --normal-text-color: hsl(0, 20%, 17%);
  --body-font: serif;
  --header-font: "Open Sans";
  --buffer-bg: rgba(255,255,255,.4);
  --buffer-border: 1px solid rgba(0,0,0,.2);
  --left-column-border-right: none;
}

.dark-theme {
  --bg-left: hsl(232, 15%, 6%);
  --bg-main: hsl(232, 14%, 5%);
  --tree-bg-2: hsl(232, 14%, 9%);
  --tree-bg-2-lighter: hsl(232, 14%, 15%);
  --tree-fg-2: hsl(60, 10%, 41%);
  --tree-bg-1: hsl(232, 14%, 14%);
  --tree-bg-1-lighter: hsl(232, 14%, 15%);
  --active-bg: hsl(231, 15%, 18%);
  --selection-color: hsl(135, 94%, 65%);
  --edit-bg: #1e1e1e;
  --edit-text-color: hsl(60, 30%, 96%);
  --edit-text-shadow: -1px -1px 0px rgba(255,255,255,0.2), 1px 1px 0px black;
  --normal-text-color: hsl(60, 30%, 96%);
  --normal-text-color-medium: hsl(60, 22%, 80%);
  --background-sidebar: hsl(231, 15%, 18%);
  --background-sidebar-menu: hsl(232, 14%, 25%);
  --ui-1-fg: hsl(60, 30%, 96%);
  --ui-1-bg: hsl(231, 15%, 18%);
  --ui-2-fg: hsl(202, 34%, 96%);
  --ui-2-bg: black;
  --ui-2-border-color: black;
  --ui-3-fg: #8f8fbf;
  --ui-3-bg: rgb(64, 64, 64);
  --ui-3-border-color: #252828;
  --ui-4-fg: #eee;
  --small-shadow: none;
  --translucent-emphasis-1: hsla(0,0%,0%, 0.4);
  --translucent-emphasis-2: hsla(0,0%,0%, 0.1);
  --fullscreen-card-borders: black;
  --fullscreen-inactive-text-color: hsl(60, 11%, 23%);
  --card-btn-color: hsl(0,0%,80%);
  --scrollbar-bg-color: #1e1e1e;
  --scrollbar-thumb-color: hsl(232, 19%, 47%);
  --scrollbar-shadow-color: hsl(0, 5%, 18%);
  --scrollbar-thumb-border-top: hsl(232, 14%, 58%);
  --scrollbar-thumb-border-bottom: hsl(232, 17%, 40%);
}

.dark-theme .modal {
  filter: invert(1);
}

.dark-theme .modal img {
  filter: invert(1);
  border-radius: 50%;
}

.dark-theme .modal iframe {
  filter: invert(1);
}

.dark-theme a {
  color: hsl(207, 90%, 54%);
}

.dark-theme a:visited {
  color: hsl(277, 58%, 60%);
}

.dark-theme .card .view blockquote {
  background: hsl(228, 14%, 26%);
  border-color: hsl(0, 0%, 36%);
}

.gray-theme {
  --bg-left: hsl(202, 0%, 30%);
  --bg-main: hsl(202, 0%, 41%);
  --tree-bg-2: hsl(202, 0%, 47%);
  --tree-bg-2-lighter: hsl(202, 0%, 56%);
  --tree-bg-1: hsl(202, 0%, 60%);
  --tree-bg-1-lighter: hsl(202, 0%, 67%);
  --active-bg: hsl(202, 100%, 100%);
  --selection-color: hsl(86, 0%, 51%);
  /* --edit-bg is not defined here,
     so that we can fallback to
     "handmadepaper.png" background
     image.
   */
  --edit-boxshadow: inset 2px 2px 7px 0px rgb(0 0 0 / 22%), inset 0px 0px 2px 0.5px rgb(0 0 0 / 63%);
  --edit-text-color: hsl(27,28%,22%);
  --normal-text-color: hsl(0, 20%, 17%);
}

.turquoise-theme {
  --bg-left: hsl(172, 74%, 30%);
  --bg-main: hsl(172, 72%, 41%);
  --tree-bg-2: hsl(172, 59%, 47%);
  --tree-bg-2-lighter: hsl(172, 50%, 56%);
  --tree-bg-1: hsl(172, 48%, 60%);
  --tree-bg-1-lighter: hsl(172, 43%, 67%);
  --active-bg: hsl(172, 100%, 100%);
  --selection-color: hsl(44, 80%, 57%);
  /* --edit-bg is not defined here */
  --edit-boxshadow: inset 2px 2px 7px 0px rgb(0 0 0 / 22%), inset 0px 0px 2px 0.5px rgb(0 0 0 / 63%);
  --edit-text-color: hsl(27,28%,22%);
  --normal-text-color: hsl(0, 20%, 17%);
}

.green-theme {
  --bg-left: hsl(87, 74%, 30%);
  --bg-main: hsl(87, 72%, 41%);
  --tree-bg-2: hsl(87, 59%, 47%);
  --tree-bg-2-lighter: hsl(87, 50%, 56%);
  --tree-bg-1: hsl(87, 48%, 60%);
  --tree-bg-1-lighter: hsl(87, 43%, 67%);
  --active-bg: hsl(87, 100%, 100%);
  --selection-color: hsl(314, 80%, 57%);
  /* --edit-bg is not defined here */
  --edit-boxshadow: inset 2px 2px 7px 0px rgb(0 0 0 / 22%), inset 0px 0px 2px 0.5px rgb(0 0 0 / 63%);
  --edit-text-color: hsl(27,28%,22%);
  --normal-text-color: hsl(0, 20%, 17%);
}

/* ======== FLEXBOX ======== */

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#app-root {
  position: fixed;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: min-content min-content 1fr min-content;
  grid-template-areas:
    "app-header app-header app-header"
    "sidebar document-header document-header"
    "sidebar document right-sidebar"
    "footer footer footer"
}

#sidebar {
  grid-area: sidebar;
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: 40px 15px 40px 40px 40px 1fr 40px 40px 40px 15px;
  grid-template-areas:
    "top-left top-left"
    ". ."
    "row1-icon doc-list"
    "row2-icon doc-list"
    "row3-icon doc-list"
    ". doc-list"
    "bott-row1 doc-list"
    "bott-row2 doc-list"
    "bott-row3 doc-list"
    ". .";
  background: var(--background-sidebar);
  border-right: 1px solid var(--ui-2-border-color);
  box-shadow: var(--small-shadow);
}

#brand {
  grid-area: top-left;
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px;
  color: var(--ui-1-fg);
  cursor: pointer;
}

#brand-name {
  margin: 12px 0 5px 10px;
  display: flex;
  color: var(--normal-text-color);
  font-size: 22px;
  font-family: Catamaran, Helvetica, Arial, sans-serif;
}

#hamburger-icon {
  display: none;
}

#sidebar-collapse-icon {
  width: 16px;
  opacity: 0.5;
  right: 5px;
  margin-top: 6px;
  position: absolute;
}

.sidebar-row {
  display: flex;
  width: 100%;
  cursor: pointer;
}

.sidebar-button {
  width: 40px;
  padding: 10px;
  cursor: pointer;
  fill: var(--ui-1-fg);
}

.sidebar-button.open {
  background: var(--background-sidebar-menu);
  fill: var(--ui-2-fg);
  border-radius: 5px 0 0 5px;
  padding-left: 7px;
  margin-left: 3px;
  width: 37px;
  box-shadow: var(--small-shadow);
}

#sidebar.static .sidebar-button, .sidebar-button.disabled {
  fill: #aaa;
  cursor: not-allowed;
}

#sidebar-document-list-wrap {
  grid-area: doc-list;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: var(--background-sidebar-menu);
  border-radius: 5px 0 0 5px;
  width: 175px;
  box-shadow: var(--small-shadow);
}

#sidebar-document-list-wrap::before {
  content: " ";
  width: 6px;
  height: 40px;
  position: fixed;
  left: 38px;
  top: 95px;
  background: var(--background-sidebar-menu);
}

#sidebar-document-list {
  overflow-y: auto;
  padding-bottom: 3px;
  padding-right: 2px;
}

#no-documents {
  text-align: center;
  opacity: 0.3;
  margin-top: 7px;
}

#document-list-filter {
  color: var(--normal-text-color);
  background-color: var(--active-bg);
  margin: 6px 4px;
  padding: 3px 7px;
  font-size: 14px;
  border-radius: 3px;
  border-width: 1px;
}

#document-list-buttons {
  display: flex;
  justify-content: space-around;
}

#document-list-buttons .sort-button {
  color: var(--ui-2-border-color);
  fill: var(--ui-2-border-color);
  width: 40px;
  padding: 8px 12px;
  cursor: pointer;
}

#document-list-buttons .sort-button.selected, #document-list-buttons .sort-button:hover {
  fill: black;
  color: black;
}

.sidebar-menu .sidebar-menu-item, #manage-subscription-button {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.sidebar-menu-item .icon, #manage-subscription-button .icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.sidebar-menu-item:last-child {
  margin-bottom: 10px;
}

.sidebar-menu-item:first-child {
  margin-top: 10px;
}

a.sidebar-menu-item, a.sidebar-menu-item:visited {
  color: inherit;
  text-decoration: none;
}

.sidebar-menu > .no-action {
  cursor: default;
}

#manage-subscription-button {
  background-color: transparent;
  border: none;
  font-size: 16px;
}

.sidebar-menu > .no-action:hover {
  background: var(--background-sidebar-menu);
}

.sidebar-menu > *:last-child {
  padding-bottom: 10px;
  border-radius: 0 0 5px 5px;
}

.sidebar-menu > *:first-child {
  padding-top: 10px;
  border-radius: 5px 5px 0 0;
}

.sidebar-menu > *:hover {
  background: var(--active-bg);
  color: var(--normal-text-color);
}

.sidebar-menu .right-icon {
  width: 11px;
  position: absolute;
  right: 6px;
  top: 8px;
}

#help-menu{
  position: fixed;
  left: 40px;
  bottom: 55px;
  border-radius: 5px 5px 5px 0;
  box-shadow: var(--small-shadow);
  z-index: 2;
}

#help-menu::after {
  content: " ";
  height: 40px;
  width: 4px;
  background: var(--background-sidebar-menu);
  position: absolute;
  bottom: 0;
  left: -2px;
  z-index: 999;
}

#help-menu-exit-top {
  position: fixed;
  left: 0;
  bottom: 355px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

#help-menu-exit-right {
  position: fixed;
  left: 300px;
  bottom: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

#language-menu {
  position: fixed;
  border-radius: 5px 5px 5px 0;
  box-shadow: var(--small-shadow);
  overflow-y: auto;
  z-index: 3;
}

#language-menu .selected {
  background: var(--active-bg);
  font-weight: bold;
}

#account-menu{
  position: fixed;
  left: 40px;
  bottom: 15px;
  border-radius: 5px 5px 5px 0;
  box-shadow: var(--small-shadow);
  z-index: 2;
}

#account-menu::after {
  content: " ";
  height: 40px;
  width: 4px;
  background: var(--background-sidebar-menu);
  position: absolute;
  bottom: 0;
  left: -2px;
  z-index: 999;
}

#loading-overlay {
  grid-area: document;
  width: 100%;
  height: 100%;
  background: var(--bg-main);
  animation: fadeOut 0.5s;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

#preloader {
  background: url("./handmadepaper.png");
}

.spinner {
  grid-area: document;
  align-self: center;
  justify-self: center;
  text-align: center;
  animation: fadeIn 1s;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
  opacity: 0;
}

.spinner > div {
  width: 10px;
  height: 10px;
  margin: 8px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1.0);
  }
}

#empty-message {
  grid-area: document;
  align-self: center;
  justify-self: center;
  padding: 60px;
  border: 2px dashed rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#empty-message #new-button {
  width: 80px;
  padding: 20px;
  border-radius: 5px;
  background: var(--background-sidebar);
  box-shadow: var(--small-shadow);
  cursor: pointer;
}

#empty-message #new-button:hover {
  background: var(--background-sidebar-menu);
}

#doc-error-message {
  grid-area: document;
  align-self: center;
  justify-self: center;
  padding: 60px;
  border: 2px solid rgba(128,0,0,0.4);
  border-radius: 4px;
  background: rgba(255,241,241,1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#document-header {
  grid-area: document-header;
  display: grid;
  grid-template-columns: 15px max-content 1fr min-content 40px 40px 40px;
  grid-template-rows: 40px min-content;
  grid-template-areas:
    ". title doc-header-center migrate-button button1 button2 button3"
    "header-menu header-menu header-menu header-menu header-menu header-menu header-menu";
  color: var(--ui-1-fg);
  background-color: var(--ui-1-bg);
  border-bottom: 1px solid hsl(212deg 5% 58%);
  box-shadow: var(--small-shadow);
  z-index: 3;
}

.header-button {
  width: 40px;
  height: 40px;
  padding: 10px;
  cursor: pointer;
  fill: var(--ui-1-fg);
}

.header-button:hover {
  background: var(--background-sidebar-menu);
  fill: var(--ui-2-fg);
}

.header-button.open {
  background: var(--background-sidebar-menu);
  fill: var(--ui-2-fg);
  border-radius: 5px 5px 0 0;
  padding-top: 7px;
  margin-top: 3px;
  height: 37px;
  box-shadow: var(--small-shadow);
}

#header-collaborators {
  fill: var(--ui-1-fg);
  grid-area: migrate-button;
  display: flex;
  align-items: center;
}

#title {
  grid-area: title;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */

.title-grow-wrap {
  display: grid;
}

.title-grow-wrap > input {
  resize: none;
  overflow: hidden;
}

.title-grow-wrap > input,
.title-grow-wrap .shadow {
  /* Identical styling required!! */
  color: var(--normal-text-color);
  background-color: var(--active-bg);
  font-size: 20px;
  font-family: Arial, serif;
  font-weight: 700;
  padding: 2px 6px;
  margin: 0;
  line-height: 5px;
  border: 2px solid transparent;
  border-radius: 3px;
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

.shadow {
  visibility: hidden;
  white-space: pre-wrap;
}

#title-rename:focus {
  border: 2px solid lightskyblue;
  outline: none;
  box-shadow: inset 1px 1px 3px var(--ui-3-bg);
}

#save-indicator {
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 12px;
  font-family: sans-serif;
  color: var(--ui-4-fg);
  display: flex;
  margin-top: 2px;
  margin-left: 10px;
  gap: 5px;
  align-items: center;
}

#save-indicator.synced {
  opacity: 1;
}

#save-indicator span {
  margin-top: 4px;
}

#save-indicator.synced svg {
  fill: hsl(86, 54%, 51%);
}

#save-indicator.saved-offline {
  animation: fadeInDelayed 1.3s forwards;
}

#save-indicator.saved-offline svg {
  transition: fill 1s ease-in-out;
  fill: hsl(35, 100%, 50%);
}

#save-indicator.never-saved svg {
  animation-name: ckw;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#save-indicator.unsaved svg {
  fill: hsl(0, 0%, 50%);
}

@keyframes ckw {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeInDelayed {
  0%, 30% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#save-indicator.saving {
  transition: none;
  font-weight: bold;
}

#migrate-button {
  grid-area: migrate-button;
}

#history-icon {
  grid-area: button1;
}

#history-icon svg {
  transform: scaleX(-1);
}

#history-menu {
  grid-area: header-menu;
  height: 40px;
  display: grid;
  grid-template-columns: 1fr 184px auto 40px;
  grid-template-areas: "slider info restore close";
  grid-column-gap: 15px;
  padding-left: 15px;
  align-items: center;
  background: var(--background-sidebar-menu);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.2);
}

#history-menu:after {
  content: " ";
  width: 40px;
  height: 4px;
  background: var(--background-sidebar-menu);
  position: absolute;
  top: 36px;
  right: 80px;
  z-index: 999;
}

#history-close-button {
  width: 40px;
  padding: 10px;
  cursor: pointer;
  fill: #555;
}

#history-close-button:hover {
  fill: black;
}

#doc-settings-icon {
  grid-area: button2;
}

#doc-settings-menu {
  position: fixed;
  right: 40px;
  top: 40px;
  border-radius: 5px 0 5px 5px;
  box-shadow: var(--small-shadow);
}

#doc-settings-menu-exit-bottom {
  position: fixed;
  right: 0;
  top: 300px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

#doc-settings-menu-exit-left {
  position: fixed;
  right: 350px;
  top: 0;
  background:transparent;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.header-menu {
  background: var(--background-sidebar-menu);
}

.header-menu h4 {
  padding: 20px 10px 0 10px;
  width: 100%;
  margin-bottom: 0;
}

.header-menu > div {
  padding: 6px 20px;
  width: 100%;
  display: block;
  cursor: pointer;
}

.header-menu > *:last-child {
  padding-bottom: 10px;
  border-radius: 0 0 5px 5px;
}

.header-menu > *:first-child {
  padding-top: 10px;
  border-radius: 5px 5px 0 0;
}

.header-menu > div:hover {
  background: white;
}

#doc-settings-menu:after {
  content: " ";
  width: 40px;
  height: 4px;
  background: var(--background-sidebar-menu);
  position: absolute;
  top: -3px;
  right: 0;
  z-index: 999;
}

#export-icon {
  grid-area: button3;
}

#export-menu {
  grid-area: header-menu;
  height: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  background: var(--background-sidebar-menu);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.2);
}

#export-menu:after {
  content: " ";
  width: 40px;
  height: 4px;
  background: var(--background-sidebar-menu);
  position: absolute;
  top: 36px;
  right: 0px;
  z-index: 999;
}

#export-selection div {
  width: 150px;
}

#export-format div {
  width: 100px;
}

#export-action-buttons {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 100px;
  right: 30px;
  height: 40px;
}

#export-action-buttons div {
  padding: 10px;
  background: var(--background-sidebar);
  width: 40px;
  fill: var(--normal-text-color);
  border-radius: 100%;
  margin-left: 10px;
  height: 40px;
  box-shadow: var(--small-shadow);
  cursor: pointer;
  border: 1px solid darkgray;
}

.toggle-button {
  display: flex;
  height: 30px;
  align-items: center;
  color: gray
}

.toggle-button div {
  padding: 3px 10px;
  border: 1px solid lightgray;
  cursor: pointer;
  text-align: center;
}

.toggle-button div.selected {
  background: #c8ceef;
  color: #243586;
  font-weight: bold;
  border: 1px solid;
}

.toggle-button div:first-child {
  border-radius: 6px 0 0 6px;
}

.toggle-button div:last-child {
  border-radius: 0 6px 6px 0;
}

.max-width-grid {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  right: 0;
  z-index: 21;
  padding: 16px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.top-banner {
  grid-area: document;
  z-index: 1;
  padding: 10px 10px 10px 50px;
  text-align: center;
  background: #d7eaf5;
  height: -moz-min-content;
  height: min-content;
  box-shadow: var(--small-shadow);
}

.modal {
  position: fixed;
  display: grid;
  grid-template-columns: minmax(200px, 800px);
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Use this for centering if unknown width/height */
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  border-radius: 6px;
}

.help-modal {
  display: block;
  position: unset;
  transform: unset;
  max-width: 1200px;
  width: 100%;
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  pointer-events: all;
}

.help-modal .modal-guts {
  max-height: 70vh;
  background-color: hsl(202deg 62% 92%);
}

#shortcut-main-title {
  text-align: center;
  margin-bottom: 24px;
}

#shortcut-modes-wrapper {
  font-size: 0.85rem;
  display: flex;
  justify-content: space-evenly;
  gap: 24px;
}

#mode-divider {
  border-left: 1px solid gray;
}

#view-mode-shortcuts-title, #edit-mode-shortcuts-title   {
  padding: 16px 24px;
  margin-bottom: 24px;
  box-shadow: 0px 1px 3px gray;
}

#view-mode-shortcuts-title {
  border-radius: 3px;
  position: relative;
  background-color: var(--tree-bg-2);
  background: var(--active-bg);
  color: var(--normal-text-color);
  border: none;
  border-left: 4px solid var(--selection-color);
}

#edit-mode-shortcuts-title {
  border: var(--edit-border);
  border-radius: 3px;
  background: var(--edit-bg, url('./handmadepaper.png'));
  font-family: "Roboto Mono", monospace;
  font-weight: normal;
  color: hsl(27,28%,22%);
  text-shadow: -1px -1px 0px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,0.8);
}

.shortcut-table-wrapper {
  margin-bottom: 24px;
}

.shortcut-table {
  line-height: 2.75;
  width: 100%;
  border-spacing: 0;
  border: 1px solid hsl(201, 24%, 64%);
  border-radius: 4px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0px 1px 3px gray;
}

.shortcut-row .shortcut-key {
  margin: 0 4px 0 0;
  padding: 2px 4px;
  height: unset;
}

.shortcut-key.drag-command {
  cursor: move;
  background-color: white;
  box-shadow: none;
}

.shortcut-table-title {
  text-align: center;
}

.shortcut-row {
  cursor: default;
}

.shortcut-row td {
  border-bottom: 1px solid hsl(0deg 0% 95%);
}

.shortcut-row:hover {
  background-color: hsl(199deg 95% 95%);
}

.shortcut-row td:first-child {
  padding-left: 16px;
}

.shortcut-row td:last-child {
  padding-right: 16px;
}

.modal-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid lightgray;
}

.modal-buttons div, .modal-buttons a {
  font-size: 1.2rem;
  background-color: hsla(86deg 54% 51% / 0.5);
  padding: 16px 24px;
  border-radius: 4px;
  border: 2px solid hsl(86deg 54% 51%);
  color: hsl(86deg 54% 25%);
  cursor: pointer;
}

#freshworks-frame-wrapper {
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto;
  box-shadow: 3px 3px 16px black !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.75);
}

.modal .close-button {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  cursor: pointer;
}

.modal-header {
  position: relative;
  padding: 8px 16px;
  border-bottom: 1px solid lightgray;
}

.modal-header h2 {
  margin: 0;
}

.modal-guts {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 16px;
  max-height: 90vh;
}

.file-drop-zone.dragged-over {
  border: 4px solid green;
}

.file-drop-zone {
  width: 100%;
  height: 80px;
  background-color: lightgray;
  box-shadow: inset 2px 2px 4px darkgray;
}

#email-confirm-banner {
  display: flex;
  justify-content: center;
  color: #425c6a;
}

#email-confirm-banner * {
  margin-right: 8px;
}

#email-confirm-banner svg {
  fill: #425c6a;
}

#email-confirm-close-btn {
  position: absolute;
  right: 5px;
  margin-top: 1px;
  cursor: pointer;
}

#top-right-buttons {
  display: flex;
  align-items: center;
  padding: 6px 10px;
}

#top-right-buttons div {
  cursor: pointer;
  margin-left: 10px;
}

#templates-block {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: inset 0px -2px 4px hsla(0,0%,0%,0.4);
  background-color: hsl(219, 13%, 21%);
  color: hsl(0,0%,94%);
}

.template-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 36px;
}

.template-row:last-child {
  margin-bottom: 0;
}

#templates-block h2 {
  margin-bottom: 18px;
  border-bottom: 1px solid #5f5f5f;
  font-family: "Bitter", serif;
}

.import-text-modal-container {
  display: block;
}

#splitting-options-list > div {
  margin-bottom: 10px;
}

.dropdown {
  display: flex;
  flex-direction: column;
  color: var(--ui-1-fg);
  background-color: var(--ui-1-bg);
  box-shadow: 0px 2px 4px hsla(0,0%,0%,0.3);
  padding: 5px 0;
  margin: 0;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-radius: 5px 0 5px 5px;
  list-style: none;
  cursor: default;
}

ul.dropdown > li > * {
  display: block;
  padding: 8px 20px;
  cursor: pointer;
}

ul.dropdown > li > *:hover {
  background-color: #eeeeee;
}

ul.dropdown > li > span.no-interaction {
  cursor: default;
}

ul.dropdown > li > span.no-interaction:hover {
  background-color: white;
}

#help-dropdown {
  position: absolute;
  right: 38px;
  top: 39px;
}

#account-dropdown {
  position: absolute;
  right: 4px;
  top: 39px;
}

.modal.red-alert {
  background: #ffebee;
}

.modal.red-alert .modal-header{
  background: #ef5350;
  color: white;
}

.modal.red-alert #contact-send {
  background: #f44336;
}

.modal:not(.red-alert) #urg-req-info, .modal.red-alert #std-req-info {
  visibility: hidden;
}

.modal.red-alert #urg-req-info, .modal:not(.red-alert) #std-req-info {
  visibility: visible;
}

#contact-form {
  display: flex;
  flex-direction: column;
}

#contact-form input, #contact-form textarea, #contact-form button {
  margin-bottom: 10px;
}

#contact-send {
  height: auto;
  padding: 6px 12px;
  background: var(--selection-color);
  color: white;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
  font-weight: bold;
  font-size: 90%;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
  border: none;
}

#contact-form ~ p {
  text-align: center;
}

#email-copy-btn {
  background-color: #e8e8e8;
  padding: 4px;
  border-radius: 4px;
  margin-left: 4px;
  cursor: pointer;
}

div#video-viewer-container {
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--ui-2-bg);
}

#video-viewer-content {
  display: grid;
  width: 100%;
  height: 350px;
  grid-template-columns: max-content 1fr;
}

#video-viewer-content iframe {
  width: 100%;
  height: 100%;
}

#video-viewer-list {
  padding: 8px 0;
}

.video-item {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  padding: 8px;
  color: var(--fullscreen-inactive-text-color);
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}

.video-item.active-video {
  color: var(--ui-2-fg);
  box-shadow: var(--small-shadow);
  border-radius: 3px 0 0 3px ;
  border-left: 3px solid var(--selection-color);
  background: var(--active-bg);
  border-left: 4px solid var(--selection-color);
}

#video-container {
  background-color: var(--active-bg);
  padding: 16px;
  z-index: 4;
  border-radius: 8px;
  margin-left: -1px;
  box-shadow: var(--small-shadow);
}

span.trial {
  cursor: pointer;
}

span.trial:hover {
  color: #333;
  text-decoration: underline;
}

span.trial-light {
  color: #ddd;
}

span.trial-medium {
  color: #aaa;
}

span.trial-dark {
  color: #333;
}

#upgrade-cta {
  grid-area: doc-header-center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-self: center;
}

#upgrade-cta > *:first-child {
  margin-right: 15px;
}

#upgrade-cta.trial-expired {
  box-shadow: var(--small-shadow);
  background-color: var(--ui-2-bg);
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid var(--emphasis-color);
  height: 54px;
}

#upgrade-cta.trial-expired:hover {
  background-color: var(--ui-1-bg);
}

#upgrade-button {
  height: 30px;
  align-self: center;
  padding: 6px 12px;
  background: #7439c0;
  color: white;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
  font-weight: bold;
  font-size: 90%;
  border-radius: 4px;
  cursor: pointer;
}

#upgrade-cta:hover #upgrade-button {
  background: #69409a;
}

#upgrade-trial-info {
  padding: 8px 16px;
  background: #fff3c9;
  height: -moz-min-content;
  height: min-content;
  color: #c3a746;
  font-size: 14px;
  text-align: center;
}

#upgrade-modal {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    ". checkout"
    ". checkout";
  padding: 0;
}

#upgrade-copy {
  padding: 16px;
}

#migrate-modal {
  display: grid;
  padding-bottom: 32px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas:
  "top top"
  "left right"
  "bottom bottom";
}

#migrate-modal > * {
  padding: 16px;
}

#migrate-modal .top {
  grid-area: top;
  text-align: center;
}

#migrate-modal .left {
  grid-area: left;
}

#migrate-modal .right {
  grid-area: right;
}

#migrate-bugs-modal {
  display: grid;
  padding: 16px 110px;
  grid-template-columns: 1fr;
}

#migrate-modal .bottom {
  grid-area: bottom;
  text-align: center;
}

#pwyw {
  grid-area: pwyw;
  background: #eaeaea;
  margin: 16px;
  border-radius: 6px;
  color: #555;
  box-shadow: inset 1px 1px 3px #bdbdbd;
}

#pwyw-toggle {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  padding: 10px;
}

#pwyw-body {
  padding: 0 16px 16px 16px;
}

#pwyw-body a {
  color: #428bca;
  text-decoration: none;
}

#pwyw-body a:hover {
  color: #2a70a8;
  text-decoration: underline;
}

#stripe-climate {
  display: block;
  margin-top: 12px;
  color: lightslategray;
  text-align: center;
}

#stripe-climate-badge {
  margin-right: 6px;
}

#pwyw-body ul {
  margin:0;
  padding-left: 36px;
}

#pwyw-toggle h3 {
  font-weight: normal;
  color: gray;
  margin: 0;
}

#pwyw-toggle.open h3{
  color: black;
  font-weight: bold;
}

#pwyw-buttons {
  display: flex;
  border: 1px solid darkgray;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 1px 1px 4px hsla(0, 0%, 0%, 0.15);
}

#pwyw-buttons div {
  padding: 6px;
  cursor: pointer;
  border-right: 1px solid darkgray;
}

#pwyw-buttons div:last-child {
  border-right: none;
}

#pwyw-buttons div.checked {
  background: #42A5F5;
  color: white;
}

.toggle-caret {
  margin-right: 10px;
}

.toggle-caret svg {
  fill: gray;
}

#upgrade-checkout {
  padding: 16px;
  background-color: #eaeaea;
  grid-area: checkout;
}

#upgrade-checkout select {
  font-size: 90%;
  padding: 4px;
}

#upgrade-checkout select.unknown-currency {
  font-size: 110%;
  padding: 5px;
  background: white;
  box-shadow: 0 0 4px #84b1c7;
}

#price-display {
  text-align: center;
  font-size: 120%;
}

#price-amount {
  font-size: 150%;
}

#price-amount.flash {
}

.payment-button {
  width: 100%;
  font-size: 100%;
  height: 3rem;
  outline: 0;
  cursor: pointer;
  border-radius: 6px;
  border-right: 0;
  border-left: 0;
  color: white;
  border-top: 1px solid hsl(77, 100%, 66% );
  border-bottom: 1px solid hsl(77, 100%,13% );
  background: linear-gradient(0deg, hsl(77, 100%, 35%), hsl(77, 100%, 40%) 70%, hsl(77, 71%, 56%));
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}

.payment-button:hover {
  background: hsl(77, 100%, 35% );
}

.payment-button:active {
  margin-top: 1px;
}

.climate-link {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}

.climate-link:hover {
  text-decoration: underline;
}

#fullscreen-button {
  display: none;
}

.sidebar-item a {
  text-decoration: none;
  color: black;
}

.sidebar-document-item a {
  display: block;
  padding: 4px 10px;
  text-decoration: none;
  color: var(--ui-2-border-color);
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}

.sidebar-document-item.active a {
  background: var(--active-bg);
  color: var(--ui-2-fg);
  box-shadow: var(--small-shadow);
  border-radius: 3px;
  border-left: 3px solid var(--selection-color);
}

.sidebar-document-item a:hover, .sidebar-document-item.context-target a {
  color: var(--ui-1-fg);
}

.sidebar-document-item.context-target a {
  background: #fcfcfc;
}

#sidebar-context-menu {
  position: absolute;
  border-radius: 2px;
  border: 1px solid lightgray;
  background-color: white;
  z-index: 20;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5), 2px 2px 4px rgba(0,0,0,0.2);
}

#sidebar-context-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
}

.context-menu-item {
  display: flex;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 16px;
}

.context-menu-item:hover {
  background-color: lightblue;
}

.context-menu-item .icon {
  width: 16px;
  margin-right: 10px;
}

.modal-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
}

#switcher-modal {
  position: absolute;
  top: 80px;
  width: 700px;
  max-width: 80vw;
  max-height: 70vh;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--active-bg);
  display: flex;
  flex-direction: column;
  z-index: 21;
}

#switcher-modal input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.switcher-document-list {
  padding-top: 10px;
  overflow-y: auto;
}

.switcher-document-item {
  cursor: default;
  padding: 10px;
}

.switcher-document-item.current {
  font-weight: bold;
}

.switcher-document-item.selected {
  background-color: #dcf6c4;
}

.switcher-document-item a {
  width: 100%;
  display: block;
}

.switcher-document-item a,
.switcher-document-item a:active,
.switcher-document-item a:visited {
  text-decoration: none;
  color: var(--normal-text-color);
}

.switcher-instructions {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  opacity: 0.5;
  border-top: 1px solid lightgray;
  font-size: 13px;
}

#document {
  grid-area: document;
  background-color: var(--bg-main);
  z-index: -1;
}

#document::-webkit-scrollbar {
  height: 10px;
}

#document::-webkit-scrollbar-track {
  background: var(--scrollbar-bg-color);
  border-radius: 20px;
  box-shadow: inset 1px 0px 2px 0px var(--scrollbar-shadow-color);
}

#document::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 20px;
  border-top: 1px solid var(--scrollbar-thumb-border-top);
  border-bottom: 1px solid var(--scrollbar-thumb-border-bottom);
}

/* ======== COLUMNS ======== */

#document {
  display: grid;
  grid-template-columns: minmax(60px,0.30fr) 1fr minmax(60px,0.30fr);
  overflow-x: auto;
  overflow-y: hidden;
  transform: translateZ(0);
}

#column-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(50ch,100vw),80ch));
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(50ch,100vw),80ch);
}

.column {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  outline: none;
}

.column::-webkit-scrollbar {
  width: 0 !important;
}

.left-padding-column {
  background-color: var(--bg-left);
  border-right: var(--left-col-border-right), 2px solid hsla(0, 0%, 0%, 0.15);
  margin-right: 40px;
}

.buffer {
  margin: 0 16px;
  height: 50vh;
  z-index: 1;
  background: var(--buffer-bg);
  border: var(--buffer-border);
}

/* ======== FULLSCREEN ======== */

#app-fullscreen {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 24px;
  grid-template-columns: auto minmax(min(100vw,80ch), 80ch) auto;
  grid-template-areas: ". main .";
  background: var(--edit-bg, url('./handmadepaper.png'));
  z-index: 4;
}

#fullscreen-main {
  grid-area: main;
  padding-top: 50px;
  padding-bottom: 350px;
}

#fullscreen-buttons {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 36px;
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-direction: column;
  z-index: 5;
}

#fullscreen-buttons > * {
  margin: 24px 0;
  cursor: pointer;
}

#fullscreen-buttons #save-indicator {
  margin: 0;
  position: absolute;
  right: 0;
  width: -moz-max-content;
  width: max-content;
  color: var(--normal-text-color-medium);
}

#fullscreen-save-button, #fullscreen-buttons #save-indicator {
  fill: var(--normal-text-color);
  opacity: 0.1;
}

#fullscreen-save-button:hover {
  fill: var(--normal-text-color);
  opacity: 1;
  transition: none;
}

#fullscreen-buttons.dirty #fullscreen-save-button,
#fullscreen-buttons.dirty #save-indicator {
  opacity: 1;
  transition: opacity 2s ease-in;
}

#fullscreen-buttons.dirty #save-indicator {
  opacity: 1;
  transition: opacity 60s ease-in;
}

#fullscreen-exit {
  fill: var(--normal-text-color);
  cursor: pointer;
  opacity: 0.4;
}

#fullscreen-exit:hover {
  opacity: 1;
}

.fullscreen-parent::-webkit-scrollbar, .fullscreen-children::-webkit-scrollbar {
  width: 0 !important;
}

.card-fullscreen {
  border-bottom: 1px dotted var(--fullscreen-card-borders);
  background: var(--translucent-emphasis-2);
}

.card-fullscreen.active-fullscreen {
  background: var(--translucent-emphasis-1);
}

.card-fullscreen {
  display: grid;
}

.card-fullscreen gw-textarea textarea.edit {
  grid-area: 1/1/2/2;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 40px;
  border: none;
  border-radius: inherit;
  background: transparent;
  font-family: 'Roboto Mono', monospace;
  font-size: 24px;
  line-height: 1.25;
  color: var(--fullscreen-inactive-text-color);
  resize: none;
  outline: none;
  overflow: hidden;
  overflow-wrap: break-word;
  max-width: 100vw;
}

.card-fullscreen.active-fullscreen gw-textarea textarea.edit {
  color: var(--edit-text-color);
  text-shadow: var(--edit-text-shadow);
}

/* ======== GROUP ======== */

.group {
  margin: 0;
  margin-right: -1px;
  padding: 10px;
  background-color: var(--tree-bg-2);
  color: var(--tree-fg-2);
  border-radius: 3px;
  box-shadow: 1px 1px 6px hsla(0, 0%, 0%, 0.26);
  z-index: 5;
  position: relative;
}

.group:empty {
  height: 0;
  padding: 0;
  border: none;
}

.group.has-active {
  background: var(--tree-bg-1);
  color: var(--normal-text-color-medium);
}

.group.active-descendant {
  color: var(--normal-text-color-medium);
  background: var(--active-bg);
  border-radius: unset;
  z-index: 9;
}

.group .card .view img {
  opacity: 0.3;
}

.group.has-active .card .view img,
.group.active-descendant .card .view img {
  opacity: 1;
}

/* ======== CARD (Normal view) ======== */

.card {
  border-left: 4px solid rgba(255,255,255,0);
  border-radius: 3px;
  position: relative;
  background-color: var(--tree-bg-2);
  margin-bottom: 2px;
}

.card:last-child {
  margin-bottom: 0;
}

.card:hover {
  background: var(--tree-bg-2-lighter);
}

.group.active-descendant .card {
  background: var(--active-bg);
}

.group.active-descendant .card:hover {
  background: var(--active-bg);
  box-shadow: 0px 1px 3px lightgray;
}

.group.has-active .card {
  background: var(--tree-bg-1);
}

.group.has-active .card:hover {
  background: var(--tree-bg-1-lighter);
}

.card .view {
  padding: 17px;
  word-wrap: break-word;
  min-height: 56px;
  cursor: pointer;
}

.card.active.has-children .view {
  padding-right: 26px;
}

.card .view * {
  unicode-bidi: plaintext;
}

.card.active .view {
  cursor: auto;
}

.group.has-active .card.active {
  background: var(--active-bg);
  color: var(--normal-text-color);
  border: none;
  border-left: 4px solid var(--selection-color);
  box-shadow: 0px 1px 3px gray;
}

.card.ancestor {
  background: var(--tree-bg-1);
  color: var(--normal-text-color-medium);
  border-left: none;
  padding-left: 4px;
}

.card.ancestor:hover {
  background: var(--tree-bg-1-lighter);
  color: var(--normal-text-color-medium);
}

.card.ancestor::after {
  content: '';
  background: var(--tree-bg-1);
  position: absolute;
  width: 12px;
  height: 100%;
  right: -10px;
  top: 0;
  opacity: 1;
  transition: none;
}

.card.ancestor::before {
  content: '';
  background: var(--tree-bg-1);
  position: absolute;
  width: 12px;
  height: 100%;
  left: -10px;
  top: 0;
  opacity: 1;
  transition: none;
}

.column:nth-child(2) .card.ancestor::before {
  opacity: 0;
}

span.collaborators {
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 9999;
  border-radius: 4px 0 0 4px;
}

.collab-editing .view {
  filter: blur(1.5px);
}

.typing-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  width: auto;
  height: -moz-min-content;
  height: min-content;
  border-radius: 0.25rem;
  padding: 5px;
}

.typing-indicator span {
  height: 7px;
  width: 7px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}

.typing-indicator span:nth-of-type(1) {
  animation: 1s blink infinite 0.3333s;
}

.typing-indicator span:nth-of-type(2) {
  animation: 1s blink infinite 0.6666s;
}

.typing-indicator span:nth-of-type(3) {
  animation: 1s blink infinite 1s;
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}

.card.collab-active.collab-editing::after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: hsla(0, 0%, 70%, 0.4);
  pointer-events: none;
}

/* === Toasts === */

.toast-tray {
  position: fixed;
  top: 50px;
  right: 1em;
  z-index: 9;
}

.toast {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0.8em 1em;
  width: 15em;
  color: white;
  margin-bottom: 1em;
  border-radius: 4px;
  opacity: 1;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.toast--active {
  transform: translateX(-0.3em);
}

.toast--fade-out {
  opacity: 0;
  transform: translateX(20em);
}

.toast-frame {
  min-height: 4em;
  max-height: 4em;
  transition:
          min-height 0.6s linear,
          min-height 0.6s linear;
}

.toast-frame--fade-out {
  min-height: 0;
  max-height: 0;
}

.toast--info {
  background-color: dodgerblue;
}

.toast--warning {
  background-color: orange;
}

.toast--error {
  background-color: crimson;
}

/* === Tooltips === */

.tooltip {
  position: fixed;
  animation-name: fadeIn;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  background-color: var(--normal-text-color);
  color: var(--active-bg);
  font-size: 14px;
  border-radius: 6px;
  padding: 5px 14px;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
}

.tooltip-arrow {
  border-right: 5px solid var(--normal-text-color);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: calc(50% - 5px);
  left: -10px;
}

.tip-above .tooltip-arrow {
  border-top: 5px solid var(--normal-text-color);
  border-bottom: 5px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: 100%;
  left: calc(50% - 5px);
}

.tip-below .tooltip-arrow {
  border-bottom: 5px solid var(--normal-text-color);
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: -10px;
  left: calc(50% - 5px);
}

.tip-below-left .tooltip-arrow {
  border-bottom: 5px solid var(--normal-text-color);
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: -10px;
  right: 5px;
  left: unset;
}

.tip-below-left {
  border-top-right-radius: 3px;
}

.tip-left .tooltip-arrow {
  border-left: 5px solid var(--normal-text-color);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid transparent;
  left: unset;
  right: -9px;
}

/* === WELCOME CHECKLIST === */

#welcome-checklist-container {
  grid-area: document;
  transition: opacity;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  transition-delay: 2s;
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1;
  background: var(--active-bg);
  padding: 16px 16px 8px 16px;
  box-shadow: 3px 3px 16px black;
  border: 2px outset aliceblue;
  border-radius: 4px;
}

#welcome-checklist-container h3 {
  font-size: 17px;
  font-family: 'Bitter';
  margin-bottom: 5px;
  position: relative;
}

#welcome-progress-fraction {
  position: absolute;
  color: gray;
  font-size: 0.8rem;
  font-weight: normal;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  right: 6px;
  bottom: -6px;
}

#welcome-checklist-container .skip-tutorial {
  position: absolute;
  top: 6px;
  right: 6px;
  cursor: pointer;
}

#welcome-checklist-container .skip-tutorial svg {
  fill: gray;
  margin: 0;
}

#welcome-checklist-container .skip-tutorial:hover svg {
  fill: black;
}

#welcome-progress-track {
  width: 100%;
  height: 8px;
  box-shadow: inset 0px 0px 2px gray;
  border-radius: 4px;
  position: relative;
  margin-bottom: 8px;
  overflow: hidden;
}

#welcome-progress-bar {
  background: var(--selection-color);
  position: absolute;
  left:0;
  height: 100%;
}

#welcome-checklist-container ul {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 80%;
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

#welcome-checklist-container .shortcut-key {
  font-size: 0.6rem;
}

#welcome-checklist-container ul li {
  margin-right: 4px;
  height: 32px;
  line-height: 32px;
}

#welcome-checklist-container svg, #welcome-checklist-container .undone-item {
  width: 16px;
  height: 16px;
  margin-bottom: -4px;
  margin-right: 6px;
}

#welcome-checklist-container .undone-item {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
}

#welcome-checklist-container li .content {
  opacity: 1;
  transition: all;
  transition-timing-function: ease-out;
  transition-duration: 0.200s;
}

#welcome-checklist-container li.done .content {
  text-decoration: line-through;
  margin-left: 4px;
  opacity: 0.25;
}

#welcome-checklist-container.all-done {
  opacity: 0;
}

#welcome-checklist-container li.done svg {
  fill: hsl(88, 50%, 30%);
}

#welcome-checklist-container li.done svg path:nth-child(2) {
  fill: hsl(88, 50%, 67%);
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 30px;
  background: #ffd300;
  top: 0;
  opacity: 0;
}

.confetti-piece:nth-child(1) {
  left: 7%;
  -webkit-transform: rotate(-40deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 182ms;
  -webkit-animation-duration: 1116ms;
}

.confetti-piece:nth-child(2) {
  left: 14%;
  -webkit-transform: rotate(4deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 161ms;
  -webkit-animation-duration: 1076ms;
}

.confetti-piece:nth-child(3) {
  left: 21%;
  -webkit-transform: rotate(-51deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 481ms;
  -webkit-animation-duration: 1103ms;
}

.confetti-piece:nth-child(4) {
  left: 28%;
  -webkit-transform: rotate(61deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 334ms;
  -webkit-animation-duration: 708ms;
}

.confetti-piece:nth-child(5) {
  left: 35%;
  -webkit-transform: rotate(-52deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 302ms;
  -webkit-animation-duration: 776ms;
}

.confetti-piece:nth-child(6) {
  left: 42%;
  -webkit-transform: rotate(38deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 180ms;
  -webkit-animation-duration: 1168ms;
}

.confetti-piece:nth-child(7) {
  left: 49%;
  -webkit-transform: rotate(11deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 395ms;
  -webkit-animation-duration: 1200ms;
}

.confetti-piece:nth-child(8) {
  left: 56%;
  -webkit-transform: rotate(49deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 14ms;
  -webkit-animation-duration: 887ms;
}

.confetti-piece:nth-child(9) {
  left: 63%;
  -webkit-transform: rotate(-72deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 149ms;
  -webkit-animation-duration: 805ms;
}

.confetti-piece:nth-child(10) {
  left: 70%;
  -webkit-transform: rotate(10deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 351ms;
  -webkit-animation-duration: 1059ms;
}

.confetti-piece:nth-child(11) {
  left: 77%;
  -webkit-transform: rotate(4deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 307ms;
  -webkit-animation-duration: 1132ms;
}

.confetti-piece:nth-child(12) {
  left: 84%;
  -webkit-transform: rotate(42deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 464ms;
  -webkit-animation-duration: 776ms;
}

.confetti-piece:nth-child(13) {
  left: 91%;
  -webkit-transform: rotate(-72deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 429ms;
  -webkit-animation-duration: 818ms;
}

.confetti-piece:nth-child(odd) {
  background: #7431e8;
}

.confetti-piece:nth-child(even) {
  z-index: 1;
}

.confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  -webkit-animation-duration: 2000ms;
}

.confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  -webkit-animation-duration: 2500ms;
  -webkit-animation-delay: 1000ms;
}

.confetti-piece:nth-child(4n-7) {
  background: red;
}

/* === TOUR === */

div.tour-step {
  line-height: 1;
  font-size: 18px;
  font-weight: bold;
  font-family: "Roboto Mono", monospace;
  /*pointer-events: none;*/
  position: absolute;
  box-sizing: border-box;
  padding: 8px 10px 16px 10px;
  border-radius: 3px;
  background: var(--emphasis-color);
  text-shadow: 1px 1px 0px hsla(0,0%,0%,0.3);
  box-shadow: 0px 2px 2px hsla(0,0%,0%, 0.5);
  border: 1px solid hsla(0,0%,0%,0.2);
  color: #FFFFFF;
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
  display: none;
  opacity: 0;
}

.tour-step .arrow {
  color: #FB8C00;
  text-shadow: 0px 2px 2px hsla(0,0%,0%, 0.6);
  position: absolute;
  font-size: 28px;
}

.tour-step-progress {
  background: #FB8C00;
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3px;
}

.tour-step-progress * {
  background-color: #ffa95c;
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

.tour-step-progress *.on {
  background-color: peachpuff;
  z-index: 3;
}

.tour-step-progress .bg-line {
  position: absolute;
  height: 2px;
  width: 86%;
  top: 5px;
  z-index: 0;
}

.tour-step-progress .bg-line.on {
  z-index: 1;
}

#welcome-step-1.shimmer {
  background: var(--emphasis-color);
  background-image: linear-gradient(to bottom, var(--emphasis-color) 0%, #ffe89a 20%, var(--emphasis-color) 40%, var(--emphasis-color) 100%);
  animation-name: shimmer;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
}

#app-root.step-1 #welcome-step-1 {
  display: block;
  opacity: 1;
  transform: translateY(-120%);
}

#welcome-step-1 .arrow {
  bottom: -29px;
  left: 55px;
  font-size: 54px;
}

#app-root.step-1 #column-container .column:nth-child(2) .group .card:nth-child(2) {
  outline: 4px solid orange;
  z-index: 99;
}

#app-root.step-2 #welcome-step-2 {
  display: block;
  opacity: 1;
  width: 100%;
  max-width: 206px;
  text-align: right;
  transform: translateX(-108%);
}

#welcome-step-2 .arrow {
  top: 14px;
  right: -17px;
}

#welcome-step-2 .bg-line.on {
  width: 31px;
  left: 18px;
}

#app-root.step-2 .ins-right {
  opacity: 1;
  box-shadow: 1px 0 5px 1px rgba(255, 153, 0, 0.8);
}

#app-root.step-2 .ins-right:before,  #app-root.step-2 .ins-right:after {
  display: none;
}

#app-root.step-3 #welcome-step-3 {
  display: block;
  opacity: 1;
  max-width: 206px;
  top: 100%;
}

#welcome-step-3 .arrow {
  text-shadow: none;
  top: -25px;
}

#welcome-step-3 .bg-line.on {
  width: 57px;
  left: 16px;
}

#app-root.step-4 #welcome-step-4 {
  display: block;
  opacity: 1;
  max-width: 188px;
  top: 100%;
}

#welcome-step-4 .arrow {
  text-shadow: none;
  top: -25px;
}

#welcome-step-4 .bg-line.on {
  width: 75px;
  left: 16px;
}

#app-root.step-5 #welcome-step-5 {
  display: block;
  opacity: 1;
  transform: translate(50%,-100%);
}

#welcome-step-5 .arrow {
  text-shadow: none;
  bottom: -19px;
  left: 110px;
  color: var(--emphasis-color);
}

#welcome-step-5 .bg-line.on {
  width: 133px;
  left: 16px;
}

#app-root.step-6 #welcome-step-6 {
  display: block;
  opacity: 1;
  left: 47px;
  bottom: 53px;
}

#app-root.step-6 .tooltip, #app-root.step-7 .tooltip {
  /* Hide regular tooltips if on steps 6 & 7 */
  display: none;
}

#welcome-step-6 .arrow {
  text-shadow: none;
  color: var(--emphasis-color);
  top: 4px;
  left: -17px;
}

#welcome-step-6 .tour-step-progress {
  margin-left: 0;
}

#welcome-step-6 .bg-line.on {
  width: 178px;
  left: 21px;
}

#app-root.step-7 #welcome-step-7 {
  display: block;
  opacity: 1;
  top: 55px;
  left: 47px;
}

#welcome-step-7 .arrow {
  text-shadow: none;
  color: var(--emphasis-color);
  top: 3px;
  left: -17px;
}

#welcome-step-7 .bg-line.on{
  width: 215px;
  left: 21px;
}

/* === Export Preview === */

#export-preview {
  grid-area: right-sidebar;
  color: var(--normal-text-color);
  background-color: var(--active-bg);
  width: calc(50vw - 40px);
  position: relative;
  padding: 40px;
  overflow-y: auto;
  box-shadow: -3px 0px 3px hsla(0, 0%, 0%, 0.4);
  border-left: 1px solid #9e9e9e;
  z-index: 2;
}

#export-preview .top-buffer {
  height: 20px;
}

#export-preview img {
  max-width: 80%;
}

#export-preview .plain {
  white-space: pre-wrap;
  font-family: "Roboto Mono", monospace;
}

/* --- Typography --- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.5;
  font-weight: bold;
}

h1 {
  font-size: 24px;
  margin-bottom: 8px
}

h2 {
  font-size: 20px;
  margin-bottom: 6px
}

h3 {
  font-size: 16px;
  margin-bottom: 5px
}

h4 {
  font-size: 14px;
  margin-bottom: 4px
}

h5 {
  font-size: 12px;
  margin-bottom: 20px
}

h6 {
  font-size: 10px;
  margin-bottom: 0
}

p {
  margin: 0;
  padding: 0 0 10px;
}

.card .view {
  font-family: var(--body-font), 'Open Sans', serif;
  line-height: 1.4;
}

.card .view h1, .card .view h2, .card .view h3, .card .view h4, .card .view h5, .card .view h6 {
  font-family: var(--header-font), 'Bitter', serif;
}

pre, code {
  font-family: 'Roboto Mono', monospace;
  color: var(--normal-text-color);
}

pre,
blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}

.card .view blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid;
  background: #f8f8f8;
  border-color: gray;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  white-space: pre;
  background-color: var(--ui-3-bg);
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.428571429;
  word-break: break-all;
  word-wrap: break-word;
  overflow: auto;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.card ul, .card ol {
  margin: 0;
  margin-bottom: 10px;
}

.card img {
  max-width: 100%;
}

.drag-region {
  visibility: hidden;
  position: absolute;
  width: 20px;
  cursor: move;
  height: 100%;
  left: -6px;
  padding: 4px 6px 4px 8px;
}

.handle {
  width: 100%;
  height: 100%;
  background-size: 2px 4px;
  background-image: linear-gradient(0deg, hsla(0, 0%, 44.7%, 0.25) 20%, transparent 50%);
}

.card:hover .drag-region {
  visibility: visible;
}

.card input[type="checkbox"] {
  cursor: pointer;
}

/* ======== CARD (Edit view) ======== */

#document.editing .group {
  background-color: var(--tree-bg-2);
}

#document.editing,
#document.editing .buffer,
#document.editing .group {
  background: rgb(50, 89, 107);
  transition: background 60s ease, box-shadow 60s ease, border-color 60s ease;
  box-shadow: none;
  border-color: transparent;
}

#document.editing .card {
  box-shadow: 1px 2px 4px hsla(0, 0%, 0%, 0.4);
  transition: box-shadow 60s ease;
}

/* --- Core --- */

.group.has-active .card.editing .view {
  display: none;
}

.group.has-active .card.editing {
  display: grid;
  padding: 15px 0px 5px 4px;
  border: var(--edit-border);
  border-radius: inherit;
  background: var(--edit-bg, url('./handmadepaper.png'));
  box-shadow: var(--edit-boxshadow);
}

.group.has-active .card.editing gw-textarea textarea {
  grid-area: 1/1/2/2;
  display: block;
  background: transparent;
  text-shadow: var(--edit-text-shadow);
  color: var(--edit-text-color);
  resize: none;
  outline: none;
  border: none;
  min-height: 60px;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  line-height: 23px;
  padding: 5px 15px;
  font-family: 'Roboto Mono', monospace;
}

.card.active.has-children:not(.editing) {
  margin-right: -9px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ======== CARD (Buttons) ======== */

/* --- Icons --- */

.card-btn.edit,
.card-btn.save,
.card-btn.cancel,
.card-btn.delete {
  font-family: 'Glyphicons Halflings';
  font-size: 13px;
}

#fullscreen-save-and-exit-button {
  color: var(--normal-text-color-medium);
  font-family: 'Glyphicons Halflings';
  font-size: 24px;
  opacity: 0.4;
}

#fullscreen-save-and-exit-button::before {
  content: "\e013";
}

#fullscreen-save-and-exit-button:hover {
  opacity: 1;
  color: hsl(86, 54%, 51%);
}

.card-btn.edit::before {
  content: "\270f";
}

.card-btn.save::before {
  content: "\e013";
}

.card-btn.cancel::before {
  content: "\e090";
}

.card-btn.delete::before {
  content: "\e014";
}

.fullscreen-card-btn {
  fill: var(--normal-text-color);
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  z-index: 100;
  top: 5px;
  right: 5px;
  opacity: 0.4;
}

.fullscreen-card-btn:hover {
  opacity: 1.0;
  transition: none;
}

/* --- Containers --- */

.card-top-overlay, .card-right-overlay, .card-bottom-overlay {
  position: absolute;
  height: 100%;
  width: 33%;
  right: 0;
  pointer-events: none;
}

.card-top-overlay, .card-right-overlay {
  top: 0;
}

.card-top-overlay, .card-bottom-overlay {
  height: 33%;
  width: 100%;
}

.card-bottom-overlay {
  bottom: 0;
}

.card-btn {
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  border-top: 1px solid hsl(0, 0%, 81%);
  border-left: 1px solid hsl(0, 0%, 81%);
  border-right: 1px solid hsl(0, 0%, 53%);
  border-bottom: 1px solid hsl(0, 0%, 53%);
  color: hsl(0, 0%, 71%);
  text-align: center;
  z-index: 100;
  transition: all 0.4s ease-in;
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.card-btn.save,
.card-btn.cancel {
  opacity: 0.4;
}

/* --- Fillet --- */

.fillet {
  width: 16px;
  height: 16px;
  position: absolute;
  fill: var(--active-bg);
  z-index: 1;
  transform-origin: center;
}

.fillet.flipped {
  fill: var(--bg-main);
}

.card.active .fillet.flipped {
  fill: var(--tree-bg-1);
}

.fillet.top-right {
  top: -16px;
  right: 1px;
}

.card.active .fillet.top-right, .card.active .fillet.bottom-right {
  right: 0;
}

.fillet.top-right.flipped {
  top: 0;
  transform: scaleY(-1);
}

.fillet.bottom-right {
  bottom: -16px;
  right: 1px;
  transform: scaleY(-1);
}

.fillet.bottom-right.flipped {
  bottom: 0;
  transform: unset;
}

.fillet.top-left {
  top: -16px;
  left: 0;
  transform: scaleX(-1);
}

.fillet.top-left.flipped {
  top: 0;
  transform: scale(-1,-1);
}

.fillet.bottom-left {
  bottom: -16px;
  left: 0;
  transform: scale(-1,-1);
}

.fillet.bottom-left.flipped {
  bottom: 0;
  left: 0;
  transform: scale(-1,1);
}

/* --- Button positioning & colors --- */

.card-btn.ins-right,
.card-btn.ins-above,
.card-btn.ins-below {
  background: var(--active-bg);
  height: 20px;
  width: 40px;
  line-height: 20px;
}

.card-btn.ins-right {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20px;
  height: calc(100% - 44px);
  max-height: 80px;
  border-left: none;
  width: 20px;
  right: -9px;
}

.card.has-children .ins-right {
  right: 0;
}

.card-btn.ins-right::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--active-bg);
  position: absolute;
  left: -7px;
  border-radius: 0 0 0 10px;
  border-bottom: 1px solid hsl(0, 0%, 60%);
  top:  -7px;
}

.card-btn.ins-right::after {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--active-bg);
  position: absolute;
  left: -7px;
  border-radius: 10px 0 0 0;
  border-top: 1px solid hsl(0, 0%, 40%);
  bottom:  -7px;
}

.card-btn.ins-above {
  top:-10px;
}

.card-btn.ins-below {
  bottom:-10px;
}

.card-btn.delete {
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: none;
  border-radius: 0px 3px 0px 0px;
  color: var(--card-btn-color);
}

.card-btn.edit {
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: none;
  border-radius: 0px 0px 3px 0px;
  color: var(--card-btn-color);
}

.card-btn.save {
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: none;
  color: var(--card-btn-color);
}

.card-btn.cancel {
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: none;
  color: var(--card-btn-color);
}

/* --- Button state --- */

.card:hover .card-btn:not(.save) {
  opacity: 0.3;
}

.card:hover .card-btn.ins-above:hover,
.card:hover .card-btn.ins-below:hover {
  transform: translateY(-1px);
  background: hsl(86, 71%, 95%);
  box-shadow: 0px 1px 1px hsl(0, 0%, 57%);
  opacity: 1.0;
  transition: none;
}

.card:hover .card-btn.ins-right:hover {
  opacity: 1.0;
  border-bottom: 1px solid hsl(0,0%,40%);
  border-right: 1px solid hsl(0,0%,40%);
  border-top: 1px solid hsl(0,0%,65%);
  transition: none;
}

.card:hover .card-btn.ins-above:active,
.card:hover .card-btn.ins-below:active {
  background: hsl(86, 71%, 82%);
  transform: none;
  box-shadow: none;
}

.card:hover .card-btn.delete:hover {
  color: hsl(0, 79%, 66%);
  opacity: 1.0;
  transition: none;
}

.card:hover .card-btn.delete:active {
  color: hsl(0, 80%, 48%);
}

.card:hover .card-btn.edit:hover {
  color: hsl(215, 79%, 66%);
  opacity: 1.0;
  transition: none;
}

.card:hover .card-btn.edit:active {
  color: hsl(215, 54%, 51%);
}

.card:hover .card-btn.save:hover {
  color: hsl(86, 54%, 51%);
  opacity: 1.0;
  transition: none;
}

.card:hover .card-btn.save:active {
  color: hsl(86, 54%, 41%);
}

.card:hover .card-btn.cancel:hover {
  color: hsl(48, 100%, 50%);
  opacity: 1.0;
  transition: none;
}

.card:hover .card-btn.cancel:active {
  color: hsl(48, 100%, 40%);
}

/* --- Root card buttons --- */

.card.root:not(.has-children) .card-btn,
.card.root:not(.has-children):hover .card-btn {
  opacity: 1;
}

.card.root .view {
  min-height: 70px;
}

/* --- Markdown content formatting --- */

.card .view code {
  white-space: inherit;
}

/* ======== CARD (Drop regions) ======== */

.drop-region-above, .drop-region-into, .drop-region-below {
  position: absolute;
  height: 100%;
  width: 25%;
  right: 0;
}

.drop-region-into {
  top: 0;
}

.drop-region-above, .drop-region-below {
  height: 30px;
  width: 100%;
}

.drop-region-above {
  top: -15px;
}

.drop-region-below {
  bottom: -15px;
}

.drop-region-above.drop-hover,.drop-region-below.drop-hover {
  background: linear-gradient(to bottom
    , hsla(86,54%,51%,0.05) 0px
    , hsla(86,54%,51%,0.1) 8px
    , hsla(86,54%,51%,0.5) 12px
    , hsla(86,54%,51%,0.8) 12px
    , hsla(86,54%,51%,0.8) 16px
    , hsla(86,54%,51%,0.5) 16px
    , hsla(86,54%,51%,0.1) 20px
    , hsla(86,54%,51%,0.05) 28px
    );
}

.drop-region-into.drop-hover {
  background: linear-gradient(to right, hsla(86,54%,51%,0) 0%,hsla(86,54%,51%,0.81) 77%,hsla(86,54%,51%,1) 95%,hsla(86,54%,51%,1) 54%);
}

/* ======== UI Animations ======== */

@keyframes flash {
  0% {
    box-shadow: 0px 0px 0px blue;
    z-index: 99999;
  }

  30% {
    box-shadow: 0px 0px 14px blue;
    z-index: 99999;
  }

  100% {
    box-shadow: 0px 0px 0px blue;
    z-index: 99999;
  }
}

.flash {
  animation: flash 0.2s;
}

.card.active.has-children.flash {
  margin-right: -9px;
  /* to extend glow to the right*/
  padding-right: 9px;
}

.card.active.has-children.flash .card-right-overlay {
  margin-right: 9px;
}

@keyframes flash-2 {
  0% {
    box-shadow: 0px 0px 10px transparent;
    z-index: 99999;
  }

  30% {
    box-shadow: 0px 0px 10px #42A5F5;
    z-index: 99999;
  }

  100% {
    box-shadow: 0px 0px 10px transparent;
    z-index: 99999;
  }
}

.flash-2 {
  animation: flash-2 0.4s;
}

/* ======== FONT SELECTOR ======== */

#font-selector select {
  width: 80%;
}

#font-selector button {
  width: 50px;
  margin-left: 20px;
}

/* ======== STATUS BAR ======== */

#breadcrumbs {
  grid-area: document;
  position: absolute;
  display: flex;
  top: 8px;
  left: 10px;
  height: -moz-min-content;
  height: min-content;
  width: -moz-max-content;
  width: max-content;
  background: var(--bg-left);
  font-size: 10px;
  font-family: var(--header-font), 'Bitter', serif;
  font-weight: bold;
  color: var(--ui-1-fg);
  box-shadow: var(--small-shadow);
  border-radius: 2px 8px 8px 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  max-width: calc(100% - 50px);
  opacity: 0.85;
}

#breadcrumbs:hover {
  opacity: 1;
}

#breadcrumbs div {
  cursor: pointer;
  display: flex;
  position: relative;
  padding: 5px 5px 5px 0;
  margin-right: 13px;
  background: var(--background-sidebar);
}

#breadcrumbs div:hover {
  background: var(--active-bg);
  color: var(--ui-2-fg);
}

#breadcrumbs div span:before, #breadcrumbs div span:after{
  content: '';
  position: absolute;
  top: 0;
  border: 0 solid var(--background-sidebar);
  border-width: 11px 6px;
  width: 0;
  height: 0;
}

#breadcrumbs div span:before {
  left: -12px;
  border-left-color: transparent;
}

#breadcrumbs div span:after {
  left: 100%;
  border-color: transparent;
  border-left-color: var(--background-sidebar);
}

#breadcrumbs div:hover span:after {
  border-left-color: var(--active-bg);
}

#breadcrumbs div:hover span:before {
  border-color: var(--active-bg);
  border-left-color: transparent;
}

#breadcrumbs div:first-child span:before {
  display: none;
}

#breadcrumbs div:last-child span:after {
  display: none;
}

#breadcrumbs div:last-child {
  margin-right: 0;
  padding-right: 10px;
  border-radius: 0 8px 8px 0;
}

#breadcrumbs div:first-child {
  padding-left: 10px;
  border-radius: 2px 0 0 2px;
}

#breadcrumbs div:first-child:last-child {
  border-radius: 2px 8px 8px 2px;
}

#breadcrumbs div span {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div#breadcrumbs::-webkit-scrollbar {
  height: 4px;
}

#ai-prompt-container {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#ai-prompt-container * {
  pointer-events: auto;
}

#ai-prompt-button {
  opacity: 0.3;
  grid-area: document;
  position: absolute;
  left: 10px;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--active-bg);
  color: var(--ui-2-fg);
  box-shadow: var(--small-shadow);
  cursor: pointer;
}

#ai-prompt-button:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
}

#ai-prompt {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 2px 10px;
  border-radius: 10px;
  background: var(--background-sidebar);
  box-shadow: var(--small-shadow);
}

#ai-prompt-textarea {
  border-radius: 10px;
  padding: 10px;
  border: 0px;
  color: #333;
  transition: all 0.2s ease-out;
  box-shadow: inset 1px 1px 1px 0px rgb(129, 130, 136);
  width: 450px;
  min-height: 100px;
  pointer-events: auto;
  resize: none;
  outline: none;
}

.ai-prompt-instructions {
  display: flex;
  font-size: 13px;
  opacity: 0.5;
  padding: 5px 0;
  justify-content: space-between;
  align-items: center;
}

#search-field {
  grid-area: document;
  position: absolute;
  bottom: 20px;
  right: 10px;
}

#search-field input {
  border-radius: 10px;
  padding: 2px 10px;
  border: 0px;
  width: 28px;
  opacity: 0.3;
  color: #333;
  transition: all 0.2s ease-out;
}

#search-field input:hover {
  opacity: 0.8;
}

#search-field input:focus, #search-field input:valid {
  outline: none;
  opacity: 1;
  box-shadow: inset 1px 1px 1px 0px rgb(129, 130, 136);
  width: 200px;
}

#search-field .octicon.search {
  position: absolute;
  top: 4px;
  right: 8px;
  pointer-events: none;
}

#wordcount {
  cursor: pointer;
  background-color: whitesmoke;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0px 1px 1px #00000082;
}

#word-count-table {
  display: flex;
  justify-content: space-around;
}

#word-count-table .word-count-column {
  display: flex;
  flex-direction: column;
}

#shortcuts-tray {
  position: fixed;
  top: 40px;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  color: var(--ui-2-fg);
  background-color: var(--ui-2-bg);
  border-left: 1px solid var(--ui-2-border-color);
  box-shadow: var(--small-shadow);
  border-radius: 0 0 0 6px;
  z-index: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 200ms;
}

#shortcuts-tray:not(.open):hover {
  opacity: 0.9;
}

#shortcuts-tray.open {
  opacity: 1;
  grid-area: right-sidebar;
  position: unset;
  top: 0;
  border-radius: 0;
  overflow-y: auto;
}

#shortcuts {
  display: flex;
  flex-direction: column;
}

#shortcuts span {
  font-size: 0.6rem;
}

#shortcuts-tray div.icon-stack {
  margin-top: 3px;
}

div.icon-stack.open {
  background-color: var(--active-bg);
}

#shortcuts-tray h4 {
  border-bottom: 1px solid var(--edit-bg);
}

#shortcuts-tray h5 {
  margin-top: 10px;
  margin-bottom: 0px;
}

#shortcuts-tray hr {
  width: 80%;
  border-bottom: 1px solid lightblue;
  margin-top: 20px;
}

span.shortcut-key {
  display: inline-block;
  min-width: 22px;
  height: 20px;
  line-height: 16px;
  margin-top: 4px;
  margin-right: 3px;
  padding: 1px 4px;
  background: var(--ui-3-bg);
  border: 1px #b3b3b3 solid;
  border-radius: 3px;
  text-align: center;
  box-shadow: inset 0 1px 0 #efefef, 1px 1px 0 #7d7f8c;
}

#shortcuts-tray span.disabled {
  color: #6c7c84;
}

pre.formatting-text {
  display: inline-block;
  padding: 2px 4px;
  margin: 6px 0 0 0;
}

#shortcuts-tray span.markdown-guide {
  margin-top: 4px;
  cursor: pointer;
}

#shortcuts-tray span.markdown-guide a {
  color: #337;
}

#shortcuts-tray span.markdown-guide .icon-container {
  position: relative;
  top: 4px;
  left: 3px;
}

#wc-progress {
}

#wc-progress-wrap {
  display: flex;
  height: 14px;
}

#wc-progress-bar {
  height: 100%;
  background: blue;
}

#wc-progress-bar-session {
  height: 100%;
  background: green;
}

#freshworks-container {
  z-index: 9998 !important;
}

/* ======== FOOTER PREFERENCES ======== */

.horizontal-dialog {
  position : fixed;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 5px 10px 16px;
  color: #223;
  background-color: white;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
  border-bottom: 1px solid #c8d3d8;
}

/* ======== HISTORY ======== */

.conflicts-list {
  position: absolute;
  z-index: 999;
  left: 15px;
  bottom: 10px;
  max-width: 40%;
  padding: 0;
}

.conflict-container {
  background: transparent;
  border: 1px solid lightgray;
  border-radius: 10px 0px 0px 10px;
}

.conflict-container .row {
  text-align: center;
  vertical-align: middle;
  margin: 4px;
}

.option {
  padding: 15px;
  opacity: 0.5;
  cursor: pointer;
  border: 1px solid lightgray;
  background: lightgray;
}

.option.selected, .option.selected:hover {
  opacity: 1;
  border: 1px solid blue;
  background: white;
}

.option:hover {
  opacity: 0.75;
}

ul.changelist {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.changelist li {
  text-align: left;
}

del.diff {
  background: hsl(0, 100%, 77%);
}

ins.diff {
  background: hsl(95, 70%, 60%);
}

ul.changelist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.op-ins {
  background: rgba(0,255,0,0.2);
}

.op-ins:hover {
  background: rgba(0,255,0,0.6);
}

.op-upd {
  background: rgba(0,0,255,0.2);
}

.op-upd:hover {
  background: rgba(0,0,255,0.6);
}

.op-del {
  background: rgba(255,0,0,0.2);
}

.op-del:hover {
  background: rgba(255,0,0,0.6);
}

#history-graph {
  position: absolute;
  top: 40px;
}

@media print {
  #app-root {
    display: block;
    position: absolute;
    height: auto;
  }

  #document {
    display: none;
  }

  #document-header {
    display: none;
  }

  #sidebar {
    display: none;
  }

  #shortcuts-tray {
    display: none;
  }

  #search-field {
    display: none;
  }

  #export-preview {
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  #export-preview .top-buffer {
    display: none;
  }

  #export-action-buttons {
    display: none;
  }
}

#mobile-buttons {
  display: none;
}

@media only screen and (max-width:28em) {
  #app-root {
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
        "sidebar document-header document-header"
        "document document right-sidebar"
        "bottom bottom bottom";
  }

  #document {
    scroll-snap-type: x mandatory;
  }

  #welcome-checklist-container {
    display: none;
  }

  .column {
    scroll-snap-align: center;
  }

  #document.scroll-animation {
    scroll-snap-type: none;
  }

  #hamburger-icon {
    display: block;
    width: 40px;
    padding: 10px;
  }

  #sidebar.open #hamburger-icon {
    display: none;
  }

  #sidebar:not(.open) #brand img {
    display: none;
  }

  #upgrade-button {
    display: none;
  }

  #document-header {
    grid-template-columns: 5px max-content 1fr 40px 40px 40px;
  }

  .title-grow-wrap {
    max-width: 37vw;
  }

  .title-grow-wrap > input, .title-grow-wrap .shadow {
    font-size: 14px;
  }

  #sidebar {
    height: 40px;
    overflow-y: hidden;
  }

  #sidebar.open {
    height: 100%;
    overflow-y: visible;
    position: fixed;
    z-index: 3;
  }

  #shortcuts-tray {
    display: none;
  }

  #mobile-buttons {
    grid-area: bottom;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    bottom: 0;
    text-align: center;
    font-size: 12px;
    font-family: sans-serif;
    color: var(--ui-3-fg);
    background-color: var(--ui-3-bg);
    z-index: 1;
    box-shadow: 0 0 4px #00000085;
  }

  #mobile-buttons .mobile-button {
    width: 100%;
    display: flex;
    height: 30px;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.2);
  }

  #export-preview {
    width: 100%;
    grid-area: document;
  }
}