matrix.css

/* @import url("https://fonts.googleapis.com/css2?family=Fira+Code");
@import url("https://cdn.jsdelivr.net/gh/adobe-fonts/source-sans@3.046R/source-sans-3VF.css"); */
@font-face {
  font-family: "Source Han Sans VF";
  font-weight: 200 500;
  font-style: normal;
  font-stretch: normal;
  src: url("https://cdn.jsdelivr.net/gh/adobe-fonts/source-han-sans@release/Variable/WOFF2/OTF/Subset/SourceHanSansCN-VF.otf.woff2");
}
@font-face {
  font-family: "Only Emoji";
  src: local("Apple Color Emoji"), local("Android Emoji"), local("Segoe UI Emoji"), local("Segoe UI");
  unicode-range: U+200D, U+2049, U+20E3, U+2117, U+2120, U+2122, U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2, U+25A1, U+25AA-25AD, U+25B6, U+25C0, U+25D0, U+25D1, U+25E7-25EA, U+25ED, U+25EE, U+25FB-25FE, U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E, U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668, U+267B, U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0, U+26B1, U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C, U+2B1F-2B24, U+2B2E, U+2B2F, U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC, U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299, U+E000-E009, U+E010, U+E011, U+E040-E04B, U+E050-E058, U+E080-E0B4, U+E0C0-E0CA, U+E0FF-E10D, U+E140-E144, U+E146-E149, U+E150-E157, U+E181-E188, U+E1C0-E1C4, U+E1C6-E1D7, U+E200-E20E, U+E240-E269, U+E280-E283, U+E2C0-E2C4, U+E2C6-E2DA, U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322, U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000, U+F8FF, U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E, U+1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250, U+1F251, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F978, U+1F97A-1F9CB, U+1F9CD-1F9FF, U+1FA70-1FA74, U+1FA78-1FA7A, U+1FA80-1FA86, U+1FA90-1FAA8, U+1FAB0-1FAB6, U+1FAC0-1FAC2, U+1FAD0-1FAD6, U+1FBC5-1FBC9, U+E0061-E0067, U+E006C, U+E006E, U+E0070-E0079, U+E007F;
}


html[data-theme="dark"],
.dark-theme {
  background-color: black;
  
  --ls-primary-background-color: black;
  --ls-secondary-background-color: #000000;
  --ls-tertiary-background-color: #869b0018;
  --ls-quaternary-background-color: #3a7cff;

  --ls-table-tr-even-background-color: #3f3f3f48;

  --ls-block-properties-background-color: #3e3e3eab;
  --ls-page-properties-background-color: #3e3e3e;
  --ls-block-ref-link-text-color: #767676;

  --ls-border-color: #68dd50;
  --ls-secondary-border-color: #6df187;
  --ls-tertiary-border-color: #3363f4ce;

  --ls-guideline-color: #2ec0c2;

  --ls-primary-text-color: #56ff69; /* main text color */
  --ls-secondary-text-color: #7dff8c;
  --ls-tertiary-text-color: #ffffff;
  --ls-quaternary-text-color: #ffffff;
  --ls-link-text-color: #affc6c;
  --ls-header-button-background: #74ff74; /* recent */

  --ls-right-panel-background-color: #000000;
  --ls-right-panel-gradient-color: #600000;

  --ls-sidebar-text-color: #9693ff;
  --ls-sidebar-link-text-color: #fff1e2;

  --ls-block-bullet-border-color: #00a982;
  --ls-block-bullet-color: #00ff91;
  --ls-block-bullet-background-color: #ff7070;
  --ls-block-highlight-color: #9ec7ffb5;
  --ls-selection-background-color: #0055cb;
  --ls-selection-text-color: #ffffff;

  --ls-page-checkbox-color: #a0a0a0;

  --ls-page-inline-code-bg-color: #2a2a2a;

  --ls-scrollbar-foreground-color: #5f5f5f;

  --ls-cloze-text-color: #bcbcbc;

  --ls-pie-bg-color: #3b3b3b;
  --ls-pie-fg-color: #696969;
  --ls-focus-ring-color: #77777780;

  --color-level-4: #6c6c6c;
  --color-level-5: #7d7d7d;
  --color-level-6: #8e8e8e;

  --ct-marker-border-radius: 2px;
  --ct-checkbox-color: #ffb941;
  --ct-marker-size: 1.2rem;
  --ct-doing-checkbox-color: #fffb00df;
  --ct-waiting-checkbox-color: #ff3c3c;
  --ct-success-color: #ff9bf8;
  --ct-a-color: #ff2515;
  --ct-b-color: #ffff00c7;
  --ct-c-color: #1cff37ac;
  --ct-task-done-text-color: #73ff63;
  --ct-task-done-text-decoration: line-through;
  --ct-code-font-family: Consolas;
  --ct-inline-code-font-size: 1rem;
}

