/* ************************************ */
/* 3 Themes:
/* EVERGREEN (background color rgb(246, 255, 235))
/* SUNNY & GREEN (background color #fdf6e3 = Solarized)
/* WHEAT FIELDS (background color Wheat)
/* MOCCASIN (background color Moccasin)
/* themes by PB - Light versions only
/* ************************************ */


/*****************************/
/***** TABLE OF CONTENTS *****/
/*****************************/
/* Chapters:
1. GLOBAL
2. MARKDOWN
3. UPPER, LOWER, LATERAL EXTREMITIES
4. WYSIWYG
5. PLUG-IN MODIFICATIONS

/* Detailed contents:
/* 1. GLOBAL
Colors
Selection highlight
Vault launch progress bar change color

/*Obsidian settings, change color of:
enable/disable buttons
other buttons
links in the settings e.g. in description of plug-in

/* Command palette: change font color of hotkeys

/* Note title pane
change color of note title active pane
change icon above  vert. note title on title spine
change color of line next to note title in Andy Mode

/* Scroll bar
set scrollbar width
scrollbars: no rounded corners

/* Ribbons
on left change background color
on left icons: change color
on right change background color

/* Special Effects
Translucent modals - from: Nosedive-Obsidian
modify modal, omnibar, open looks

/* Export to PDF
Line up "native" blockquotes with transcluded ones in PDF
Page breaks

/* 2. MARKDOWN
/* Blockquote
basics settings for preview
Vertical centering of text in blockquote

/* Bullet lists
Reduce indentation in bullet lists
Long bullet list: same level bullets w/ vert. connect lines

/* Transclusions and Block references
Block references
Reduce gap between adjacent block embeds

/* Pop-up
bigger link popup preview
remove the bottom gradient or set height to 0 on pop-up

/* Links
/* internal links
change colour in Preview
change colour in Edit
/* external links - URLs
change colour

/* Local search match highlight
local (= in note) search match highlight color change in Edit mode
local (= in note) search match highlight in Preview mode

/* HTML in editor
html tags in editor
html comments in editor

/* Rest of Markdown
Line nos. in gutter smaller and less bright
Make subtler folding gutter arrows
Mark a line break, trailing space, tab when in Edit mode
Footnote styling
Setting the gap above and below a hor. line
Hide little square with arrow shown next to external link in Preview
Eliminate margin under headings
Horizontal gradient line/rule in Preview as per Obsidianite theme
Change header size in Edit mode
Table (as per Typora Solarized theme - alternating coloured bands)
Checkbox/To-do list

/* 3. UPPER, LOWER, LATERAL EXTREMITIES
/* Sidebars/Panes
Collapsible sidebars
Tooltips
Vert. resize handle to change pane width: change color

/* Pane on the right
Connecting lines for the outline
Tag pills in tag pane

/* Pane on the left/File Explorer
Folder and file icons
Reduce space of header buttons/icons
Animation for active file
Connectining lines for files and folders
Condense line spacing in title list; also avoids character-level word breaks
Smaller & bold vault title
Fix background of folder-collapse-indicator
Line up tabs with macOS traffic lights

/* Global search results
reduce gap between note title (bold) and hor. line/rule above
global search match highlight color change
reduce global search result margin
align top tab header with header title

/* Nav text
Wrap long nav text
Indent wrapped nav text

/* Upper, Lower
Frameless Title Bar
Remove status bar

/* 4. WYSIWYG
Editor font: make thicker so it is like in Preview
Hyphenation and Justification
Remove markdown clutter
Unordered lists: turn into bullets as you type, as per Typora
Underline H1 heading in Edit mode

/* Blockquote in edit mode
basics
with left border rendered instead of ">"

Tag pills in edit mode
Coloured headings for editor and preview, same font-weight in Edit & Preview
Horizontal line/rule in Edit mode. Changes --- to full-width line

/* 5. PLUG-IN MODIFICATIONS
Calendar plug-in: change color of year


/***************************** CODE *******************************************/

/*************/
/* 1. GLOBAL */
/*************/

/* Colors */
:root {
    --base1: moccasin; /* Moc. = best balance both strong & artif. light 4 distraction & readability of  */
    --base2: rgb(31, 178, 129); /*  Zettlr green */
    --base3: darkslategrey;
    --base4: lightgrey;
    --base5: rgb(33, 189, 137); /*  slightly off-Zettlr */
    --default-font: Inter;
}

