/* al dente light theme with colors from my warmth theme. trying to combine the two */
/* https://github.com/chad-bennett/al-dente-obsidian-theme */
/* by chad bennett | chad.bennett@live.com */

:root {
  --color-dark: #3f3e3c;
  --color-gray: #696966;
  --color-gray-light: #b6b5af;
  --color-gray-lightest: #87837070;
  --color-gray-lightest-fade: #8783703b;
  --color-light: #f6f6f4;
  --color-blue: #117a8b;
  --color-blue-light: #17a2b8;
  --color-blue-lightest: #8bd1dc60;
  --color-purple: #886b97;
  --color-purple-light: #b19fb6;
  --color-purple-lightest: #e1d6e2;
  --color-green: #92a85b;
  --color-green-light: #b0c57a;
  --color-green-lightest: #d6dba4ba;
  --color-red: #d62c1a;
  --color-red-light: #e74c3c;
  --color-red-lightest: #f3a69e;
  --color-yellow: #fcbb42;
  --color-yellow-light: #ffce54;
  --color-yellow-lightest: #f9dda2c0;
  --color-orange: #e9573f;
  --color-orange-light: #fc6e51;
  --color-accent: #e9573f;
  --color-accent-faded: #fc6e51;
  --shadow: 1px 1px 2px #88888888;
  --font-family-editor: prologue, gotham, metropolis, manrope, inter, poppins,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Microsoft YaHei Light", sans-serif;
  --font-monospace: "courier prime code" !important;
  --font-title: "moranga", "matchbook regular", bitter, prompt,
    var(--font-family-editor);

  --color-front: var(--color-dark);
  --color-back: var(--color-light);
  --color-off: var(--color-gray-light);
  --background-nav-alt: var(--color-light);
  --background-nav: var(--color-light);
  --background-primary-alt: var(--color-light);
  --background-primary: var(--color-light);
  --background-secondary-alt: var(--color-light);
  --background-secondary: var(--color-light);
  --code-block-background: #fff;
  --code-block-border: var(--color-gray-light);
  --interactive-accent-hover: var(--color-accent);
  --interactive-accent-rgb: var(--color-accent);
  --interactive-accent: var(--color-accent);
  --list-color: var(--color-accent);
  --text-accent-hover: var(--color-blue-accent);
  --text-accent: var(--color-accent);
  --text-faint: var(--color-gray-light);
  --text-highlight-bg: var(--color-green-lightest);
  --text-nav-selected: var(--color-dark);
  --text-nav: var(--color-dark);
  --text-normal: var(--color-dark);
  --text-selection: var(--color-purple-lightest);

  --color-accent: var(--color-blue-light);
  --color-accent-faded: var(--color-blue-lightest);
  --color-blue-accent: var(--color-blue);
  --color-blue-accent-faded: var(--color-blue-lightest);
}

/* antialiasing for non-retina */
* {
  -webkit-font-smoothing: subpixel-antialiased !important;
}

html {
  scroll-behavior: smooth;
}

/* fix top titlebar */
.titlebar {
  z-index: 1000;
}