:root {

  --ls-block-bullet-active-color: var(
    --ls-block-bullet-threading-active-color-overwrite,
    var(--ls-link-text-color)
  );
  --ls-block-bullet-threading-width: var(
    --ls-block-bullet-threading-width-overwrite,
    1px
  );  


  --ls-main-content-max-width: 96%;
  --ls-main-content-max-width-wide: 1096%;
  --ls-font-family: "Only Emoji", "Source Sans 3 VF", "Source Han Sans VF", "sans-serif";
  --ct-text-size: 14px;
  --ct-line-height: normal;

  --ct-page-title-color: #00ffae; /* journal header */
  --ct-page-title-font-size: 28px;
  --ct-page-title-line-height: 30px;
  --ct-page-title-font-weight: 500;
  --ct-page-title-font-style: normal;
  
  --ct-heading-font-size: 21px;
  --ct-heading-font-family: var(--ct-page-title-font-family);
  --ct-heading-font-size: 25px;
  --ct-heading-font-weight: 200;
  --ct-heading-font-style: normal;
  --ct-header-height: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding));
  --ct-page-title-font-family: var(--ls-font-family);
  --ct-code-font-family: "Fira Code", monospace;
}

html,
body {
  font-size: var(--ct-text-size);
  font-family: var(--ls-font-family);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: auto;
  line-height: var(--ct-line-height);
}

textarea {
  line-height: var(--ct-line-height);
}

i {
  font-family: "Only Emoji", "Source Sans 3 VF", sans-serif;
}

:root {
  --ct-background: var(--ls-primary-background-color);
  --ct-page-font-color: var(--ls-primary-text-color);
}

:root.is-mac.is-electron {
  --ct-header-height: 18px;
}


/* Dark theme global variables */
html:not(.is-native-android) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Segoe UI Emoji", "Open Sans", sans-serif !important;
}


/* Heading & Page title */
a.title h1.title {
  margin-top: 0px;
  margin-bottom: 1rem;
  font-family: var(--ct-page-title-font-family);
  font-size: var(--ct-page-title-font-size);
  font-weight: var(--ct-page-title-font-weight);
  font-style: var(--ct-page-title-font-style);
  color: var(--ct-page-title-color);
  line-height: var(--ct-page-title-line-height);
  text-shadow: var(--ct-page-title-text-shadow, none);
}

/* Page reference */

/* Tags */
a.tag[data-ref] {
	padding: 0.2rem 0.3rem;
	background: var(--ls-quaternary-background-color);
	color: var(--ls-quaternary-text-color);
	white-space: nowrap;
	letter-spacing: 0.05em;
  text-shadow: rgb(0, 0, 0) 1px 2px;
	font-weight: normal;
	font-size: 0.85rem;
	transition: 0.3s;

  border: 2px solid currentColor;
  border-radius: 4px;
  line-height: 1.4;
  opacity: 1;
}
a.tag[data-ref]:hover {
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 1;
  text-transform:unset;
  box-shadow: 0 0 8px 3px #61e048;
}
.page-reference .bracket {
  opacity: 0.9;
}