.theme-light {
  --background-primary: var(--base1);
  --background-secondary: var(--base1);
  --interactive-normal: var(--base1);
  --text-on-accent: var(--base1);
  --interactive-accent: var(--base2); /* to change color of progress bar */
}

.CodeMirror pre.CodeMirror-line {
  font-size: 16px;
  color: var(--base3);
}

body {
  font-size: 16px;
  color: var(--base3);
}

.markdown-preview-view {
  color: var(--base3);
}

/* Selection highlight - for Popover-Popup */
.suggestion-item.is-selected {
  background-color: var(--base3); /* <!--PB--> changed from var(--text-accent) */
  color: whitesmoke;

}
/* Obsidian settings, change color from grey to other */
/* the enable/disable buttons */
.checkbox-container.is-enabled {
  background-color: var(--base2);
}

/* "Check for updates" button */
button.mod-cta {
  background-color: var(--base2);
  color: var(--base3) !important;
}

button.mod-cta:hover {
  background-color: var(--base5) !important;
  color: var(--base4);
}

/* "Installed" button in 3rd party plug-ins tab */
span.flair.mod-pop {
  background-color: var(--base2);
}

/* tab "3rd party plugins" font color Browse button */
.setting-item-control button {
  background-color: var(--base2) !important;
  color: var(--base3);
}

.setting-item-control button:hover {
  background-color: var(--base5) !important;
  color: var(--base3);
}

/* change color of buttons in Settings > Appearance > Themes > Browse */
.modal button:not(.mod-cta):not(.mod-warning) {
  background-color: var(--base2);
}

.modal button:not(.mod-cta):not(.mod-warning):hover {
  background-color: var(--base5);
}

/* "Installed plug-ins" refresh button */
.setting-editor-extra-setting-button.clickable-icon {
  color: var(--base2);
}

/* link color in the settings e.g. in description of plug-in */
a {
  color: var(--base3);
}

a:hover {
  color: var(--base3);
}

/* Options column in settings */
.vertical-tab-nav-item.is-active {
  border-left: 3px solid var(--base2);
}

/* Command palette: change font color of hotkeys */
.suggestion-item.is-selected .suggestion-hotkey{
  color: var(--base3)
}

/* Note title pane */
/* change color of note title active pane - Obsidianite */
.workspace-leaf.mod-active .view-header-title {
  color: var(--base2);
}

/* change icon above  vert. note title on title spine - from Obsidianite */
.view-header-icon {
  color: var(--base2);
}

.view-actions a.view-action {
  color: var(--base2);
}

/* change color of line next to note title in Andy Mode - Obsidianite */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--base2) !important; /* change to border-bottom in non-AM */
}

/* Scrollbar */
/* set scrollbar width */
::-webkit-scrollbar {
  width:8px;
}

/* scrollbars: no rounded corners */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
  background-color: var(--base2);
}

::-webkit-scrollbar-thumb:active {
  -webkit-border-radius: 0px;
  background-color: var(--base2);
}

/* Ribbons */ 
/* collapse buttons: change color */
.workspace-ribbon-collapse-btn {
  color: var(--base2);
}

/* on left change background color */
.workspace-ribbon.mod-left {
  border-color: transparent;
  width: 35px;
  background: var(--base3);
}

/* on left icons: change color */
.side-dock-ribbon-tab, .side-dock-ribbon-action {
  color: var(--base2);
  text-align: center;
}

.side-dock-ribbon-tab, .side-dock-ribbon-action:hover {
  color: var(--base5);
  text-align: center;
}

/* on right change background color */
.workspace-ribbon.mod-right {
  border-color: transparent;
  width: 30px;
  background: var(--base3);
}

/*******************/
/* Special Effects */
/*******************/

/* Translucent modals - from: Nosedive-Obsidian */
/* Modify modal, omnibar, open looks */
input.prompt-input, input.prompt-input:active, input.prompt-input:focus {
  border-radius: 3px;
  border: 2px solid rgba(38, 38, 59, 0.5); /* in the original code this is var(--text-muted) */
  background-color: transparent;
  box-sizing: border-box;
  border-collapse: collapse;
}

.modal-bg {
  background-color: #FFFFFF01;
  backdrop-filter: blur(20px);
}

