/* Theme for wonderful [Obsidian](https://obsidian.md/) app. I would be glad if someone will like and use it.

I’m not sure if I have the right to give this theme any unique name, since I don’t know CSS and glued this theme out of the three themes I like most:

- Obsidian dark rmx by _ph: https://github.com/cannibalox/Obsdn-dark-rmx/releases (used as a starter kit)
- Obsidian Red Graphite by Seanwcom: https://github.com/seanwcom/Red-Graphite-for-Obsidian (left panel styling and colors)
- Cybertron by Nick Milo: https://github.com/nickmilo/Cybertron (colors for graph in dark theme)
- Typora Pie by kevinzhao2233: https://github.com/kevinzhao2233/typora-theme-pie (look of quotes)

Initially, I wanted to adapt the Pie theme, which I often used in Typora, but in the end the themes listed above were so good that I could not choose any one.

Since version 0.9.2 I am already making independent changes without following the changes in the listed themes (but if someone else inspires me very much with their design, or friends ask me to add some specific design in terms of functions that I do not use  - for example, transparency of windows - I will indicate this in the changelog): https://github.com/ryjjin/Obsidian-Dark-Graphite-Pie-theme */


body {
  font-size: 13px;
  font-family: Source Code Pro, Fira Code, monospace;
  --font-monospace: Source Code Pro, Fira Code, monospace;
}
.CodeMirror pre.CodeMirror-line {
  font-size: 13px;
  font-family: Source Code Pro, Fira Code, monospace;
}

/* ======= DARK ==============*/

.theme-dark {
  --background-primary: #212121;
  --background-modifier-border: #303030;
  --background-primary-alt: #171717;
  --background-secondary: #212121;
  --background-secondary-alt: #000000;
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.85);
  --background-nav-alt: rgb(58, 62, 63);
  --background-nav-file-tag: rgb(116, 190, 247);
  --background-nav-selected:  #3e93d8;
  --background-nav: rgb(41, 44, 46);
  --text-accent: #3e93d8;
  --text-accent-hover: #2b60af;
  --text-normal: #dcddde;
  --text-muted: #999;
  --text-faint: #666;
  --text-error: #ff3333;
  --text-error-hover: #990000;
  --text-matched: #0cf32b;
  --text-on-accent: #dcddde;
  --text-selection: rgba(6, 66, 113, 0.99);
  --text-highlight-bg: rgba(26, 73, 100, 0.66);
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --interactive-normal: #2a2a2a;
  --interactive-hover: #303030;
  --interactive-accent: rgb(32, 171, 233);
  --interactive-accent-rgb: 32, 171, 233;
  --interactive-accent-hover: #1da3d6;
  --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
  --scrollbar-bg: rgba(255, 255, 255, 0);
  --scrollbar-thumb-bg: rgba(81, 144, 175, 0.36);
  --accent-strong: #3e93d8;
  --accent-mild: #3e93d8;
  --bw: #ffffff;
  --graph-circle:#fcf601;
  --graph-line: #26798c;
  --graph-bg: rgb(22, 22, 22);
  --graph-text:#cccccc;
  --graphtag: #5dbcd2;
  --graph-attach: #d669bc;
  --graph-unresolved: #9e8aff;
}

/* ======= LIGHT==============*/

.theme-light {
  --background-primary: #ffffff;
  --background-primary-alt: #f0f2f5;
  --background-secondary: rgb(57, 63, 63);;
  --background-secondary-alt: rgb(41, 44, 46);
  --background-accent: #fff;
  --background-modifier-border: #ddd;
  --background-modifier-form-field: #fff;
  --background-modifier-form-field-highlighted: #fff;
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-success: #a4e7c3;
  --background-modifier-error: #e68787;
  --background-modifier-error-rgb: 230, 135, 135;
  --background-modifier-error-hover: #ff9494;
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --background-nav-alt: rgb(58, 62, 63);
  --background-nav-file-tag: rgb(203, 77, 73);
  --background-nav-selected: rgb(203, 77, 73);
  --background-nav: rgb(41, 44, 46);
  --text-accent: rgb(203, 77, 73);
  --text-accent-hover: rgb(203, 77, 73);
  --text-normal: #2e3338;
  --text-muted: rgb(143, 147, 143);
  --text-faint: #999999;
  --text-error: #ce2222;
  --text-error-hover: #cb2c22;
  --text-highlight-bg: rgba(240, 255, 82, 0.76);
  --text-selection: rgba(134, 202, 255, 0.99);
  --text-on-accent: #f2f2f2;
  --text-matched: #000000;
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --interactive-normal: #f2f3f5;
  --interactive-hover: #e9e9e9;
  --interactive-accent: rgb(34, 182, 226);
  --interactive-accent-rgb: 34, 182, 226;
  --interactive-accent-hover: #1da3d6;
  --scrollbar-active-thumb-bg: rgb(97, 170, 221);
  --scrollbar-bg: rgba(0, 0, 0, 0);
  --scrollbar-thumb-bg: rgb(0, 0, 0);
  --accent-strong: #ff3333;
  --accent-mild: #e0a330;
  --bw: #000000;
  --graph-circle:#ec0c0c;
  --graph-line: #cccccc;
  --graph-bg: rgb(255, 255, 255);
  --graph-text:#969696;
  --graphtag: #b9ec41;
  --graph-attach: #83D4F4;
  --graph-unresolved: rgb(143, 147, 143);
}





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