/* use some other fonts for the body, too */
body {
  font-family: var(--font-family-editor);
  font-size: 16px;
  line-height: 1.6rem;
  font-weight: 400;
  background-image: radial-gradient(
      circle at 12.17% 41.13%,
      #f7f6f0,
      transparent 100%
    ),
    radial-gradient(circle at 88.72% 61.69%, #ebe6de, transparent 100%),
    radial-gradient(circle at 50% 50%, #e1e0da, #e9e8e6 100%);
  background-attachment: fixed;
  background-size: cover;
}

/* here's the hack to hide unnecessary top borders */
.horizontal-main-container {
  border-top: none;
  margin-top: -2px;
}

/* Obsidian UI colors */
.checkbox-container {
  background-color: var(--color-off);
}

/* the sometimes appearing very thin scrollbar */
.CodeMirror-sizer {
  background-color: var(--color-back);
}

/* cursor color */
.CodeMirror-cursor {
  border-color: var(--color-accent) !important;
  border-left-width: 0.125em;
}

/* the mighty graph, hardcoded colors. make you nothing, eh */
.theme-dark .graph-view.color-fill {
  color: #f7f7f7;
}

.theme-light .graph-view.color-fill {
  color: #1a1a1a;
}

.theme-dark .graph-view.color-circle {
  color: var(--color-accent);
}

.theme-light .graph-view.color-line {
  color: var(--color-off);
}

.theme-dark .graph-view.color-text {
  color: var(--color-dark);
}

.theme-light .graph-view.color-text {
  color: var(--color-dark);
}

.theme-dark .graph-view.color-fill-highlight,
.theme-light .graph-view.color-fill-highlight {
  color: var(--text-highlight-bg);
}

.theme-dark .graph-view.color-line-highlight {
  color: #f7f7f7;
}

.theme-light .graph-view.color-line-highlight {
  color: var(--text-highlight-bg);
}

/* colors */
.side-dock-ribbon-tab.is-active {
  background-color: var(--background-secondary);
  color: var(--color-accent);
}

.workspace-ribbon.is-collapsed {
  background: var(--background-primary);
}

.modal.mod-settings .vertical-tab-content-container {
  background: var(--background-primary) !important;
}

/* paddings and margins for the side dock */
.side-dock-collapsible-section-header {
  padding: 0 5px 0 0.8rem !important;
  font-size: 16px;
  font-weight: 700;
}

/* indicator */
.side-dock-collapsible-section-header-indicator {
  left: -5px;
  top: -1px;
}

/* Top left "File explorer" text */
.side-dock-title {
  color: var(--text-nav);
}

/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
  white-space: normal;
  padding: 0 10px;
  border-radius: 0.3rem;
  padding-left: 1rem;
}

/* padding and border for the navigation pane header */
.nav-header {
  padding: 10px 15px 0 13px;
  margin-bottom: 0;
}

/* style the nav folder title */
.mod-root > .nav-folder-title {
  padding: 10px 0;
}

/* Indent wrapped nav text */
.nav-file-title-content {
  margin-left: 10px;
  text-indent: -10px;
}

/* other nav file paddings and margins */
.nav-file-title-content,
.nav-folder-title-content {
  border: 0;
  padding: 5px 2px;
}

.nav-action-button {
  height: 2rem;
}

/* position indicators */
.nav-folder-collapse-indicator {
  left: 4px;
  top: 5px;
}

.is-collapsed .nav-folder-collapse-indicator {
  left: 0.4rem;
  top: 5px;
}

/* Horizontal rule between Icons and vault in left nav; paddings, too! */
.nav-buttons-container {
  border-bottom: 1px solid var(--color-off);
  padding: 5px;
  margin: 0;
}

/* so that the nav files container doesn't touch the top */
.nav-files-container {
  padding-top: 0.8rem;
  padding-right: 0.6rem;
}

/* related: the items list */
.item-list {
  padding: 10px 0 0 0;
}

/* Just above the folder tree, the name of the vault */
.nav-folder.mod-root > .nav-file-title,
.nav-folder.mod-root > .nav-folder-title {
  color: var(--text-nav);
}

/* Color of left nav tree text */
.nav-file-title,
.nav-folder-title {
  color: var(--text-nav);
  line-height: 15px;
  margin-left: 10px;
}

/* Set the left nav background to same color as ribbon so we can make a curved corner that matches */
.side-dock-panels-container {
  background-color: var(--background-nav-alt);
}

/* Set the left nav background to different color from ribbon, and give a curved corner with statusbar */
.side-dock.mod-left .side-dock-plugin-panel {
  background-color: var(--background-nav);
  border-bottom-left-radius: 10px;
}

/* Set the right nav background to different color from ribbon, and give a curved corner with statusbar */
.side-dock.mod-right .side-dock-plugin-panel {
  background-color: var(--background-nav);
  border-bottom-right-radius: 10px;
}

/* Left nav ribbon background color */
.side-dock-ribbon {
  background-color: var(--background-nav-alt);
}

/* Left nav ribbon background-color */
.side-dock-ribbon-before.is-before-active,
.side-dock-ribbon-after.is-after-active,
.side-dock-ribbon-tab.is-before-active,
.side-dock-ribbon-tab.is-after-active {
  background-color: var(--background-nav);
}

/* Left nav ribbon background-color */
.side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner,
.side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner {
  background-color: var(--background-nav-alt);
}

/* Left nav ribbon active background-color */
.side-dock-ribbon-tab.is-active {
  background-color: var(--background-nav);
}

/* nav icon cover hover color */
.side-dock-ribbon-tab.is-active:hover,
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.view-header-icon:hover,
.nav-action-button:hover,
.view-action:hover,
.view-action.is-active {
  color: var(--color-blue);
}

.nav-action-button.is-active {
  color: var(--color-light);
}

/* Background and text color of selected item in left nav tree */
.nav-file.is-active > .nav-file-title,
.nav-file.is-active > .nav-folder-title,
.nav-file.is-active > .nav-folder-collapse-indicator,
.nav-folder.is-active > .nav-file-title,
.nav-folder.is-active > .nav-folder-title,
.nav-folder.is-active > .nav-folder-collapse-indicator {
  background-color: var(--color-accent-faded);
  color: var(--color-dark);
  border-radius: 4px;
}

/* Background and text color of selected item in left nav tree - when hovering */
.nav-file.is-active > .nav-file-title:hover,
.nav-file.is-active > .nav-folder-title:hover,
.nav-file.is-active > .nav-folder-collapse-indicator:hover,
.nav-folder.is-active > .nav-file-title:hover,
.nav-folder.is-active > .nav-folder-title:hover,
.nav-folder.is-active > .nav-folder-collapse-indicator:hover {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* outline background and text color when hovering */

.pane-clickable-item:hover {
  background-color: var(--color-accent-faded);
  color: var(--color-dark);
  border-radius: 4px;
}

/* Background and text color of hovered item in left nav tree */
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background-color: var(--color-accent-faded);
  color: var(--text-nav-selected);
}

/* Background and text color of hovered collapse indicator in left nav tree */
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  background-color: transparent;
  color: var(--text-nav-selected);
}