/* Make legible background for menus since we overrode the background */
div.popover.hover-popover, .menu, .suggestion-container {
  background-color: #FFFFFF01;
  backdrop-filter: blur(30px);
  border: none;
}

/* Export to PDF */
/* line up "native" blockquotes with transcluded ones in PDF */
@media print{.internal-embed{margin-left:-30px;}}

/* page breaks */
@media print {
  h1 { 
    page-break-before: always;
  }
  h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

/**************************************************************************/

/********************************************/
/*          2. MARKDOWN                    */
/********************************************/

/* Blockquote */
blockquote {
  margin-inline-start: 0;
}

/* As per Obsidianite */
.markdown-preview-view blockquote {
  position: relative;
  padding: 1rem 2rem 1rem 3rem;
  color: whitesmoke; /* #bdbdbd */
  font-size: 15px;
  line-height: 1.3em;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-bottom: 2em;
  border-left: 4px var(--base2) solid;
  border-top: transparent;
  border-bottom: transparent;
  background: linear-gradient(135deg, var(--base4), var(--base3));
  border-right: transparent;
  display: inline-block;
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.markdown-preview-view blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, var(--base2), var(--base3));
}

.markdown-preview-view blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 2px;
  width: 25%;
  background: linear-gradient(90deg, var(--base2), var(--base3));
}

.markdown-preview-view blockquote p {
  position: relative;
}

.markdown-preview-view blockquote p:first-of-type::before {
  content: '“';
  font: 14px/20px italic Times, serif; /* PB changed from italic */
  font-weight: 700;
  font-size: 3em; /* PB changed from 18px */
  color: var(--base2); /* PB changed from var(--text-accent) */
  position: absolute;
  top: 0.1rem;
  left: -1.8rem;
}

/* Bullet lists */
/* Reduce indentation in bullet lists */
ol {
    padding-inline-start: 18px;
}
ul {
    padding-inline-start: 18px;
    list-style-type: disc;
}

/* Long bullet list: connect the same levels of bullets with vertical connection lines */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -15.5px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */
}

/* Transclusions and Block references */
/* Transclusions */
.markdown-embed-title {
	font-family: sans-serif;
	font-size: 10px;
	color: var(--text-accent); /*rgb(150,200,255);*/
	line-height: 10px;
	width: 100%;
	text-align: left;
	font-weight: 100;
	margin: -4px 0px;
}
.markdown-preview-view .markdown-embed {
	background-color: var(--background-primary);
	border-radius: 0px;
	border: 0;
	border-left: 0px solid #dcdcdc; /* <!--PB--> changed: thickness was 1px, color was var(--text-selection) */
	margin: 0px -14px; /* change value to change position to vertically align w/ transclusions */
}

.markdown-preview-view .markdown-embed-content, /* eliminate scrollbars in transclusions */
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
  max-height: unset;
}

.markdown-embed {
	display: block;
	top: 0px;
}
.markdown-embed > .markdown-embed-content {
	display: inline;
	max-height: 100%;
	max-width: 100%;
	margin: -25px 0px -15px 0px;
	padding: 0px 0px 5px 0px;
}
.markdown-embed-content > * {
	display: block;
	max-height: 100%;
	max-width: 100%;
	margin: 10px 0px 5px 0px;
}

.markdown-embed-link {
	top: -3px;
	left: 5px; /* <!--PB--> changed from -20px */
	color: #484848; /* was var(--accent-strong) */
	cursor: pointer;
	position: absolute;
}

.markdown-embed-link svg.link {
	width: 0px; /* <!--PB--> changed from 12px to 0px to hide it, does not affect backlinks pane */
  height: 0px; /* <!--PB--> changed from 12px to 0px to hide it, does not affect backlinks pane */
}