/* Coloring the list bullets/numbers */
.cm-s-obsidian span.cm-formatting-list {
  color: var(--text-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(--text-accent);
  font-size: 0.85em;
  font-weight: 500;
  position: relative;
  top: -0.12em;
  padding: 0px 1px;
}

/* Editor view - gorizontal align */
.cm-s-obsidian span.cm-list-1 {
  padding: 0px 1px;
}

.CodeMirror .cm-math {
  color: var(--text-accent);
}

/* color of inline code */
.cm-s-obsidian span.cm-inline-code {
  color: var(--text-accent);
  text-align: left;
}

/* code block remove shadow */

.theme-dark code[class*="language-"],
.theme-dark pre[class*="language-"],
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"] {
  background: var(--background-primary-alt);
  text-shadow: 0px 0px white;
  font-family: var(--font-monospace);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
}

/* color and border of inline code (between the ticks) */
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code),
.markdown-preview-section code {
  background-color: var(--background-inline-code);
  border: 0px solid var(--border-inline-code);
  padding: 4px 4px;
  font-weight: 600;
  color: var(--text-accent);
}

/* code block:remove white bg on operators */

.theme-light .token.operator {
  background: hsla(0, 0%, 100%, 0);
}

/* 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(--background-nav-selected);
  color: var(--text-nav-selected);
}

/* 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(--text-accent);
  color: var(--text-nav-selected);
}

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

/* 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(--background-secondary-alt);
  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: var(--background-secondary-alt);
  color: var(--text-nav-selected);
}

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

/* 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: var(--background-nav-alt);
}

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

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

.workspace-leaf.mod-active .view-header-title {
  color: var(--text-muted);
}

.vertical-tabs-container {
  color: var(--text-muted); 
}

div.setting-item-name {
  color: var(--text-faint); 
}


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

/* ====== Tag Pills ======== */

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white !important;
  font-size: 11px;
  line-height: 1.6em;
  padding: 0px 7px 1px 7px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 0px 4px;
  cursor: pointer;
  border-radius: 14px;
}

.tag:hover {
  color: white;
  background-color: var(--text-accent-hover);
}

.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}

.tag[href^="#important"] {
  background-color: red;
}


.tag[href^="#complete"] {
  background-color: green;
}

.tag[href^="#inprogress"] {
  background-color: orange;
}

.tag[href^="#daily_notes"] {
  background-color: #4d3ca6;
}

.tag[href^="#tasklist"] {
  background-color: #4d3ca6;
}

.tag[href^="#TIER1"] {
  background-color: red;
}

.tag[href^="#TIER2"] {
  background-color: orange;
}

.tag[href^="#TIER3"] {
  background-color: green;
}

.tag[href^="#DISQUALIFIED"] {
  background-color: gray;
}

/*=== trace indentation lines by death_au === */

.cm-hmd-list-indent .cm-tab,
ul ul {
  position: relative;
}

.cm-hmd-list-indent .cm-tab::before,
ul ul::before {
  content: "";
  border-left: 2px solid var(--background-modifier-border);  /*rgba(20,122,255,0.3);*/
  position: absolute;
}

.cm-hmd-list-indent .cm-tab::before {
  left: 0;
  top: -5px;
  bottom: -4px;
}

ul ul::before {
  left: -15px;
  top: 0;
  bottom: 0;
}

/*==============TRANSCLUSION TWEAKS=============*/



/* ==========headings=======*/
.markdown-preview-view h1 {
  font-size: 34px;
  line-height: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--text-accent);
}
.markdown-preview-view h2 {
  font-size: 26px;
  line-height: 36px;
  padding-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--text-faint);
}

/* ==========hr======*/
.markdown-preview-view hr {
  height: 1px;
  border: none;
  background-color: var(--text-accent);
}

/* ===========================*/
/* ====== GUI tweaks =========*/
/* ===========================*/

/* ===== snappier animations ==== */

.workspace-tab-header,
.workspace-tab-header-inner,
.workspace-tab-container-before,
.workspace-tab-container-after {
  transition: background-color 80ms linear;
}

/* =====  ribbon vertical =========*/

.workspace-ribbon-collapse-btn {
  margin-top: 0px;
  padding: 8px 6px 4px 6px;
  cursor: pointer;
  color: var(--text-faint);
  transform: none;
  transition: transform 100ms ease-in-out;
}

.workspace-ribbon.is-collapsed {
  background-color: var(--background-secondary-alt);
}

.workspace-ribbon.mod-left.is-collapsed {
  border-right-color: var(--background-secondary-alt);
}

.workspace-ribbon.mod-right.is-collapsed {
  border-left-color: var(--background-secondary-alt);
}

/* ===== thinner & snappier horiz resize handle =========*/

.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
  bottom: 0;
  left: -4px;
  height: 3px;
  width: 100%;
  cursor: row-resize;
}
.workspace-split.mod-left-split > .workspace-leaf-resize-handle, .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
  z-index: var(--layer-status-bar);
  height: calc(100% - 0px);
  top: unset;
  bottom: 0;
}
.workspace-leaf-resize-handle {
  transition: background-color 80ms linear;
}

/* ==== align top tab header with header title ==== */