/* Left Nav menu item - hover background color, active menu item title */
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover,
.nav-file-title.is-active {
  background-color: var(--color-accent-faded);
}

/* outline view */
.collapsible-item-inner {
  padding: 0 10px;
  border-radius: 0.3rem;
}

.collapsible-item-inner:hover {
  background-color: var(--color-accent-faded);
}

/* Left Nav menu item - hover background color of the collapse/expand arrow */
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  background-color: transparent;
}

/* Left side dock */
.side-dock.mod-left {
  border-right: 1px solid var(--background-secondary-border);
}

/* header border colors including active panel */
.workspace-split .workspace-leaf.mod-active .view-header {
  border-bottom-color: var(--color-accent) !important;
  border-width: 1px !important;
  border-top: 1px solid var(--color-off);
  background: var(--color-back);
}

.workspace-leaf.mod-active .view-header-title-container:after {
  background: transparent;
}

.workspace-split .workspace-leaf .view-header,
.workspace-split .workspace-leaf:only-of-type .view-header {
  border-bottom-color: var(--color-off) !important;
}

.mod-horizontal .view-header,
.mod-vertical .view-header {
  border-top: 1px solid var(--color-off);
  border-bottom-width: 1px;
  height: 2.25em;
}

/* padding in front of title */
.view-header-title-container {
  padding-left: 0;
}

/* Font adjustments for pane headers */
.view-header-title {
  font-size: 16px;
  font-weight: 600;
}

/* items for the editor */
.view-actions {
  padding: 4px 0;
}

.menu {
  z-index: 200;
}

/* Status bar ... duh? :) */
.status-bar {
  background-color: var(--background-nav-alt);
  border-top: 1px solid var(--color-off);
  color: var(--text-nav);
  margin-top: -1px;
}

/* right side panel spacing */
.backlink-pane {
  padding-left: 0.8rem;
  padding-top: 1rem;
}

/* Context menu hover item */
.menu-item:hover {
  background-color: var(--background-secondary-alt);
  color: var(--color-accent);
}

/* Font for the markdown source panel */
div.markdown-source-view {
  font-family: var(--font-family-editor);
}