html[data-theme="dark"] .page-ref {
  color: white;
}

/* left sidebar */
.left-sidebar-inner a.item {
  margin: 0 4px;
  box-sizing: border-box;
}

.left-sidebar-inner .nav-content-item > .header:hover,
.left-sidebar-inner .nav-content-item > .bd ul a:hover,
.left-sidebar-inner a.item:hover {
  background-color: var(--ls-sidebar-quaternary-background-color);
  color: var(--ls-sidebar-quaternary-text-color);
}

.left-sidebar-inner a.item,
.left-sidebar-inner .nav-content-item > .header a {
  color: var(--ls-sidebar-link-text-color);
}

.left-sidebar-inner .nav-content-item > .bd ul a {
  color: var(--ls-sidebar-text-color);
}

.cp__sidebar-left-layout {
  background: transparent;
  bottom: 0;
}

.cp__sidebar-left-layout.is-open .left-sidebar-inner {
  background: radial-gradient(circle, var(--ls-right-panel-gradient-color), var(--ls-right-panel-background-color));
}

.left-sidebar-inner .new-page,
.left-sidebar-inner {
  background: none;
}   

.sidebar-item {
  border-bottom: 3px solid var(--ls-border-color);
  box-shadow: none;
}

/* Right sidebar */

.cp__right-sidebar-settings a {
  opacity: 0.6;
}
.cp__right-sidebar-settings a:hover {
  opacity: 1;
}

div#right-sidebar {
  transition: all 0s;
  -webkit-transition: all 0s;
}

.cp__right-sidebar-inner {
  --ct-sidebar-padding: 0.5rem;
  background: radial-gradient(circle, var(--ls-right-panel-gradient-color), var(--ls-right-panel-background-color));
}

.cp__right-sidebar .sidebar-item {
  margin: var(100) 0;
  border-radius: 4Spx;
  background: transparent;
}

.sidebar-item-list {
  padding-top: var(1em);
  background: transparent;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
} 
/*********************************************************************/


/* youtube embed adjustments */
[id^=youtube-player] {
  width: 200px;
  height: 80px;
}
/*********************************************************************/


/* Markers */
.form-checkbox,
.form-checkbox:focus {
  border-radius: var(--ct-marker-border-radius);
  border: 2px solid var(--ct-checkbox-color) !important;
  background-color: transparent !important;
  height: var(--ct-marker-size);
  width: var(--ct-marker-size);
}

:is(.doing, .now) .form-checkbox,
:is(.doing, .now) .form-checkbox:focus {
  background-color: var(--ct-doing-checkbox-color) !important;
  text-decoration: underline;
}

.waiting .form-checkbox,
.waiting .form-checkbox:focus {
  background-color: var(--ct-waiting-checkbox-color) !important;
}

.form-checkbox:checked,
.form-checkbox:checked:focus {
  background-color: var(--ct-success-color) !important;
}

.canceled,
.done {
  color: var(--ct-task-done-text-color);
  text-decoration: var(--ct-task-done-text-decoration);
  text-decoration-color: #5ea0fc;
  opacity: 0.9;
}

.inline.later>input,
.inline.done>input,
.inline.now>input,
.inline.todo>input,
.inline.doing>input,
.inline.waiting>input {
  margin-top: 0px !important;
}


a[priority],
a.priority {
  font-size: 0px;
}

a[priority=A]::before,
a.priority[href="#/page/A" i]:before {
  content: "A";
  background: var(--ct-a-color);
  color: #ffffff;
}

a[priority=B]::before,
a.priority[href="#/page/B" i]:before {
  content: "B";
  background: var(--ct-b-color);
  color: #ffffff;
}

a[priority=C]::before,
a.priority[href="#/page/C" i]:before {
  content: "C";
  background: var(--ct-c-color);
  color: #ffffff;
}

a.priority[href="#/page/A" i],
a.priority[href="#/page/B" i],
a.priority[href="#/page/C" i] {
  display: inline-flex;
  opacity: 1 !important;
  /* transform: translate(0%, -50%); */
}