.file-embed-link {
	top: 10px;
	left: -10px;
	color: var(--accent-strong);
	cursor: pointer;
	position: relative;
}
.internal-embed, .internal-embed > .markdown-embed > .markdown-embed-content {
	display: block;
	max-height: 100%;
	max-width: 100%;
	left: 0px;
}
.markdown-preview-view .file-embed {
	background-color: var(--background-primary);
	border-radius: 4px;
	border: 2px solid var(--text-selection);
	padding: 5px 20px 5px 20px;
	margin: 10px 0px 10px 0px;
}
.file-embed-title {
	font-size: 12px;
	height: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Block references */
/* Reduce gap between adjacent block embeds */
.markdown-preview-view .markdown-embed {
  margin-top: -20px;
  margin-bottom: -20px;
}

/* Pop-up */
/* bigger link popup preview */
.popover.hover-popover {
  transform: scale(1.05); /* makes the content smaller */
  max-height: 800px; /* was 300 */
  min-height: 100px;
  width: 500px; /* was 400 */
  padding-left: 7px;
  overflow: overlay;
}

.popover.hover-popover .markdown-embed { /* newly added */
  height: 500px;
}

/* remove the bottom gradient or set height to 0 on pop-up */
.popover.hover-popover:after {
  height: 0px;    
  background: linear-gradient(to bottom, transparent, var(--background-primary) 80%, var(--background-primary));
}

/* Links */
/* internal links */
/* change colour in Preview */
a.internal-link {
  color: var(--base2);
}

/* change colour in Edit */
.cm-s-obsidian span.cm-hmd-internal-link {
  color: var(--base2);
}

/* external links - URLs */
/* change colour in Preview */
a.external-link {
  color: var(--base3);
  font-weight: 500;
}

/* change colour of URL [text] part in Edit */
span.cm-link {
  color: var(--base4) !important; /* leave !important; grey color was rgb(136,136,136) */
}

span.cm-string.cm-url {
  color: var(--base4) !important; /* leave !important; grey color was rgb(136,136,136) */
}

/* Local search match highlight */
/* Local (= in note) search match highlight color change in Edit mode */
.cm-s-obsidian span.obsidian-search-match-highlight {
  background-color: var(--base4); /* was fuchsia */
  color: var(--text-normal);
  }
  
/* Local (= in note) search match highlight color change in Preview mode */
.markdown-preview-view .search-highlight > div {
  background-color: var(--base4);
}

/* HTML in editor */
/* html tags in editor */
.cm-s-obsidian span.cm-tag {
  color: var(--base4);
}

/* html comments in editor */
.cm-s-obsidian span.cm-comment {
  color: var(--base4);
}

/* Rest of Markdown

/* Line nos. in gutter smaller and less bright */
.cm-s-obsidian .CodeMirror-linenumber {
  color: var(--text-accent);
  opacity : 0.15;
  font-size: 14px;
  font-family: Consolas,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;
}

/* Make subtler folding gutter arrows */
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after {
  opacity: 0.2;
  font-size: 70%;
}

.CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after {
  opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
  content: "\25BA";
}

.CodeMirror-foldgutter-open:after {
  content: "\25BC";
}

/* Mark a line break, trailing space, tab when in Edit mode */
.cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{
    font-size: 0;
}

.cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{
    content:'·';
    color:var(--text-faint);
    font-size: initial;
}

.cm-trailing-space-new-line::before {
    content:'↵';  
}

.cm-tab::before {
    content:'⟶'
}

/* Footnote styling */
.footnotes-list {font-size:12px;}
.markdown-preview-section .footnotes {font-size: 80%;}
.footnotes p {margin-top: 0px;margin-bottom:5px;}

.is-flashing {
  transition: background-color 1s ease;
  background-color: orange;
}

a.footnote-link {
  color: var(--base2);
}

/* note: if this block is deleted the space above and below the line jumps up,
/* but changing the px values has not effect
/* footnote lines gaps can also be set with a general hr rule - see below */
.markdown-preview-view
.footnotes hr {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Setting the gap above and below a hor. line, incl. footnotes ……
/* …… but footnotes can be set separately - see above */
div.markdown-preview-section hr {
  margin-block-start: 30px;
  margin-block-end: 40px;
}

/* Hide little square with arrow shown next to external link in Preview */
.external-link {
/* This remove the arrow */
background-image: none;
/* This removes the space left over after the arrow is gone **/
padding: 0;
}

/* Eliminate margin under headings - Preview mode only */
/* H1 underlined too */
.markdown-preview-view h1 {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--base2);
  margin-bottom: -10px;
}

.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5 {
  margin-bottom: -20px;
  padding-bottom: 4px;
}

.markdown-preview-view h6 {
  margin-bottom: -5px;
  padding-bottom: 10px;
}

/* Horizontal gradient line/rule in Preview as per Obsidianite theme */
.markdown-preview-view hr {
  margin-block-start: 4em;
  margin-block-end: 4em;
}

.markdown-preview-view hr,
div:not(.CodeMirror-activeline)>.HyperMD-hr-bg {
  border: none;
  height: 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient(to right,
          transparent,
          var(--base2),
          transparent);
}

div:not(.CodeMirror-activeline)>.HyperMD-hr-bg {
  top: 50%;
}

.markdown-preview-view hr::after,
div:not(.CodeMirror-activeline)>.HyperMD-hr-bg::after {
  content: '§';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: var(--base2); /* <!--PB--> changed from var(--text-sub-accent) */
  /*background-color: rgb(246,255,235, 0.1); /* PB changed from var(--base1), then disable for "Nosedive */
  backdrop-filter: blur(50px); /* added for "Nosedive" */
}

/* Change header size in Edit mode */
.cm-header-1 {
  font-size: 32px;
}
  
.cm-header-2 {
  font-size: 26px;
}
  
.cm-header-3 {
  font-size: 22px;
}
  
.cm-header-4 {
  font-size: 20px;
}
  
.cm-header-5 {
  font-size: 18px;
}
  
.cm-header-6 {
  font-size: 16px;
}

/* Change header size in Preview mode */
.markdown-preview-view h1 {
  font-size: 32px;
}
  
.markdown-preview-view h2 {
  font-size: 26px;
}
  
.markdown-preview-view h3 {
  font-size: 22px;
}
  
.markdown-preview-view h4 {
  font-size: 20px;
}
  
.markdown-preview-view h5 {
  font-size: 18px;
}
  
.markdown-preview-view h6 {
  font-size: 16px;
  font-weight: bold;
}

/* Table as per Typora Solarized theme */
table {
  padding: 0;
  word-break: initial;
}

table tr {
  border-top: 1px solid #cccccc;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
  background-color: var(--base4); /* PB changed from #f8f8f8 */
}

table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
  margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
  margin-bottom: 0;
}