/* Font for the markdown preview panel */
div.markdown-preview-view {
  font-family: var(--font-family-editor);
}

/* Enable wrapping of code blocks in the preview panel */
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"] {
  white-space: pre-wrap;
  background-color: var(--color-light);
}

/* Changing color of the header hashtags ## */
.cm-formatting-header {
  color: var(--color-accent);
  /* font-size: 0.6em; */
}

/* actual header sizes, plain text edition */
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-1,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-2,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-3,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-4,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-5,
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-6 {
  font-size: inherit;
  padding-bottom: 0;
  color: var(--color-blue-accent);
}

/* actual header paddings, preview edition */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-preview-view p,
.markdown-preview-view ul,
.markdown-preview-view ol {
  margin-bottom: 1.8rem;
  margin-top: 0;
}

/* title font styling */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--font-title);
}

.markdown-preview-view ul ul {
  margin-bottom: 0 !important;
}

/* no header margin itself for the editor */
.CodeMirror {
  padding-top: 0;
}

/* header margin for text */
.cm-s-obsidian .CodeMirror-code {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Coloring the list bullets/numbers */
.cm-s-obsidian span.cm-formatting-list {
  color: var(--color-accent);
  font-size: 0.85em;
  font-weight: 500;
  font-family: var(--font-monospace);
}

/* Editor view - task list, color and veritcal align */
.cm-s-obsidian span.cm-formatting-task {
  color: var(--color-accent);
  font-size: 0.85em;
  font-weight: 500;
  position: relative;
  top: -0.12em;
}

/* Preview Checkboxes don't seem to align correctly */
.markdown-preview-view .task-list-item-checkbox {
  width: 15px;
  height: 15px;
  position: relative;
  top: 0.35rem;
  filter: hue-rotate(0deg);
}

/* adjust spacing on indented task list items*/
.markdown-preview-view .task-list-item ul {
  margin-bottom: 0;
  margin-left: 1rem;
}

/* Preview code block background */
.markdown-preview-view pre {
  padding: 1em;
  background-color: var(--code-block-background);
  border-radius: 4px;
  white-space: pre-wrap;
  box-shadow: inset var(--shadow);
}

.markdown-preview-view code {
  background-color: var(--code-block-background) !important;
  color: var(--color-red);
}

/* blockquote coloring */
.cm-s-obsidian span.cm-formatting {
  color: var(--color-accent) !important;
}

.cm-s-obsidian span.cm-quote {
  color: var(--color-front);
}

/* hashtag coloring and decoration */
.cm-s-obsidian span.cm-hashtag {
  text-decoration: none;
}

.cm-s-obsidian span.cm-hashtag-end {
  color: var(--color-accent);
  text-decoration: underline;
}

/* link coloring and decoration */
.cm-s-obsidian span.cm-url {
  color: var(--color-accent);
}

/* Code block border color */
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top: 0px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Code block border color */
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  border-bottom: 0px solid transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Code block background color */
.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: var(--code-block-background);
}

/* Code block left and right padding */
.cm-s-obsidian pre.HyperMD-codeblock {
  padding: 0px 10px 0px 10px;
}

/* Code block top padding */
.cm-s-obsidian pre.HyperMD-codeblock-begin {
  padding-top: 10px;
}

/* Code block bottom padding */
.cm-s-obsidian pre.HyperMD-codeblock-end {
  padding-top: 10px;
}

/* Code block left and right border colors */
.cm-s-obsidian div.HyperMD-codeblock-bg {
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
}

.cm-s-obsidian span.cm-inline-code,
.cm-s-obsidian
  span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight),
.cm-s-obsidian pre.HyperMD-codeblock {
  background-color: var(--code-block-background);
  color: var(--color-red);
}

/* Color links */
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-hmd-internal-link {
  color: var(--color-accent);
}

/* Add a tiny bit of color and padding to the link brackets and parenthesis */
.cm-s-obsidian span.cm-formatting-link,
.cm-s-obsidian span.cm-formatting-link-string {
  color: var(--color-blue-accent);
  padding: 0 1px 0 1px;
  /* font-weight: 500; */
}