a[priority]::before,
a.priority::before {
  border: 1px solid #eee;
  border-radius: var(--ct-marker-border-radius);
  font-size: 1rem;
  font-weight:4600;
  height: var(--ct-marker-size);
  width: var(--ct-marker-size);
  line-height: 1.5;
  text-align: center;
  display: inline-flex;
  font-family: var(--ct-code-font-family);
  align-items: center;
  justify-content: center;
  transform: translate(0%, 0%); 
}

a.tooltip-priority:first-of-type::before {
  margin-left: 0.3em;
  margin-top: 0.5em;
}

.block-marker {
  font-family: var(--ct-code-font-family);
  font-size: var(--ct-inline-code-font-size);
}
/*********************************************************/

/* Settings Menu */

html[data-theme="dark"] .cp__header a,
html[data-theme="dark"] .cp__header button,
html[data-theme="dark"] .cp__right-sidebar-topbar button {
  opacity: 1;
}

html[data-theme="dark"] .cp__header .chosen a {
  color: var(--ls-primary-text-color);
  opacity: 1;
}

html[data-theme="dark"] .cp__header a:hover {
  color: var(--ls-primary-text-color);
}

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

/* Highlights */

html[data-theme="dark"] mark {
  background: rgba(255, 255, 255, 0.307);
  color: white;
}

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

/* Highlight search term in searches */

html[data-theme="dark"] .chosen mark {
  background: black;
  color: rgba(255, 255, 255, 0.936);
}

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

/* Text area */

html[data-theme="dark"] textarea::selection {
  background-color: var(--ls-selection-background-color) !important;
  color: var(--ls-selection-text-color) !important;
}

html[data-theme="dark"] ::selection {
  background-color: var(--ls-selection-background-color) !important;
  color: var(---ls-selection-text-color) !important;
}

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

/* Bullet container bullets */

html[data-theme="dark"] .bullet-container .bullet {
  background-color: var(--ls-block-bullet-background-color) !important;
  color: var(--ls-block-bullet-color) !important;
}

html[data-theme="dark"] .bullet-container.as-order-list.typed-list .bullet {
  /*numbered lists*/
  background-color: none;
  color: white;
}

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

/* SVG icons */

html[data-theme="dark"] svg {
  color: white !important;
}

/* Repo name */
html[data-theme="dark"] #repo-name {
  color: white !important;
}

/* Settings menu dropdown div */

html[data-theme="dark"] .dropdown-wrapper {
  border: 1px solid #ffb012; /* Optional: Add a solid border for better visibility */
  padding: 1px; /* Optional: Add padding to the element */
  box-shadow: 0 0 1px 2px rgba(255, 176, 18, 0.75); /* Create the glow effect */
  background-color: #000000; /* Optional: Background color for the element */
}

/* Search box and modals */
html[data-theme="dark"] .search-ac {
  border: 1px solid white !important;
  border-radius: 0px;
}
html[data-theme="dark"] .absolute-modal {
  border-radius: 0px;
  border: 1px solid white;
  border-top: none;
}
html[data-theme="dark"] .ui__ac-group-name {
  color: white !important;
  background-color: black !important;
}
html[data-theme="dark"] a.chosen {
  color: black !important;
  background-color: white !important;
}
html[data-theme="dark"] a.chosen p,
html[data-theme="dark"] a.chosen .breadcrumb.block-parents a,
html[data-theme="dark"] a.chosen .breadcrumb.block-parents svg {
  color: white !important;
  background-color: black !important;
}

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

.menu-link {
  border-radius: 0px !important;
}
html[data-theme="dark"] .selected {
  background-color: var(--ls-selection-background-color) !important;
  color: var(--ls-selection-text-color) !important;
}
html[data-theme="dark"] .selected a {
  color: black !important;
}
html[data-theme="dark"] .selected .bullet {
  background-color: black !important;
}
html[data-theme="dark"] .selected .bracket {
  color: black !important;
}