/* Remove strikethrough from completed to-do lists/checkbox */
.markdown-preview-view .task-list-item-checkbox {
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid var(--text-muted);
  border-radius: 2px;
  position: relative;
  width: 1.3em;
  height: 1.3em;
  margin: 12px; /* <!--PB--> changed this from 0 */
  filter: none;
  outline: none;
  margin-right: 4px;
  margin-bottom: 1px;
  cursor: pointer;
  vertical-align: center;
}

.markdown-preview-view .task-list-item-checkbox:checked {
  border: none;
  background-color: var(--base2);
}

.markdown-preview-view .task-list-item-checkbox:checked::before {
  content: ' ';
  position: absolute;
  background-color: white;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'%3E%3Cpolygon points=\'5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\'%3E%3C/polygon%3E%3C/svg%3E');
}

/* prevent text next to checkbox to be crossed out */
.markdown-preview-view ul > li.task-list-item.is-checked {
  text-decoration: none;
  color: inherit;
}

/**************************************************************************/

/********************************************/
/*  3. UPPER, LOWER, LATERAL EXTREMITIES    */ 
/********************************************/

/******************/
/* Sidebars/Panes */
/******************/

/* Collapsible sidebars */
/*.side-dock-ribbon.is-collapsed:not(:hover){ width: 0px !important; opacity: 0 }
.side-dock-ribbon.mod-right.is-collapsed:not(:hover) ~ .workspace-split.mod-right-split { margin-right: 0 }
.side-dock-ribbon.mod-left.is-collapsed:not(:hover) ~ .workspace-split.mod-left-split { margin-left: 0 }

/* Tooltips - from Obuntu theme */
.tooltip {
  background-color: var(--base4); 
  color: var(--base3); /* was 46, 41, 56 */
  font-weight: normal;
  font-size: 12px;
}

.tooltip .tooltip-arrow {
  border-bottom: 5px solid var(--base4);
}

/* Vert. resize handle to change pane width: change color */
.workspace-leaf-resize-handle {
  background-color: var(--base3);
}

.workspace-leaf-resize-handle:hover {
  background-color: var(--base4);
}

/*********************/
/* Pane on the right */
/*********************/