.workspace-leaf {
  display: flex;
  flex-direction: column;
  position: relative;
  will-change: transform;
  min-height: 20px;
}
.workspace-leaf-content[data-type='backlink'] .view-content {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 20px;
}
.nav-header {
  padding: 8px 4px 1px 8px;
}
.nav-buttons-container {
  display: flex;
  justify-content: left;
  padding-bottom: 0px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 2px;
}

.nav-action-button > svg {
  width: 14px;
  height: 14px;
}

.nav-action-button {
  color: var(--text-muted);
  padding: 0 20px 0 10px;
  cursor: pointer;
}

.nav-files-container {
  flex-grow: 1;
  overflow-y: auto;
  padding-left: 7px;  /* reduce to 0 for more space */
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* ----file xplor : smaller & bold vault title--- */

.nav-folder.mod-root > .nav-folder-title {
  padding-left: 6px;
  font-size: 14px;
  font-weight: bolder;
  top: -6px; /* higher */
  cursor: default;
}

/*----file explorer smaller fonts & line height----*/

.nav-file-title,
.nav-folder-title {
  font-family: Source Code Pro, monospace;
  font-size: 12px;
  line-height: 14px;
  cursor: pointer;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  border-radius: 0px;
  padding: 1px 14px 0px 20px;
}

.nav-file-tag {
  background-color: var(--background-secondary-alt);
  top: -1px;
}

/*-------search pane---------*/
input[type="text"],
input[type="email"],
input[type="password"], 
input[type="number"] {
  font-family: Source Code Pro, monospace;
  padding: 5px 8px;
  font-size: 14px;
  border-radius: 4px;
}
.search-input {
  display: block;
  margin: 0 auto 10px auto;
  width: calc(100% - 20px);
}

/*---- nav arrows adjust location ----*/

.nav-folder-collapse-indicator {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 9px;
  height: 9px;
  transition: transform 50ms linear 0s;
}

.nav-folder.is-collapsed .nav-folder-collapse-indicator {
  transform: translateX(-4px) translateY(1px) rotate(-90deg);
}

/* ===== smaller view-actions icons ===== */

.view-action > svg {
  width: 14px;
  height: 14px;
}
.view-action > svg.link {
  color:red;
}
.view-header-icon > svg {
  width: 14px;
  height: 14px;
}

.workspace-tab-header-inner-icon > svg {
  width: 14px;
  height: 14px;
}

/* ===== brings back the selection highlight - thanks Klaas! ==== */

.suggestion-item.is-selected {
  background-color: var(--text-accent);
}

/* ====== scrollbars:no rounded corners =========*/

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
}

::-webkit-scrollbar-thumb:active {
  -webkit-border-radius: 0px;
}

/*==== tabs =====*/

.workspace-tab-container-before,
.workspace-tab-container-after {
  width: 0px;
  height: 100%;
}

/* ===== view header color ==========*/

.workspace-leaf.mod-active .view-header {
  background-color: var(--background-primary);
  border-bottom: 2px solid var(--interactive-accent);
}

/* smaller menu backlinks etc */
.workspace-leaf-content[data-type='search'] .nav-action-button, .workspace-leaf-content[data-type='backlink'] .nav-action-button {
  padding: 2px 4px 0px 4px;
  margin: 0px 3px 3px 3px;
  border-radius: 4px;
}
/*  smaller tabs */
.workspace-tab-header-container {
  display: flex;
  background-color: var(--background-secondary-alt);
  height: 29px;
  padding-top: 1px;
}
.workspace-tab-header-inner {
  padding: 4px 20px;
  height: 100%;
  display: flex;
}
.workspace-tabs {
  background-color: var(--background-secondary-alt);
  overflow: hidden;
  padding: 0px 4px 28px 4px;
  position: relative;
}
.view-header-icon {
  padding: 4px 10px;
  color: var(--text-muted);
  cursor: grab;
  position: relative;
  top: 0px;
}
.view-header {
  height: 29px; 
  display: flex;
  border-top: 1px solid var(--background-secondary-alt);
  border-bottom: 2px solid var(--background-secondary-alt);
  background-color: var(--background-secondary-alt);
  z-index: 1;
}
.workspace-leaf.mod-active .view-header-icon {
  padding: 3px 10px;
  color: var(--interactive-accent);
  cursor: grab;
  position: relative;
  top: 0px;
}
.view-header-title {
  font-size: 10px;
  font-weight: 600;
  overflow: auto;
  padding-right: 20px;
  white-space: nowrap;
  line-height: 30px;
  color: var(--text-muted);
}
.view-actions {
  padding: 1px 10px;
  display: flex;
  justify-content: flex-end;
}
.view-content {
  width: 100%;
  height: calc(100% - 29px);
}
.view-header-title-container:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 24px;
  background: linear-gradient(to right, transparent, var(--background-secondary-alt));
}

.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to right, transparent, var(--background-primary));
}

.workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
/* ===== tag pane ===================*/

.tag-pane-tag {
  font-size: 11px;
  line-height: 20px;
}

.tag-pane-tag-count {
  top: 2px;
  right: 10px;
  font-size: 11px;
  background-color: var(--background-secondary-alt);
  line-height: 12px;
  border-radius: 3px;
  padding: 2px 4px;
}

.pane-clickable-item {
  padding: 0px 15px;
}

/*==== separators =====*/

.workspace-leaf-resize-handle {
  background-color: var(--background-secondary-alt);
}

