@import url('./shared.css');

@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200&display=swap');

@font-face {
  font-family: 'Eczar';
  src: url('./fonts/eczar/Eczar-Regular.ttf');
}
@font-face {
  font-family: 'Eczar';
  src: url('./fonts/eczar/Eczar-Bold.ttf');
  font-weight: bold;
}


@font-face {
  font-family: 'Droid Sans Mono';
  src: url('./fonts/Droid_Sans_Mono/DroidSansMono.ttf');
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('./fonts/glyphicons-halflings-regular.woff2');
}


@font-face {
  font-family: 'Libre Baskerville';
  src: url('./fonts/librebaskerville/LibreBaskerville-Regular.ttf');
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('./fonts/librebaskerville/LibreBaskerville-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('./fonts/librebaskerville/LibreBaskerville-Italic.ttf');
  font-style: italic;
}


@font-face {
  font-family: 'Merriweather';
  src: url('./fonts/Merriweather/Merriweather-Regular.ttf');
}
@font-face {
  font-family: 'Merriweather';
  src: url('./fonts/Merriweather/Merriweather-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: 'Merriweather';
  src: url('./fonts/Merriweather/Merriweather-Italic.ttf');
  font-style: italic;
}
@font-face {
  font-family: 'Merriweather';
  src: url('./fonts/Merriweather/Merriweather-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
}


@font-face {
  font-family: 'Open Dyslexic';
  src: url('./fonts/OpenDyslexic/OpenDyslexic-Regular.otf');
}
@font-face {
  font-family: 'Open Dyslexic';
  src: url('./fonts/OpenDyslexic/OpenDyslexic-Bold.otf');
  font-weight: bold;
}
@font-face {
  font-family: 'Open Dyslexic';
  src: url('./fonts/OpenDyslexic/OpenDyslexic-Italic.otf');
  font-style: italic;
}
@font-face {
  font-family: 'Open Dyslexic';
  src: url('./fonts/OpenDyslexic/OpenDyslexic-BoldItalic.otf');
  font-weight: bold;
  font-style: italic;
}

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;
  }
}

::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: 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-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-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-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-button:hover {
  fill: var(--ui-2-fg);
}
#sidebar.static .sidebar-button, .sidebar-button.disabled {
  fill: #aaa;
  cursor: not-allowed;
}
#new-icon {
  grid-area: row1-icon;
}
#documents-icon {
  grid-area: row2-icon;
}
#documents-icon.open {
  background: var(--background-sidebar-menu);
  margin-left: 4px;
}
#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;
}
#document-switcher-icon {
  grid-area: row3-icon;
}
#help-icon {
  grid-area: bott-row1;
}
#notifications-icon {
  grid-area: bott-row2;
}
#account-icon {
  grid-area: bott-row3;
}

.sidebar-menu {
  background: var(--background-sidebar-menu);
  color: var(--ui-1-fg);
}
.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;
  left: 40px;
  bottom: 15px;
  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;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

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

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

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

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
      -webkit-transform: scale(1.0);
      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);
}

#document-header {
  grid-area: document-header;
  display: grid;
  grid-template-columns: 15px max-content 1fr 40px 40px 40px;
  grid-template-rows: 40px min-content;
  grid-template-areas:
    ". title doc-header-center button1 button2 button3"
    "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);
}

#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;
  user-select: none;
  font-size: 12px;
  font-family: sans-serif;
  color: var(--ui-4-fg);
  mix-blend-mode: hard-light;
  margin-left: 6px;
  margin-top: 4px;
}

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

#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 182px 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: 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;
  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: 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;
}

#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: 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;
}

.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: 1;
}

#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;
}
#fullscreen-buttons > * {
  margin: 24px 0;
  cursor: pointer;
}
#fullscreen-buttons #save-indicator {
  margin: 0;
  position: absolute;
  right: 0;
  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 textarea.edit, .card-fullscreen::before {
  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::before {
  content: attr(data-cloned-content) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.card-fullscreen.active-fullscreen 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;
  top: 5px;
  right: 5px;
  color: hsl(208, 56%, 30%);
  font-size: 80%;
}

.card.collab-active {
  border: none;
  border-left: 4px solid #428bca;
}

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

.card.active.collab-active {
  border: none;
  border-left: 4px solid #6aab7e;
}
/* === 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: 3;
  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;
}
@-webkit-keyframes makeItRain {
  from {opacity: 0;}
  50% {opacity: 1;}
  to {-webkit-transform: translateY(350px);}
}

/* === 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;
}

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 0px;
  border: var(--edit-border);
  border-radius: inherit;
  background: var(--edit-bg, url('./handmadepaper.png'));
  box-shadow: var(--edit-boxshadow);
}

.group.has-active .card.editing textarea, .card.editing::before {
  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.editing::before {
  content: attr(data-cloned-content) " ";
  white-space: pre-wrap;
  word-break: break-word;
  visibility: hidden;
}

.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;
  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: min-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;
  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;
}

#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;
  }
}