.cm-s-obsidian span.cm-formatting {
  color: var(--color-blue-accent) !important;
}

/* Set background of code panes to pure white since main background is off-white */
.markdown-preview-view code {
  background-color: rgba(0, 0, 0, 0);
  bottom: 0px;
}

/* Additional left/right padding for tag pane so hover background has some room */
.tag-pane-tag {
  padding: 0.3rem;
  font-size: 0.8rem;
}

/* count box tweak to vertically center */
.tag-pane-tag-count {
  top: 10px;
}

/* color the tags in the tag pane */
.tag-pane-tag {
  color: var(--color-front);
}

/* Color the hover background like we do the selected left nav */
.tag-pane-tag:hover {
  background-color: var(--color-accent-faded);
}

/* Style the tag pane tag count with the bear red coloring used in selected item from left nav */
.tag-pane-tag-count {
  background-color: var(--color-accent-faded);
  color: var(--color-dark);
}

/* _hyphenation_and_justification      */
/*-------------------------------------*/

.markdown-preview-view p {
  text-align: left;
  hyphens: auto;
}
/* search box tweaks */
input[type="text"] {
  border: 0 solid var(--background-modifier-border);
  margin-top: 1rem;
}

/* search results are waayyy to big */
.search-result-file-matches {
  margin-bottom: 5px;
}

.search-result-file-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2rem;
  padding-left: 1.4rem !important;
  padding-right: 1.2rem !important;
}

.search-result-file-match {
  font-size: 12px;
}

.search-result-file-title,
.search-result-file-match {
  padding: 0;
}

.search-result-container {
  padding: 10px 5px;
}

.search-result-container.mod-global-search {
  padding: 10px 15px 15px 15px;
}

.search-result-container.mod-global-search .search-result {
  padding-bottom: 10px;
}

.search-empty-state {
  font-size: 12px;
  margin: -10px 5px 15px 5px;
}

/* Backlinks title match hover */
.search-result-file-title:hover {
  background-color: var(--background-nav-alt);
}

/* Backlinks content match hover */
.search-result-file-match:hover {
  background-color: var(--background-nav-alt);
}

/* Backlink titles for matches */
.search-result-file-title {
  color: var(--text-nav);
}

/* Backlink highlighted [[links]] */
.search-result-file-matched-text {
  color: var(--color-dark);
  background-color: var(--color-accent-faded);
  padding: 2px;
  border-radius: 4px;
}

.tag-pane-empty {
  margin: 0;
  font-size: 12px;
}

/* collaps thingies */
.workspace-ribbon-collapse-btn {
  margin-top: 5px;
}

/* workspace tabs */
.workspace-tabs {
  padding-right: 0;
  border-bottom: 1px solid var(--color-off);
}

/* workspace leafs and splits */
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-leaf {
  padding-right: 0 !important;
}

/* make that "padding" in tab headers smaller */
.workspace-tab-container-before,
.workspace-tab-container-after {
  width: 10px;
}

/* smaller paddings for tab header icons */
.workspace-tab-header-inner {
  padding: 5px 10px 5px 5px;
}

/* icons for the tab headers */
.workspace-tab-header.is-active {
  color: var(--color-bluet);
}

.workspace-tab-header.is-active:hover,
.workspace-tab-header:hover,
.workspace-tab-header:hover,
.workspace-ribbon-collapse-btn:hover {
  color: var(--color-blue);
}

/* workspace ribbons */
.workspace-ribbon.mod-left {
  border-right: 1px solid var(--color-off);
}

.workspace-ribbon.mod-right {
  border-left: 1px solid var(--color-off);
}

.workspace-leaf-resize-handle {
  border-right: 1px solid var(--color-off);
  width: 0 !important;
  background: transparent !important;
}

/* workspace headers */
.workspace-tab-header-container,
.workspace-split.mod-root
  > .workspace-leaf:first-of-type:last-of-type
  .view-header,
.workspace-split.mod-root
  > .workspace-leaf:first-of-type:last-of-type.mod-active
  .view-header-title-container:after {
  border-bottom: 1px solid var(--color-off);
  height: 2.25em;
}