.workspace-leaf-resize-handle:hover {
  background-color: rgba(var(--interactive-accent-rgb), 0.8);
}
.workspace-split.mod-left-split > .workspace-leaf-resize-handle, .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
  z-index: var(--layer-status-bar);
  height: calc(100% - 28px);
  top: unset;
  bottom: 0;
}
/* a bit more padding on the left side */

.markdown-preview-view {
  padding: 20px 30px 30px 45px;
}

/*===== backlink pane smaller fonts=======*/

.side-dock-collapsible-section-header {
  font-size: 12px;
  padding: 4px 14px 0 22px;
  user-select: none;
  cursor: pointer;
  position: relative;
}
.side-dock-collapsible-section-header.is-collapsed .side-dock-collapsible-section-header-indicator {
  transform: translateX(-9px) translateY(7px) rotate(-90deg);
}
.search-result-container {
  padding: 0px 4px 4px 4px;
}

.search-result-file-title {
  font-size: 14px;
  color: var(--text-accent);
  border-radius: 0px;
  border-top: 1px solid var(--background-modifier-border);
  padding: 2px 12px 0px 18px;
}

.search-result-file-matches {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 16px;
  padding: 2px 0px;
  margin-bottom: -6px;
  border-bottom: 0px;
}
.search-result-file-match{
  color: var(--text-muted);
  font-size: 12px;
  line-height: 16px;
  padding: 2px 0px;
  margin-bottom: 4px;
  border-bottom: 0px;
}

.search-result-file-match:not(:first-child) {
  margin-top: 0px;
}

.search-result-file-matched-text {
  color: var(--text-matched);
  background-color: var(--text-highlight-bg);
}

.search-info-more-matches {
  color: var(--text-faint);
  text-decoration: overline;
  font-size: 10px;
  line-height: 16px;
}

.search-empty-state {
    color: var(--text-error);
    font-size: 12px;
    margin: 0 20px 15px 20px;
}
/* the small text ... and XX matches */

/*========= remove rounded corners =======*/

.workspace-tab-header.is-active {
  border-radius: 0px;
}

.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
.workspace-tab-header.is-before-active .workspace-tab-header-inner {
  border-radius: 0px;
}

.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
.workspace-tab-header.is-after-active .workspace-tab-header-inner {
  border-bottom-left-radius: 0px;
}
.workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content,
.workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
  border-top-left-radius: 0px;
}

.workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
  border-top-right-radius: 0px;
}

/*======= flat status bar ====*/

.status-bar {
  background-color: var(--background-secondary-alt);
  border-top: 0px solid var(--background-modifier-border);
  color: var(--text-accent);
}

/* ======= graph view ==============*/

.graph-view.color-fill {
  color: var(--graph-circle);
}

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

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

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

.graph-view.color-fill-highlight {
  color: var(--interactive-accent);
}

.graph-view.color-line-highlight {
  color: rgb(var(--interactive-accent-rgb));
}

.graph-view.color-fill-tag {
  color: var(--graphtag) !important;
}
.graph-view.color-fill-attachment {
  color: var(--graph-attach) !important;
}
.graph-view.color-fill-unresolved {
  color: var(--graph-unresolved);
  opacity: 1;
}
.graph-view.color-arrow {
  color: var(--graph-line);
  opacity: 1;
}
.graph-controls {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 10px 8px 0px;
  background-color: var(--background-primary-alt);
  min-width: 100px;
  max-width: 240px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 0px;
  max-height: calc(100% - 16px);
  overflow: auto;
}
.graph-controls-button.mod-close svg,
.graph-controls-button.mod-reset svg {
  width:12px;
  height:12px;
}
.graph-controls-button.mod-open svg {
  width:14px;
  height:14px;
}
.graph-controls.is-close {
  min-width: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px 8px 2px 8px;
}
.graph-controls.is-close svg {
  color:var(--text-muted);
}
.collapsible-item-children {
  margin-left: 8px;
}
.graph-controls input[type='text'],
.graph-controls input[type='range'] {
  width: 100%;
  font-size: 10px;
}
.graph-controls .setting-item {
  padding: 7px 0;
}
.graph-controls .setting-item.mod-slider .setting-item-control,
.graph-controls .setting-item.mod-search-setting .setting-item-control {
  padding-top: 0px;
}
.graph-controls .setting-item.mod-toggle .setting-item-control {
  padding-top: 0;
  margin-top: 0px;
}
.graph-controls .setting-item-name {
  font-size: 10px;
  color: var(--text-muted);
  display: inline-block;
}
.setting-item-description {
  color: var(--text-muted);
  font-size: 10px;
}
.setting-item {
  border-top: none;
  color: var(--text-muted);
}
.graph-controls .collapsible-item-children {
  margin-top: 0px;
}
.graph-control-section-header {
  font-weight: 600;
  font-size: 10px;
  color: var(--text-normal);
}
.graph-control-section:not(:last-child) .collapsible-item-children {
  margin-top: 0px;
  margin-bottom: 2px;
  border-bottom: none;
}
.graph-controls .setting-item {
  padding: 0px 0 0px 0;
}
.graph-controls input[type='range'] {
  -webkit-appearance: none;
  background-color: var(--background-modifier-border);
  border-radius: 2px;
  height: 2px;
}
.graph-controls input[type='range']::-webkit-slider-thumb {
  width: 13px;
  height: 9px;
  border-radius: 20%;
  border-left: 4px solid var(--text-accent2);   
  cursor: pointer;
  top: -2px;
}
.graph-controls .checkbox-container {
  cursor: pointer;
  background-color: var(--text-faint);
  border-radius: 3px;
  display: inline-block;
  height: 12px;
  position: relative;
  top: 6px;
  user-select: none;
  width: 26px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.graph-controls .checkbox-container.is-enabled {
  background-color: var(--interactive-accent);
}
.graph-controls .checkbox-container:after {
  pointer-events: none;
  content: '';
  display: block;
  position: absolute;
  background-color: var(--text-on-accent);
  width: 12px;
  height: 10px;
  margin: 1px 2px 1px 3px;
  border-radius: 2px;
  transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out;
  left: -4px;
  transform: translate3d(3px, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}
.graph-controls .checkbox-container.is-enabled:after {
  transform: translate3d(14px, 0, 0);
}
.view-content > iframe {
  background-color: var(--graph-bg);
}
/*==== codemirror line numbers gutter edit mode ====*/

.cm-s-obsidian .CodeMirror-linenumber {
  color: var(--text-accent);
  opacity: 0.3;
  font-size: 14px;
  font-family: Source Code Pro, monospace;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 0px;
  min-width: 20px;
  text-align: right;
  white-space: nowrap;
}


/*============bigger link popup preview  ================*/

.popover.hover-popover.is-loaded {
  position: absolute;
  z-index: var(--layer-popover);
  max-height: 500px; /* was 300 */
  min-height: 100px;
  width: 500px;
  overflow: overlay; /* new added */
  padding: 0;
  border-bottom: none;
}

.popover.hover-popover .markdown-embed  {
    height: 100%;
}


/* --- the bottom gradient ---*/
.popover.hover-popover:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0px; /* 50px */
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--background-primary) 80%,
    var(--background-primary)
  );
}