/* Outliner */
/* connecting lines outliner */
.outline .collapsible-item-children {
  margin-left: 20px;
  border-left: 1px solid var(--text-muted);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.outline .collapsible-item-children:hover {
  border-left-color: var(--text-normal);
}

/* change font color outline */
div.collapsible-item-inner {
  color: var(--base3);
  font-size: 13px;
}  

/* indent wrapped titles outliner*/
.outline .collapsible-item-inner {
  margin-left: 10px;
  text-indent: -15px;
}

/* Tag pills in tag pane */
.tag-pane-tag-count {
  background-color: var(--base3);
  border: none;
  color: white;
  font-size: 14px;
  padding: 3px 8px 3px; /* 3 values: top, right and left, bottom */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

.tag-pane-tag-text {
  background-color: var(--base3); /* <!--PB--> changed from var(--text-accent) to (123, 108, 214) to blue */
  border: none;
  color: white;
  font-size: 14px;
  padding: 1px 8px 4px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 1px;
  margin-bottom: 1px;
  cursor: pointer;
  border-radius: 14px;
}

/* Change color of tag count pill when hovering */
.tag-pane-tag:hover .tag-pane-tag-count {
  color: white;
  background-color: var(--base2);
}

/**********************************************/
/* Pane on the left/File Explorer - left pane */
/**********************************************/

/* Folder and file icons */
.nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; }
.nav-folder-children .nav-folder-title-content::before { content: '📂 '; }

/* add colour to folder icons - needs 2 lines of .nav-folder-children above to work*/
.nav-folder-title-content::before {

  font-size: 16px;
  /*
   how to get CSS filter ? 
  0, open website: 
 https://www.zhangxinxu.com/sp/filter.html

  1, first: image original cloro  this is :  #000
  2, second: display color   i want : #D6FFF1
  3, CSS filter trans btn clik:  the result is :
    filter: invert(99%) sepia(90%) saturate(382%) hue-rotate(69deg) brightness(106%) contrast(102%);

  4, pause👇  : OK ✌️;
  */
  filter: invert(88%) sepia(8%) saturate(554%) hue-rotate(103deg) brightness(108%) contrast(102%);

  /*
    If you want to change the icon, you only need to modify this code.you can only change d=''
  */

  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 100' width='17' height='17'><path  fill='currentColor' stroke='currentColor'  d='M6.1,8c-3.3,0-6,2.7-6,6v73.8c-0.1,0.5-0.1,0.9,0.1,1.4c0.6,2.7,3,4.8,5.9,4.8h78c3,0,5.4-2.2,5.9-5.1 c0-0.1,0.1-0.2,0.1-0.4c0,0,0-0.1,0-0.1l0.1-0.3c0,0,0,0,0-0.1l9.9-53.6l0.1-0.2V34c0-3.3-2.7-6-6-6v-6c0-3.3-2.7-6-6-6H36.1 c0,0,0,0-0.1,0c-0.1,0-0.2-0.2-0.6-0.6c-0.5-0.6-1.1-1.5-1.7-2.5c-0.6-1-1.3-2.1-2.1-3C30.9,9,29.7,8,28.1,8L6.1,8z M6.1,12h22 c-0.1,0,0.1,0,0.6,0.6c0.5,0.6,1.1,1.5,1.7,2.5c0.6,1,1.3,2.1,2.1,3c0.8,0.9,1.9,1.9,3.6,1.9h52c1.1,0,2,0.9,2,2v6h-74 c-3.1,0-5.7,2.5-5.9,5.6h-0.1L10.1,34l-6,32.4V14C4.1,12.9,4.9,12,6.1,12z M16.1,32h78c1.1,0,2,0.9,2,2l-9.8,53.1l-0.1,0.1 c0,0.1,0,0.2-0.1,0.2c0,0.1,0,0.2-0.1,0.2c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.2-0.1,0.3c0,0.1,0,0.1,0,0.2 c0,0.1,0,0.2,0,0.2c-0.3,0.8-1,1.4-1.9,1.4h-78c-1.1,0-2-0.9-2-2L14,34.4l0.1-0.2V34C14.1,32.9,14.9,32,16.1,32L16.1,32z'/></svg>");

  /* margin */
  margin-right: 5px !important;
}

/*hover color*/
.nav-folder-title:hover .nav-folder-title-content::before  {

  /* hover color   #69fafd  👆   CSS filter 👇  */
  filter: invert(87%) sepia(20%) saturate(1026%) hue-rotate(113deg) brightness(105%) contrast(103%);
}

/* Reduce space of header buttons/icons - Blue Topaz */
div.nav-header{
  padding: 0px 5px 5px 5px;
  margin-bottom: 0px;
  margin-top: 5px;
  line-height: 0px;
}
div.nav-buttons-container{
  margin: 0px 0px 0px 0px;
}
input.search-input{
  margin: 0px 10px -3px 10px;
}
.nav-action-button{
  margin: 0px 2px 0px 2px !important;
}
.workspace-leaf-content[data-type='search'] .nav-action-button, .workspace-leaf-content[data-type='backlink'] .nav-action-button{
  padding: 3px 3px 3px 3px;
}

/* Animation for active file - Obuntu */
.nav-file-title,
.nav-folder-title {
  padding: 0px 14px 0px 20px;
}

.nav-folder-title {
  font-weight: bold;
}

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

.nav-file.is-active > .nav-file-title,
.nav-file.is-active > .nav-file-title:hover {
  background-color: var(--background-primary);
  border-radius: 2px;
  font-weight: bold; /* color: var(--text-accent); */
  border-left: 3px solid var(--base2);
  transition: all 0.5s ease;
}
.nav-file.is-active > .nav-file-title {
  padding-left: 5px;
  /* margin-left: 5px; */
}
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background-color: var(--background-primary);
  border-radius: 2px;
  transition: all 0.2s ease;
}

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