.workspace-split.mod-root
  > .workspace-leaf:first-of-type:last-of-type.mod-active
  .view-header-title-container:after {
  height: calc(2.25em - 2px);
  border-color: var(--color-off);
}

/* boh selectah */
.suggestion-item.is-selected {
  background-color: var(--color-accent-faded);
  color: inherit;
}

/* nothing to see here: empty states */
.empty-state-title {
  font-size: 16px;
  font-weight: normal;
}

.empty-state-action {
  font-size: 14px;
  line-height: 25px;
}

/* my extra tweaks */

/* bolder text */
.cm-s-obsidian .cm-header,
.cm-s-obsidian .cm-strong {
  font-weight: 700;
  color: var(--color-blue-accent);
}

.cm-s-obsidian .cm-header {
  font-family: var(--font-title);
}

/* bigger headers */
.cm-s-obsidian pre.HyperMD-header.HyperMD-header-1 {
  font-size: 2rem;
}

.cm-s-obsidian pre.HyperMD-header.HyperMD-header-2 {
  font-size: 1.5rem;
}

/* better links */
.markdown-preview-view a {
  color: var(--color-accent) !important;
  background: transparent !important;
  transition: background 0.3s, color 0.3s;
  padding: 0.2rem;
  border-radius: 0.3rem;
}

.markdown-preview-view a:hover {
  color: var(--color-dark) !important;
  background: var(--color-accent-faded) !important;
  text-decoration: none;
}

/* horizontal rules */
.markdown-preview-view hr {
  height: 1px;
  border: none;
  background-color: var(--color-off);
  margin: 2rem;
}

/* hashtag coloring and decoration */
.cm-s-obsidian span.cm-hashtag {
  color: var(--color-dark) !important;
  background: var(--color-accent-faded) !important;
  font-size: 1rem;
  border-radius: 0.3rem;
  padding: 0.4rem;
  padding-top: 0.1rem;
  display: inline-block;
  text-decoration: none !important;
  transition: color 0.4s, background 0.4s;
  height: 1.6rem;
}

.cm-s-obsidian span.cm-hashtag:before {
  content: "#";
  padding-right: 0.1rem;
}

.cm-s-obsidian span.cm-hashtag-begin {
  display: none;
  /*
	border-radius: .3rem 0 0 .3rem;
	font-size: 1rem;
	padding: .4rem;
	padding-top: .1rem;
	padding-right: .1rem;
	position: relative;
	top: 1px;
	*/
}

/* fixes spacing on multi-line links */
a {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* tag styling*/
a.tag {
  color: var(--color-dark) !important;
  background: var(--color-accent-faded) !important;
  font-size: 1rem;
  border-radius: 0.4rem;
  padding: 0.2rem;
  display: inline-block;
  text-decoration: none !important;
  line-height: normal;
  transition: color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
}

a.tag:hover {
  color: var(--color-light) !important;
  background: var(--color-accent) !important;
  box-shadow: var(--shadow);
  transform: scale(1.1);
}

/* show brackets for internal links in preview */
.internal-link::before {
  content: "«";
  color: var(--color-accent);
  opacity: 0.6;
  position: relative;
  bottom: 0;
  text-decoration: none !important;
}

.internal-link::after {
  content: "»";
  color: var(--color-accent);
  opacity: 0.6;
  position: relative;
  bottom: 0;
  text-decoration: none !important;
}

/* external links in preview */
.external-link::after {
  font-size: 0.7rem;
  content: "↗";
  color: var(--color-accent);
  opacity: 0.6;
  position: relative;
  bottom: 0;
  text-decoration: none !important;
}

/* blockquotes */

.markdown-preview-view blockquote {
  border-radius: 0.3rem;
  padding: 2rem;
  margin: 2rem;
  border: none;
  background: var(--color-gray-lightest-fade);
  box-shadow: var(--shadow);
  line-height: 1.4rem;
}

blockquote p > br {
  content: " " !important;
  display: block !important;
  margin-bottom: 1rem !important;
}

/* highlights */
.cm-s-obsidian span.cm-highlight {
  padding: 0.2rem 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.markdown-preview-view mark {
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* better checkboxes */

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  padding: 0;
}

input[type="checkbox"]:focus {
  outline: 0;
}

input[type="checkbox"]:checked {
  background-color: var(--text-accent-hover) !important;
  border: 1px solid var(--text-accent-hover) !important;
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

/* autofade note controls */

.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity 0.25s ease-in-out;
}

/* auto fades status bar items */

.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity 0.25s ease-in-out;
}

/* bolder folder title on left sidebar */
.nav-folder.mod-root > .nav-file-title,
.nav-folder.mod-root > .nav-folder-title {
  font-size: 1.5rem;
  font-weight: 600;
}

/* table formatting */

.markdown-preview-view table {
  background: var(--color-light);
  margin: 2rem auto;
  min-width: 80%;
  max-width: 100%;
}

.markdown-preview-view th,
.markdown-preview-view td {
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--color-dark);
}