/* =========== footnotes ========= */

.markdown-preview-view .mod-highlighted {
  transition: background-color 1s ease;
  background-color: var(--text-highlight-bg);
  color: var(--text-matched);
}

.footnotes {
  text-align: justify;
  hyphens: auto;
  font-size: 12px;
}

sup {
  vertical-align: top;
  font-size: 11px;
  display: inline-block;
  position: relative;
  margin: -4px 0 0 3px;
}
sub {
  vertical-align: bottom;
  font-size: 11px;
  display: inline-block;
  position: relative;
  margin: 0px 0 -4px 3px;
}
/* =========== quote block ========= */
/* Add quotation character before quote */
/*--- 引用块 ---*/
blockquote {
  position: relative;
  border: none;
  border-left: 2px solid var(--text-accent);
  color: #8c8c8c;
  font-size: 1em;
  font-style: normal;
  padding: 24px 16px 12px;
  margin: 24px 0 36px;
  line-height: 1.6;
  text-indent: 0;
}

blockquote blockquote {
  padding-right: 0;
}

blockquote a {
  color: var(--text-accent);
}

blockquote:before {
  content: '“';
  position: relative;
  left: 10px;
  top: 0;
  color: var(--text-accent);
  font-size: 2em;
  font-family: Source Code Pro, monospace;
  line-height: 1em;
  font-weight: 700;
}

/*=============== lists bullets ================*/
ul {
  list-style-type: disc;
}
ul ul {
  list-style-type: disc;
}
ul ul ul {
  list-style-type: circle;
}

/*=============== tables align ================*/
tbody {
  display: table-row-group;
  vertical-align: top;
  border-color: inherit;
}