/* Connectining lines for files and folders in File Explorer */
.nav-folder-children .nav-folder-children {
  margin-left: 20px;
  padding-left: 0;
  border-left: 1px solid rgba(118,158,165,0.7);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.nav-folder-children .nav-folder-children:hover {
  border-left-color: rgba(118,158,165,0.7);
}

/* Condense line spacing in title list; also avoids character-level word breaks */
.nav-file-title-content,
.search-result-file-title,
.search-result-file-match {
    padding-top: 2px; /* <!--PB--> changed: was 0 */
    padding-bottom: 2px; /* <!--PB--> changed: was 0 */
    line-height: normal;
    word-break: keep-all;
    font-size: 12px; /* <!--PB--> added this line */
    color: var(--base3); /* <!--PB--> added this line */
}

/* 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;
  color: var(--base2);
}

/* Fix background of folder-collapse-indicator */
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  background: none;
}

/* Line up tabs with macOS traffic lights - Kepano */
.hider-frameless .workspace-split.mod-left-split > .workspace-tabs {
  padding: 0;}
.workspace-tab-container-inner {
  padding-left:30px;
}

/* Global search results */
/* global search results: reduce gap between note title (bold) and hor. line/rule above */
.search-result {
  word-break: break-word;
  margin-bottom: -4px; 
}


/* global search match highlight color change  */
.search-result-file-matched-text {
  color: var(--text-muted);
  background-color: var(--base4);
}

/* global search result: change color of count squarelet */
.pane-list-item:hover .pane-list-item-ending-flair {
  background-color: var(--base2);
  color: white;
}

/* bring global result count to same hor. level as result title */
.search-result-count.pane-list-item-ending-flair {
  margin-top: -5px;
}
  
/* reduce global search result margin - Blue Topaz */
.search-result-file-match{
  padding: 0px 0px;
}

.search-input {
  display: block;
  margin: 0 auto 10px auto;
  width: calc(100% - 20px);
}

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

/* margin color for box for global search input */
.search-input-container input.search-input {
  border: 1px solid var(--base2);
}

/* align top tab header with header title - Obsdn-dark-RMX */
.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: 2px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 2px;
}

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

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

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

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

/* Upper, Lower */
/* Frameless Title Bar = no title bar */
.is-frameless {
  padding-top:0px !important;
}

/* Remove status bar */
.status-bar {display: none;}

/* Change the colour or the font-weight of the note title in a pane */
.view-header-title {
  /*color: red; */
  font-weight: 300; /** this range from 1 - 1000 **/
  font-size: 12px;
}

/*****************************************************************************/

/**************************************/
/* 4. WYSIWYG: imitation in Edit mode */
/**************************************/
/* Editor font: make thicker so it is like in Preview
/* Hyphenation and Justification
/* Remove markdown clutter
/* Unordered lists: turn into bullets as you type, as per Typora
/* Underline H1 heading in Edit mode
/* Blockquote in edit mode
/* Tag pills in edit mode
/* Coloured headings for editor and preview, same font-weight in Edit & Preview
/* Horizontal line/rule in Edit mode. Changes --- to full-width line
/* *****************************************************************************/