/* Right sidebar */

html[data-theme="dark"] .cp__right-sidebar .open {
  border-left: 1px solid white !important;
}

/* Link hover */

html[data-theme="dark"] .menu-link:hover {
  background-color: white !important;
  color: black !important;
}

/* Checkboxes */

html[data-theme="dark"] .form-checkbox,
html[data-theme="dark"] .form-radio {
  background-color: #490000;
  border: solid #bfffab 1px;
  color: black;
}

html[data-theme="dark"] .form-checkbox:checked {
  background-color: rgb(255, 99, 99);
}

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

html[data-theme="dark"] .content .color-level {
  border: 1px solid white !important;
  background: black;
}

/* Context menu */

html[data-theme="dark"] .custom-context-menu {
  border: 1px solid #ffb012; 
  padding: 1px; 
  box-shadow: 0 0 1px 2px #ffb012bf;
  background-color: #fff;
  opacity: 0;
}

/*********************************************************
            codemirror code blocks
*********************************************************/
.dark-theme .CodeMirror {
  background: var(--ls-secondary-background-color);
  color: var(--ls-primary-text-color)
}
.dark-theme .CodeMirror-scroll {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  margin-bottom: -40px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: 0;
  position: relative;
}

.dark-theme .CodeMirror-gutter,
.dark-theme .CodeMirror-gutters,
.dark-theme .CodeMirror-linenumber,
.dark-theme .CodeMirror-scroll,
.dark-theme .CodeMirror-sizer {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: linear-gradient(to left, #390000, #000000 50%, #000000 75%, #000000 75%);
 }

 .dark-theme .CodeMirror-gutters {
  border-right: 1px solid #4e4e4e;
  background-color: #ffcece;
  white-space: nowrap;
}
.dark-theme .CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  opacity: 1;
  color: var(--ls-primary-text-color);
  white-space: nowrap;
}

.extensions__code .CodeMirror {
  background: var(--ls-secondary-background-color);
  color: var(--ls-primary-text-color)
}

.extensions__code .CodeMirror {
  z-index: 0;
  height: auto;
  padding: 15px 0 0 0;
  font-family: Fira Code, Monaco, Menlo, Consolas, "COURIER NEW", monospace;
  max-width: 86vw;
  background-color: white;
}

.extensions__code-lang .CodeMirror {
  background: var(--ls-secondary-background-color);
  color: var(--ls-primary-text-color)
}
/*********************************************************/

/* Blockquote */

html[data-theme="dark"] blockquote {
  border: 1px dashed white !important;
  border-left: 2px solid white !important;
  background-color: black;
}

/* Code Blocks */

.cm-s-solarized.cm-s-dark {
  background-color: black;
  border: white solid 1px;
}

html[data-theme="dark"] .extensions__code-lang {
  border: white 1px solid;
}

.cm-s-solarized.cm-s-light .CodeMirror-gutters {
  background-color: var(--ls-secondary-background-color);
}

.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--ls-secondary-background-color);
}

/* ScrollBar */

html[data-theme="dark"] html ::-webkit-scrollbar {
  border-left: 1px solid #ff7878;
}

html[data-theme="dark"] html ::-webkit-scrollbar-thumb {
  background-color: #ff7878 !important;
}

/* SideBar */

html[data-theme="dark"] #right-sidebar-container {
  border-left: 1px solid white !important;
}

html[data-theme="dark"] .sidebar-item {
  box-shadow: none;
  border-bottom: 1px solid white !important;
}


/* Editor */
.open-block-ref-link {
  opacity: 1;
  border: 1px solid var(--ls-link-text-color);
}

/* Flashcards */

html[data-theme="dark"] div[data-refs-self*='"card"'] {
  border: #98e447 solid 1px;
}

/* notifications */
html[data-theme="dark"] .ui__notifications .notification-area {
  border: #6dff5a 1px solid;
}