/*=============== top titlebar================*/
.titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 23px;
  display: flex;
  background-color: var(--background-modifier-cover);
}
.titlebar-button{
  opacity:0.7;
}
.titlebar-button[aria-label="Minimize"] svg rect {
  -webkit-app-region: no-drag;
  height:2px;
  fill: var(--text-accent);
  stroke: var(--text-accent);
}
.titlebar-button[aria-label="Maximize"] svg rect {
  stroke: var(--text-accent);
}
.titlebar-button.mod-back:after {
  content:"BACK";
  color:var(--text-on-accent);
  font-size: 10px;
  top:-3px;
  position:relative;
}
.titlebar-button.mod-forward:before{
  content:"NEXT";
  color:var(--text-on-accent);
  font-size: 10px;
  top:-3px;
  position:relative;
}
/*=============== menu ================*/
.menu-item:hover {
  background-color: var(--text-selection);
}
.checkbox-container {
  cursor: pointer;
  background-color: var(--background-secondary-alt);
  border-radius: 2px;
  display: inline-block;
  height: 22px;
  position: relative;
  top: 4px;
  user-select: none;
  width: 42px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.checkbox-container:after {
  pointer-events: none;
  content: '';
  display: block;
  position: absolute;
  background-color: var(--bw);
  width: 15px;
  height: 15px;
  margin: 3px;
  border-radius: 2px;
  transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out;
  left: 0;
  transform: translate3d(1px, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}
.checkbox-container.is-enabled:after {
  transform: translate3d(21px, 0, 0);
}
/*=============== transluscency fx ================*/
body.is-translucent {
  background-color: transparent;
}
.theme-dark {--opacity-translucency: 0.7;}
.theme-light { --opacity-translucency: 0.55; }
.is-translucent .titlebar { opacity: 1; }
.is-translucent .workspace { background-color: transparent;filter: contrast(1.4);filter: brightness(1.4); }
.is-translucent .workspace-split.mod-root { opacity: var(--opacity-translucency); }
.is-translucent .workspace-leaf-resize-handle { opacity: 1; background-color: var(--background-secondary-alt);}
.is-translucent .workspace-leaf-resize-handle:hover { background-color: rgba(var(--interactive-accent-rgb), 0.8); }
.is-translucent .workspace-ribbon { opacity: 1; }
.is-translucent .workspace-tabs { opacity: 0.6; }
.is-translucent .status-bar {
   opacity: 1; 
   border-top: 0px solid var(--background-secondary-alt); 
   margin: 0px 0px; }

/*=============== add mods below ================*/
/*=============== add mods below ================*/
/*=============== add mods below ================*/

/*----file explorer column view : slightly buggy ----*/
.nav-folder-children {
  column-width:200px;
  column-rule: 1px solid var(--background-modifier-border);
}

/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
  white-space: normal;
  width: auto;
}


/* reduce displayed size of embedded files */
.markdown-preview-view img {
  max-width: max(500px, 60%);
  outline: none;
  cursor: zoom-in;
}
.markdown-preview-view img:hover {
  max-width: min(1080px, 100%);
  outline: none;
}

/*=============== add mods below ================*/


/*=============== add mods below ================*/

/*===============================================*/
/*                                    .__    .___*/
/*  _____   ___________  _____ _____  |__| __| _/*/
/* /     \_/ __ \_  __ \/     \\__  \ |  |/ __ | */
/*|  Y Y  \  ___/|  | \/  Y Y  \/ __ \|  / /_/ | */
/*|__|_|  /\___  >__|  |__|_|  (____  /__\____ | */
/*      \/     \/            \/     \/        \/ */
/*======== optionnal mermaid style below ========*/

.label {
  font-family: Source Code Pro, monospace !important;
  color: var(--text-normal) !important;
}

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
  fill: var(--background-modifier-border) !important;
  stroke: var(--text-normal) !important;
  stroke-width: 0.5px !important;
}

.node .label {
  text-align: center !important;
}

.node.clickable {
  cursor: pointer !important;
}

.arrowheadPath {
  fill: var(--text-faint) !important;
}

.edgePath .path {
  stroke: var(--text-faint) !important;
  stroke-width: 1.5px !important;
}

.flowchart-link {
  stroke: var(--text-faint) !important;
  fill: none !important;
}

.edgeLabel {
  background-color: var(--background-primary) !important;
  text-align: center !important;
}

.edgeLabel rect {
  opacity: 0 !important;
}

.cluster rect {
  fill: var(--background-primary-alt) !important;
  stroke: var(--text-faint) !important;
  stroke-width: 1px !important;
}

.cluster text {
  fill: var(--background-primary) !important;
}

div.mermaidTooltip {
  text-align: center !important;
  max-width: 200px !important;
  padding: 2px !important;
  font-family: Source Code Pro, monospace !important;
  font-size: 10px !important;
  background: var(--background-secondary) !important;
  border: 1px solid var(--text-faint) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

/* Sequence Diagram variables */

.actor {
  stroke: var(--text-accent) !important;
  fill: var(--background-secondary-alt) !important;
}

text.actor > tspan {
  fill: var(--text-muted) !important;
  stroke: none !important;
}

.actor-line {
  stroke: var(--text-muted) !important;
}

.messageLine0 {
  stroke-width: 1.5 !important;
  stroke-dasharray: none !important;
  stroke: var(--text-muted) !important;
}

.messageLine1 {
  stroke-width: 1.5 !important;
  stroke-dasharray: 2, 2 !important;
  stroke: var(--text-muted) !important;
}

#arrowhead path {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.sequenceNumber {
  fill: var(--background-primary) !important;
}

#sequencenumber {
  fill: var(--text-muted) !important;
}

#crosshead path {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.messageText {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.labelBox {
  stroke: var(--text-accent) !important;
  fill: var(--background-secondary-alt) !important;
}

.labelText,
.labelText > tspan {
  fill: var(--text-muted) !important;
  stroke: none !important;
}

.loopText,
.loopText > tspan {
  fill: var(--text-muted) !important;
  stroke: none !important;
}

.loopLine {
  stroke-width: 2px !important;
  stroke-dasharray: 2, 2 !important;
  stroke: var(--text-accent) !important;
  fill: var(--text-accent) !important;
}

.note {
  stroke: var(--text-normal) !important;
  fill: var(--text-accent) !important;
}

.noteText,
.noteText > tspan {
  fill: var(--background-secondary-alt) !important;
  stroke: none !important;
}

/* Gantt chart variables */

.activation0 {
  fill: var(--background-secondary) !important;
  stroke: var(--text-accent) !important;
}

.activation1 {
  fill: var(--background-secondary) !important;
  stroke: var(--text-accent) !important;
}

.activation2 {
  fill: var(--background-secondary) !important;
  stroke: var(--text-accent) !important;
}

/** Section styling */

.mermaid-main-font {
  font-family: Source Code Pro, monospace !important;
}

.section {
  stroke: none !important;
  opacity: 0.2 !important;
}

.section0 {
  fill: var(--text-faint) !important;
}