.markdown-preview-view th {
  background: var(--color-gray-light);
  text-align: left;
}

.markdown-preview-view tr:nth-child(even) {
  background-color: var(--color-gray-light);
}

/* _hyphenation_and_justification     
.cm-s-obsidian,
.markdown-preview-view {
  text-align: justify;
  hyphens: auto;
} */

/* bigger link popup preview */
.popover.hover-popover {
  background-color: var(--code-block-background);
  border-radius: 1rem;
  transform: scale(0.8); /* makes the content smaller */
  max-height: 600px; /* was 300 */
  min-height: 100px;
  width: 500px; /* was 400 */
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* get rid of little fade at bottom of preview */
.popover.hover-popover:after {
  background: none;
}

/* bigger image preview with click */
.markdown-preview-view .internal-embed img {
  cursor: zoom-in;
}

.markdown-preview-view .internal-embed img:active {
  cursor: zoom-out;
  display: block;
  z-index: 100;
  position: fixed;
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
}

/* turn --- to full line in editor */

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr {
  color: transparent;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: var(--color-blue-accent-faded);
  left: 0;
  top: 50%;
}

/* Turn -lists into bullets as you type*/
span.cm-formatting-list-ul {
  visibility: hidden !important;
}

span.cm-formatting-list-ul:before {
  content: "•";
  font-size: 1.2rem;
  visibility: visible !important;
  margin-right: -0.6rem;
  margin-left: 1rem;
}

/* calendar tweaks */
#calendar-container {
  overflow-x: scroll;
}

.active.svelte-xik4h1.svelte-xik4h1,
.active.today.svelte-xik4h1.svelte-xik4h1 {
  background-color: var(--color-accent-faded);
}

/* andy mode sliding panels tweaks and side panel shadows */
.plugin-sliding-panes-stacking .workspace > .mod-root > .workspace-leaf {
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2),
    0px 0px 4px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.2),
    0px 0px 16px rgba(0, 0, 0, 0.2) !important;
}
.app-container.is-left-sidedock-collapsed .workspace-split.mod-left-split {
  box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.05), 2px 0px 2px rgba(0, 0, 0, 0.05),
    4px 0px 4px rgba(0, 0, 0, 0.05), 8px 0px 8px rgba(0, 0, 0, 0.05),
    16px 0px 16px rgba(0, 0, 0, 0.05) !important;
  z-index: 50;
  border-right: 0.5px solid #888;
}
.workspace-leaf-resize-handle {
  border-right: 2px solid transparent;
}

.app-container.is-right-sidedock-collapsed .workspace-split.mod-right-split {
  box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.05), -2px 0px 2px rgba(0, 0, 0, 0.05),
    -4px 0px 4px rgba(0, 0, 0, 0.05), -8px 0px 8px rgba(0, 0, 0, 0.05),
    -16px 0px 16px rgba(0, 0, 0, 0.05) !important;
  z-index: 50;
  border-left: 0.5px solid #888;
}

.plugin-sliding-panes-rotate-header
  .workspace
  > .mod-root
  > .workspace-leaf
  > .workspace-leaf-content
  > .view-header {
  border-left: 0px solid transparent;
  border-right: 1px solid var(--color-front);
  border-left: 1px solid var(--color-front);
  border-top: none;
  border-bottom: none;
  background: var(--color-back);
}