/* Popper Popups*/
.tippy-tooltip {
  min-width: 100px;
  color: var(--ls-secondary-text-color);
  background: radial-gradient(circle, var(--ls-right-panel-gradient-color), var(--ls-right-panel-background-color));
  -webkit-font-smoothing: auto;
  border: 2px solid #ff8080;
  border-radius: 8px;
}
.tippy-tooltip > .tippy-tooltip-content {
  overflow: hidden;
  background: transparent;
}

.tippy-wrapper, {
  background: transparent;
  font-weight: unset !important;
} 


/********************* bullet threading ******************************************/

.block-control {
  z-index: 1;
}

.block-children {
  border-left-color: var(--ls-guideline-color);
  border-left-width: var(--ls-block-bullet-threading-width) !important;
}

.block-children-container {
  position: relative;
}

.block-children-left-border {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 4px;
  padding-right: 0px;
  border-radius: 2px;
  background-color: transparent;
  left: -1px;
  transition: background-color 0.2s;
}

.block-children-left-border:hover {
  background-color: var(--ls-block-bullet-active-color);
}

.block-content-wrapper {
  position: relative;
  overflow-x: visible !important;
  /* Fixme: overflow? */
}

.bullet-container {
  height: 14px !important;
  width: 14px !important;
  position: relative;
  transform: translate(1px, -1px);
}

/* Block bullet path should only show in a nested block */
.ls-block {
  /* Fix for headings like h1, h2 etc */
  /* Basic "curve" */
  /* Fix multi-line blocks with children */
}
.ls-block .bullet {
  background-color: var(--ls-block-bullet-active-color);
  box-shadow: 0 0 0 1px var(--ls-block-bullet-active-color);
}
.ls-block div.block-control-wrap {
  position: relative;
  height: 26px !important;
}
.ls-block > .items-baseline {
  align-items: initial;
}
.ls-block:not(:focus-within) .bullet {
  background-color: var(--ls-block-bullet-color);
  transform: scale(1);
  box-shadow: none;
}
.ls-block:not(:focus-within) > .items-baseline {
  align-items: baseline;
}
.ls-block .ls-block > div > div.items-center::before {
  pointer-events: none;
  content: "";
  left: calc(var(--ls-block-bullet-threading-width) * -1);
  right: 20px;
  top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
  bottom: 50%;
  /* shift left 1px for border */
  position: absolute;
  border-left: var(--ls-block-bullet-threading-width) solid transparent;
  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
  border-bottom-left-radius: 10px;
}
.ls-block .ls-block:focus-within > div > div.items-center::before {
  border-color: var(--ls-block-bullet-active-color);
}
.ls-block .block-children > .ls-block::before {
  pointer-events: none;
  content: "";
  top: -1rem;
  bottom: 0;
  border-left: var(--ls-block-bullet-threading-width) solid transparent;
  left: calc(var(--ls-block-bullet-threading-width) * -1);
  position: absolute;
}
.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
  border-color: var(--ls-block-bullet-active-color);
}
.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
  border-color: transparent;
}
.ls-block[haschild] > div > .block-content-wrapper::before {
  pointer-events: none;
  content: "";
  top: 12px;
  bottom: 0;
  left: -21px;
  position: absolute;
  border-left: var(--ls-block-bullet-threading-width) solid transparent;
}
.ls-block[haschild]:focus-within > div > .block-content-wrapper::before {
  border-color: var(--ls-block-bullet-active-color);
}

:is(.embed-block > div, .embed-page) > div > div > div > div.ls-block > div > div.items-center::before {
  border-color: transparent !important;
}

@media (max-width: 640px) {
  .ls-block[haschild] > div > .block-content-wrapper::before {
    left: -11px;
  }
}
/* Disable for doc mode */
.doc-mode div.items-center::before,
.doc-mode div.items-center::after,
.doc-mode .ls-block::before,
.doc-mode .ls-block::after {
  display: none;
}

.doc-mode .block-children {
  border-left-width: 0px !important;        
}