.section2 {
  fill: var(--text-accent) !important;
}

.section1,
.section3 {
  fill: var(--text-normal) !important;
  opacity: 0.2 !important;
}

.sectionTitle0 {
  fill: var(--text-normal) !important;
}

.sectionTitle1 {
  fill: var(--text-normal) !important;
}

.sectionTitle2 {
  fill: var(--text-normal) !important;
}

.sectionTitle3 {
  fill: var(--text-normal) !important;
}

.sectionTitle {
  text-anchor: start !important;
  font-size: 9px !important;
  line-height: 14px !important;
  font-family: Source Code Pro, monospace !important;
}

/* Grid and axis */

.grid .tick {
  stroke: var(--text-muted) !important;
  opacity: 0.2 !important;
  shape-rendering: crispEdges !important;
}

.grid .tick text {
  font-family: Source Code Pro, monospace !important;
}

.grid path {
  stroke-width: 0 !important;
}

/* Today line */

.today {
  fill: none !important;
  stroke: var(--background-modifier-error) !important;
  stroke-width: 2px !important;
}

/* Task styling */

/* Default task */

.task {
  stroke-width: 0.5px !important;
}

.taskText {
  text-anchor: middle !important;
  font-family: Source Code Pro, monospace !important;
}

.taskText:not([font-size]) {
  font-size: 9px !important;
}

.taskTextOutsideRight {
  fill: var(--text-normal) !important;
  text-anchor: start !important;
  font-size: 9px !important;
  font-family: Source Code Pro, monospace !important;
}

.taskTextOutsideLeft {
  fill: var(--text-normal) !important;
  text-anchor: end !important;
  font-size: 9px !important;
}


/* Special case clickable */

.task.clickable {
  cursor: pointer !important;
}

.taskText.clickable {
  cursor: pointer !important;
  fill: var(--interactive-accent_hover) !important;
  font-weight: bold !important;
}

.taskTextOutsideLeft.clickable {
  cursor: pointer !important;
  fill: var(--interactive-accent_hover) !important;
  font-weight: bold !important;
}

.taskTextOutsideRight.clickable {
  cursor: pointer !important;
  fill: var(--interactive-accent_hover) !important;
  font-weight: bold !important;
}

/* Specific task settings for the sections*/

.taskText0,
.taskText1,
.taskText2,
.taskText3 {
  fill: var(--text-normal) !important;
}

.task0,
.task1,
.task2,
.task3 {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-muted) !important;
}

.taskTextOutside0,
.taskTextOutside2 {
  fill: var(--text-muted) !important;
}

.taskTextOutside1,
.taskTextOutside3 {
  fill: var(--text-muted) !important;
}

/* Active task */

.active0,
.active1,
.active2,
.active3 {
  fill: var(--text-accent) !important;
  stroke: var(--text-muted) !important;
}

.activeText0,
.activeText1,
.activeText2,
.activeText3 {
  fill: var(--text-normal) !important;
}


/* Tasks on the critical line */

.crit0,
.crit1,
.crit2,
.crit3 {
  stroke: var(--accent-strong) !important;
  fill: var(--accent-strong) !important;
  stroke-width: 1 !important;
}

.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
  stroke: var(--accent-strong) !important;
  fill: var(--text-accent) !important;
  stroke-width: 1 !important;
}

.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
  stroke: var(--accent-strong) !important;
  fill: var(--text-muted) !important;
  stroke-width: 0.5 !important;
  cursor: pointer !important;
  shape-rendering: crispEdges !important;
}

.milestone {
  transform: rotate(45deg) scale(0.8, 0.8) !important;
}

.milestoneText {
  font-style: italic !important;
}

.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
  fill: var(--text-normal) !important;
}

.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
  fill: var(--text-normal) !important;
}

.titleText {
  text-anchor: middle !important;
  font-size: 16px !important;
  fill: var(--text-normal) !important;
  font-family: Source Code Pro, monospace !important;
}

g.classGroup text {
  fill: var(--text-accent) !important;
  stroke: none !important;
  font-family: Source Code Pro, monospace !important;
  font-size: 8px !important;
}

g.classGroup text .title {
  font-weight: bolder !important;
}

g.clickable {
  cursor: pointer !important;
}

g.classGroup rect {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-accent) !important;
}

g.classGroup line {
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

.classLabel .box {
  stroke: none !important;
  stroke-width: 0 !important;
  fill: var(--background-secondary-alt) !important;
  opacity: 0.2 !important;
}

.classLabel .label {
  fill: var(--text-accent) !important;
  font-size: 10px !important;
}

.relation {
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
  fill: none !important;
}

.dashed-line {
  stroke-dasharray: 3 !important;
}

#compositionStart {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#compositionEnd {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#aggregationStart {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#aggregationEnd {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#dependencyStart {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#dependencyEnd {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#extensionStart {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

#extensionEnd {
  fill: var(--text-accent) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

.commit-id,
.commit-msg,
.branch-label {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
  font-family: Source Code Pro, monospace !important;
}

.pieTitleText {
  text-anchor: middle !important;
  font-size: 18px !important;
  fill: var(--text-normal) !important;
  font-family: Source Code Pro, monospace !important;
}

.slice {
  font-family: Source Code Pro, monospace !important;
}

g.stateGroup text {
  fill: var(--text-accent) !important;
  stroke: none !important;
  font-size: 10px !important;
  font-family: Source Code Pro, monospace !important;
}

g.stateGroup text {
  fill: var(--text-accent) !important;
  stroke: none !important;
  font-size: 10px !important;
}

g.stateGroup .state-title {
  font-weight: bolder !important;
  fill: var(--background-secondary-alt) !important;
}

g.stateGroup rect {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-accent) !important;
}