/* For Edit mode use same font and font size as for Preview mode */

/* Editor font: make thicker so it is like in Preview */
.cm-s-obsidian .CodeMirror-line * {
  -webkit-font-smoothing: auto;
}

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

/* Remove markdown clutter */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink,
/*div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag*/ {
    display: none !important;
}

/* except numbered list */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list {
   display: inline !important;
}

/* except list markers */ span.cm-formatting-list,
/*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock,

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header {
  display: none !important;
}

/* and task checkboxes */
/* span.cm-formatting-task { display: inline !important; font-family: monospace; }

/* Unordered lists: turn into bullets as you type, as per Typora */
span.cm-formatting-list-ul {
  visibility: hidden !important;
 }
  
 span.cm-formatting-list-ul:after {
  content: '• ';
  margin-left: -12px;
  color: var(--text-normal);
  visibility: visible !important;
 }

/* Underline H1 heading in Edit mode */
.cm-s-obsidian pre.HyperMD-header-1:after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: 1px;
  background: var(--base2); /* rgb(123, 108, 214), then var(--text-accent) */
}

/* Blockquote in Edit mode */
/* basic setting */
.cm-quote {
  color: springgreen !important;
  font-size: 15px;
}

/* with left border rendered instead of > */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote {
  display: inline !important;
  color: transparent !important;
}

div:not(.CodeMirror-activeline)>.HyperMD-quote {
    border-left: 3px solid var(--text-selection);
    border-color: var(--base2); 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    line-height: 1.3em;
    padding: 12px 10px 15px 8.5px;
    margin-right: 20px !important;
    margin-left: 20px !important;
    border-top: transparent;
    border-bottom: transparent;
    background: linear-gradient(120deg, rgb(173, 173, 173), var(--base3));
    display: inline-block;
}

div:not(.CodeMirror-activeline)>.HyperMD-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3));
}

div:not(.CodeMirror-activeline)>.HyperMD-quote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 2px;
  width: 25%;
  background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3));
}

/* Tag pills in edit mode */
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
  content: '';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--base3); /* <!--PB--> changed from var(--text-accent) to (123, 108, 214) */
border: none;
color: white !important;
font-size: 14px;
padding: 0px 8px;
padding-top: -2px;
padding-bottom: 3px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 1px 1px;
cursor: pointer;
border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--base3); /* <!--PB--> changed from var(--text-accent-hover) */
}

/* Coloured headings for editor and preview, same font-weight in Edit & Preview */
.cm-s-obsidian .cm-header-1,
 .markdown-preview-view h1 {
  font-weight: 525;
  color: var(--base2); /* <!--PB--> changed from rgb(123, 108, 214) to DarkCyan to Zettlr green = var(--base2) */
}

.cm-s-obsidian .cm-header-2,
 .markdown-preview-view h2 {
  font-weight: 450;
  color: var(--base2);
}

.cm-s-obsidian .cm-header-3,
 .markdown-preview-view h3 {
  font-weight: 450;
  color: var(--base2);
}

.cm-s-obsidian .cm-header-4,
 .markdown-preview-view h4 {
  font-weight: 450;
  color: var(--base2);
}

.cm-s-obsidian .cm-header-5,
 .markdown-preview-view h5 {
  font-weight: 450;
  color: var(--base2);
}

.cm-s-obsidian .cm-header-6,
 .markdown-preview-view h6 {
  font-weight: 600;
  color: var(--base2);
}

/* Horizontal line/rule in Edit mode. Changes --- to full-width line */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr {
  color: transparent;
}

/*****************************************************************************/

/*****************************/
/* 5. PLUG-IN MODIFICATIONS
/*****************************/

/* Calendar plug-in: change color of year */
/*div.nav.svelte-1ocurao span.year.svelte-1ocurao {
  color: var(--base2);
}*/

#calendar-container {
  --color-background-heading: var(--base2);
  --color-text-heading: var(--base3);
}

#calendar-container .today {
  color: var(--base2);
  font-weight: bold;
}

#calendar-container .week-num {
  color: var(--base2);
  font-weight: bold;
}

#calendar-container .month {
  color: var(--base2);
  font-weight: bold;
}

#calendar-container .year {
  color: var(--base3);
  font-weight: 300;
}

/* New stuff to try out before integration above */