g.stateGroup line {
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
}

.transition {
  stroke: var(--text-accent) !important;
  stroke-width: 1 !important;
  fill: none !important;
}

.stateGroup .composit {
  fill: var(--text-normal) !important;
  border-bottom: 1px !important;
}

.stateGroup .alt-composit {
  fill: #e0e0e0 !important;
  border-bottom: 1px !important;
}

.state-note {
  stroke: var(--text-faint) !important;
  fill: var(--text-accent) !important;
}

.state-note text {
  fill: black !important;
  stroke: none !important;
  font-size: 10px !important;
}

.stateLabel .box {
  stroke: none !important;
  stroke-width: 0 !important;
  fill: var(--background-secondary-alt) !important;
  opacity: 0.5 !important;
}

.stateLabel text {
  fill: black !important;
  font-size: 10px !important;
  font-weight: bold !important;
  font-family: Source Code Pro, monospace !important;
}

.node circle.state-start {
  fill: black !important;
  stroke: black !important;
}

.node circle.state-end {
  fill: black !important;
  stroke: var(--text-normal) !important;
  stroke-width: 1.5 !important;
}

#statediagram-barbEnd {
  fill: var(--text-accent) !important;
}

.statediagram-cluster rect {
  fill: var(--background-secondary-alt) !important;
  stroke: var(--text-accent) !important;
  stroke-width: 1px !important;
}

.statediagram-cluster rect.outer {
  rx: 5px !important;
  ry: 5px !important;
}

.statediagram-state .divider {
  stroke: var(--text-accent) !important;
}

.statediagram-state .title-state {
  rx: 5px !important;
  ry: 5px !important;
}

.statediagram-cluster.statediagram-cluster .inner {
  fill: var(--text-normal) !important;
}

.statediagram-cluster.statediagram-cluster-alt .inner {
  fill: #e0e0e0 !important;
}

.statediagram-cluster .inner {
  rx: 0 !important;
  ry: 0 !important;
}

.statediagram-state rect.basic {
  rx: 5px !important;
  ry: 5px !important;
}

.statediagram-state rect.divider {
  stroke-dasharray: 10, 10 !important;
  fill: #efefef !important;
}

.note-edge {
  stroke-dasharray: 5 !important;
}

.statediagram-note rect {
  fill: var(--text-accent) !important;
  stroke: var(--text-muted) !important;
  stroke-width: 1px !important;
  rx: 0 !important;
  ry: 0 !important;
}

:root {
  --mermaid-font-family: 'Source Code Pro, monospace' !important;
  --mermaid-font-family: Source Code Pro, monospace, cursive !important;
}

/* Classes common for multiple diagrams */

.error-icon {
  fill: var(--text-error) !important;
}

.error-text {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.edge-thickness-normal {
  stroke-width: 1px !important;
}

.edge-thickness-thick {
  stroke-width: 3px !important;
}

.edge-pattern-solid {
  stroke-dasharray: 0 !important;
}

.edge-pattern-dashed {
  stroke-dasharray: 3 !important;
}

.edge-pattern-dotted {
  stroke-dasharray: 2 !important;
}

.marker {
  fill: var(--text-muted) !important;
}

.marker.cross {
  stroke: var(--text-muted) !important;
}

rect {
  fill: var(--text-accent-hover);
  fill-opacity: 1;
  stroke: var(--text-normal);
}



/* Checked-task-is-not-line-through & style */

.markdown-preview-view ul > li.task-list-item.is-checked {
  text-decoration: none;
  color: #8c8c8c;
}

/*

*/

button {
  color: var(--text-faint);
  background-color: var(--interactive-normal);
  border-radius: 4px;
  border: none;
  padding: 6px 20px;
  cursor: pointer;
  margin-right: 12px;
  font-family: Code Sans Pro, monospace;
  outline: none;
  user-select: none;
}

.markdown-preview-view ul > li.task-list-item {
  list-style: none;
  margin-left: -1.5em;
}


.markdown-preview-view .task-list-item-checkbox {
  width: 15px;
  height: 15px;
  position: relative;
  top: 3px;
  margin-right: 6px;
  filter: hue-rotate(01deg);
}
.markdown-preview-view .task-list-item > ol {
  display: inline-block;
}
.markdown-preview-view .task-list-item > ol.contains-task-list {
  display: block;
}

.markdown-preview-view .task-list-item-checkbox:checked::after {
  pointer-events: auto;
  content: '';
  display: block;
  position: relative;
  background-color: var(--text-accent);
  width: 10px;
  height: 10px;
  margin: 0px;
  border-radius: 1px;
  transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out;
  left: 0;
  transform: translate3d(2px, 2px, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}


/* changing color in menu and ctrl+p command bar */

div.modal-content {
  color: var(--text-faint);
}

div.prompt-results {
  color: var(--text-faint);
}

div.community-plugin-readme.markdown-preview-view {
  color: var(--text-faint);
}

div.backlink-pane {
  color: #dcddde;
}