:root {
  /* DEFAULTS */
  --dark0-hard-x:      29,32,33;
  --dark0-hard:        rgb(var(--dark0-hard-x));
  --dark0-x:           40,40,40;
  --dark0:             rgb(var(--dark0-x));
  --dark0-soft-x:      50,48,47;
  --dark0-soft:        rgb(var(--dark0-soft-x));
  --dark1-x:           60,56,54;
  --dark1:             rgb(var(--dark1-x));
  --dark2-x:           80,73,69;
  --dark2:             rgb(var(--dark2-x));
  --dark3-x:           102,92,84;
  --dark3:             rgb(var(--dark3-x));
  --dark4-x:           124,111,100;
  --dark4:             rgb(var(--dark4-x));
  --gray-x:            146,131,116;
  --gray:              rgb(var(--gray-x));
  --dark-text-x:       101,71,53;
  --dark-text:         rgb(var(--dark-text-x));
  --dark-text-faint-x: 179,126,93;
  --dark-text-faint:   rgb(var(--dark-text-faint-x));
  --dark-text-muted-x: 115,81,69;
  --dark-text-muted:   rgb(var(--dark-text-muted-x));

  --light0-hard-x:     249,245,215;
  --light0-hard:       rgb(var(--light0-hard-x));
  --light0-x:          251,241,199;
  --light0:            rgb(var(--light0-x));
  --light0-soft-x:     242,229,188;
  --light0-soft:       rgb(var(--light0-soft-x));
  --light1-x:          235,219,178;
  --light1:            rgb(var(--light1-x));
  --light2-x:          213,196,161;
  --light2:            rgb(var(--light2-x));
  --light3-x:          189,174,147;
  --light3:            rgb(var(--light3-x));
  --light4-x:          168,153,132;
  --light4:            rgb(var(--light4-x));
  --light-text-x:      212,190,152;
  --light-text:        rgb(var(--light-text-x));

  --neutral-red-x:     234,105,98;
  --neutral-red:       rgb(var(--neutral-red-x));
  --neutral-green-x:   169,182,101;
  --neutral-green:     rgb(var(--neutral-green-x));
  --neutral-yellow-x:  231,138,78;
  --neutral-yellow:    rgb(var(--neutral-yellow-x));
  --neutral-blue-x:    125,174,163;
  --neutral-blue:      rgb(var(--neutral-blue-x));
  --neutral-purple-x:  211,134,155;
  --neutral-purple:    rgb(var(--neutral-purple-x));
  --neutral-aqua-x:    137,180,130;
  --neutral-aqua:      rgb(var(--neutral-aqua-x));

  --faded-red-x:       193,74,74;
  --faded-red:         rgb(var(--faded-red-x));
  --faded-green-x:     108,120,46;
  --faded-green:       rgb(var(--faded-green-x));
  --faded-yellow-x:    195,94,10;
  --faded-yellow:      rgb(var(--faded-yellow-x));
  --faded-blue-x:      69,112,122;
  --faded-blue:        rgb(var(--faded-blue-x));
  --faded-purple-x:    148,94,128;
  --faded-purple:      rgb(var(--faded-purple-x));
  --faded-aqua-x:      76,122,93;
  --faded-aqua:        rgb(var(--faded-aqua-x));

  /* @settings
name: Gruvbox Material Color Overrides
id: gruvbox-material-theme-override
settings:
- id: section-dark
title: Dark Theme
type: heading
level: 2
collapsed: true

- id: dark0-hard
title: Dark 0 Hard
type: variable-color
format: rgb
default: '#1d2021'
alt-format:
- id: dark0-hard-x
format: hex

- id: dark0
title: Dark 0
type: variable-color
format: rgb
default: '#282828'
alt-format:
- id: dark0-x
format: hex

- id: dark0-soft
title: Dark 0 Soft
type: variable-color
format: rgb
default: '#282828'
alt-format:
- id: dark0-soft-x
format: hex

- id: dark1
title: Dark 1
type: variable-color
format: rgb
default: '#3c3836'
alt-format:
- id: dark1-x
format: hex

- id: dark2
title: Dark 2
type: variable-color
format: rgb
default: '#504945'
alt-format:
- id: dark2-x
format: hex

- id: dark3
title: Dark 3
type: variable-color
format: rgb
default: '#665c54'
alt-format:
- id: dark3-x
format: hex

- id: dark4
title: Dark 4
type: variable-color
format: rgb
default: '#7c6f64'
alt-format:
- id: dark4-x
format: hex

- id: section-light
title: Light Theme
type: heading
level: 2
collapsed: true

- id: light0-hard
title: Light 0 Hard
type: variable-color
format: rgb
default: '#f9f5d7'
alt-format:
- id: light0-hard-x
format: hex

- id: light0
title: Light 0
type: variable-color
format: rgb
default: '#fbf1c7'
alt-format:
- id: light0-x
format: hex

- id: light0-soft
title: Light 0 Soft
type: variable-color
format: rgb
default: '#f2e5bc'
alt-format:
- id: light0-soft-x
format: hex

- id: light1
title: Light 1
type: variable-color
format: rgb
default: '#ebdbb2'
alt-format:
- id: light1-x
format: hex

- id: light2
title: Light 2
type: variable-color
format: rgb
default: '#d5c4a1'
alt-format:
- id: light2-x
format: hex

- id: light3
title: Light 3
type: variable-color
format: rgb
default: '#bdae93'
alt-format:
- id: light3-x
format: hex

- id: light4
title: Light 4
type: variable-color
format: rgb
default: '#a89984'
alt-format:
- id: light4-x
format: hex

- id: section-general
title: General Colors
type: heading
level: 2
collapsed: false

- id: gray
title: Gray
type: variable-color
format: rgb
default: '#928374'
alt-format:
- id: gray-x
format: hex

- id: section-general-text
title: Text Colors
type: heading
level: 3
collapsed: true

- id: dark-text
title: Dark Text
type: variable-color
format: rgb
default: '#654735'
alt-format:
- id: dark-text-x
format: hex

- id: dark-text-faint
title: Dark Text Faint
type: variable-color
format: rgb
default: '#b37e5d'

- id: dark-text-muted
title: Dark Text Muted
type: variable-color
format: rgb
default: '#73513c'
alt-format:
- id: dark-text-muted-x
format: hex

- id: light-text
title: Light Text
type: variable-color
format: rgb
default: '#d4be98'
alt-format:
- id: light-text-x
format: hex

- id: light-text-faint
title: Light Text Faint
type: variable-color
format: rgb
default: '#b37e5d'
alt-format:
- id: light-text-faint-x
format: hex

- id: light-text-muted
title: Light Text Muted
type: variable-color
format: rgb
default: '#73513c'
alt-format:
- id: light-text-muted-x
format: hex

- id: section-general-neutral
title: Neutral Colors
type: heading
level: 3
collapsed: true

- id: neutral-red
title: Red
type: variable-color
format: rgb
default: '#ea6962'
alt-format:
- id: neutral-red-x
format: hex

- id: neutral-green
title: Green
type: variable-color
format: rgb
default: '#a9b665'
alt-format:
- id: neutral-green-x
format: hex

- id: neutral-yellow
title: Yellow
type: variable-color
format: rgb
default: '#e78a4e'
alt-format:
- id: neutral-yellow-x
format: hex

- id: neutral-blue
title: Blue
type: variable-color
format: rgb
default: '#7daea3'
alt-format:
- id: neutral-blue-x
format: hex

- id: neutral-purple
title: Purple
type: variable-color
format: rgb
default: '#d3869b'
alt-format:
- id: neutral-purple-x
format: hex

- id: neutral-aqua
title: Aqua
type: variable-color
format: rgb
default: '#89b482'
alt-format:
- id: neutral-aqua-x
format: hex

- id: section-general-faded
title: Faded Colors
type: heading
level: 3
collapsed: true

- id: faded-red
title: Red
type: variable-color
format: rgb
default: '#c14a4a'
alt-format:
- id: faded-red-x
format: hex

- id: faded-green
title: Green
type: variable-color
format: rgb
default: '#6c782e'
alt-format:
- id: faded-green-x
format: hex

- id: faded-yellow
title: Yellow
type: variable-color
format: rgb
default: '#c35e0a'
alt-format:
- id: faded-yellow-x
format: hex

- id: faded-blue
title: Blue
type: variable-color
format: rgb
default: '#45707a'
alt-format:
- id: faded-blue-x
format: hex

- id: faded-purple
title: Purple
type: variable-color
format: rgb
default: '#945e80'
alt-format:
- id: faded-purple-x
format: hex

- id: faded-aqua
title: Aqua
type: variable-color
format: rgb
default: '#4c7a5d'
alt-format:
- id: faded-aqua-x
format: hex
*/
}

body {
  --accent-h: 166; /* --neutral-blue #7daea3 */
  --accent-s: 23%;
  --accent-l: 58%;

  --link-decoration:                none;
  --link-decoration-hover:          none;
  --link-external-decoration:       none;
  --link-external-decoration-hover: none;

  --tag-decoration:                 none;
  --tag-decoration-hover:           underline;
  --tag-padding-x:                  .5em;
  --tag-padding-y:                  .2em;
  --tag-radius:                     .5em;

  --tab-font-weight:                600;
  --bold-weight:                    600;

  --checkbox-radius:                0;

  /* --list-indent:                    2em; */

  --embed-border-left: 6px double var(--interactive-accent);
}

.theme-dark {
  --color-red-rgb:                 var(--neutral-red-x);
  --color-red:                     var(--neutral-red);
  --color-purple-rgb:              var(--neutral-purple-x);
  --color-purple:                  var(--neutral-purple);
  --color-green-rgb:               var(--neutral-green-x);
  --color-green:                   var(--neutral-green);
  --color-cyan-rgb:                var(--neutral-blue-x);
  --color-cyan:                    var(--neutral-blue);
  --color-blue-rgb:                var(--faded-blue-x);
  --color-blue:                    var(--faded-blue);
  --color-yellow-rgb:              var(--neutral-yellow-x);
  --color-yellow:                  var(--neutral-yellow);
  --color-orange-rgb:              var(--faded-yellow-x);
  --color-orange:                  var(--faded-yellow);
  --color-pink-rgb:                var(--neutral-purple-x);
  --color-pink:                    var(--neutral-purple);

  --background-primary:            var(--dark0);
  --background-primary-alt:        var(--dark0-soft);
  --background-secondary:          var(--dark0-hard);
  --background-secondary-alt:      var(--dark1);
  --background-modifier-border:    var(--dark1);
  --background-accent:             var(--dark0-soft);

  --cursor-line-background:        rgba(var(--dark1-x), 0.5);

  --text-normal:                   var(--light-text);
  --text-faint:                    var(--light1);
  --text-muted:                    var(--light2);

  --h1-color:                      var(--neutral-red);
  --h2-color:                      var(--neutral-yellow);
  --h3-color:                      var(--neutral-green);
  --h4-color:                      var(--neutral-aqua);
  --h5-color:                      var(--neutral-blue);
  --h6-color:                      var(--neutral-purple);

  --text-highlight-bg:             var(--neutral-yellow);
  --text-highlight-fg:             var(--dark0-hard);

  --text-accent:                   var(--neutral-yellow);
  --text-accent-hover:             var(--faded-yellow);

  --tag-color:                     var(--neutral-aqua);
  --tag-background:                var(--dark2);
  --tag-background-hover:          var(--dark1);

  --titlebar-text-color-focused:   var(--neutral-red);

  --inline-title-color:            var(--neutral-yellow);

  --bold-color:                    var(--neutral-yellow);
  --italic-color:                  var(--neutral-yellow);

  --checkbox-color:                var(--light4);
  --checkbox-color-hover:          var(--light4);
  --checkbox-border-color:         var(--light4);
  --checkbox-border-color-hover:   var(--light4);
  --checklist-done-color:          rgba(var(--light2-x), 0.5);

  --table-header-background:       rgba(var(--dark0-x), 0.2);
  --table-header-background-hover: var(--dark2);
  --table-row-even-background:     rgba(var(--dark2-x), 0.2);
  --table-row-odd-background:      rgba(var(--dark2-x), 0.4);
  --table-row-background-hover:    var(--dark2);

  --text-selection:                rgba(var(--neutral-red-x), 0.6);
  --flashing-background:           rgba(var(--neutral-red-x), 0.3);

  --code-normal:                   var(--neutral-blue);
  --code-background:               var(--dark1);

  --mermaid-note:                  var(--neutral-blue);
  --mermaid-actor:                 var(--dark2);
  --mermaid-loopline:              var(--neutral-blue);

  --icon-color-hover:              var(--neutral-red);
  --icon-color-focused:            var(--neutral-blue);

  --nav-item-color-hover:          var(--neutral-red);
  --nav-item-color-active:         var(--neutral-aqua);
  --nav-file-tag:                  rgba(var(--neutral-yellow-x), 0.9);

  --graph-line:                    var(--dark2);
  --graph-node:                    var(--light3);
  --graph-node-tag:                var(--neutral-red);
  --graph-node-attachment:         var(--neutral-green);

  --calendar-hover:                var(--neutral-red);
  --calendar-background-hover:     var(--dark1);
  --calendar-week:                 var(--neutral-orange);
  --calendar-today:                var(--neutral-orange);

  --dataview-key:                  var(--text-faint);
  --dataview-key-background:       rgba(var(--faded-red-x), 0.5);
  --dataview-value:                var(--text-faint);
  --dataview-value-background:     rgba(var(--neutral-green-x), 0.3);

  --tab-text-color-focused-active:         var(--neutral-yellow);
  --tab-text-color-focused-active-current: var(--neutral-red);
}

.theme-light {
  --color-red-rgb:                 var(--faded-red-x);
  --color-red:                     var(--faded-red);
  --color-purple-rgb:              var(--faded-purple-x);
  --color-purple:                  var(--faded-purple);
  --color-green-rgb:               var(--faded-green-x);
  --color-green:                   var(--faded-green);
  --color-cyan-rgb:                var(--neutral-blue-x);
  --color-cyan:                    var(--neutral-blue);
  --color-blue-rgb:                var(--faded-blue-x);
  --color-blue:                    var(--faded-blue);
  --color-yellow-rgb:              var(--neutral-yellow-x);
  --color-yellow:                  var(--neutral-yellow);
  --color-orange-rgb:              var(--faded-yellow-x);
  --color-orange:                  var(--faded-yellow);
  --color-pink-rgb:                var(--faded-purple-x);
  --color-pink:                    var(--faded-purple);

  --background-primary:            var(--light0-hard);
  --background-primary-alt:        var(--light0-hard);
  --background-secondary:          var(--light1);
  --background-secondary-alt:      var(--light1);
  --background-modifier-border:    var(--light2);
  --background-accent:             var(--light0-soft);

  --cursor-line-background:        rgba(var(--light1-x), 0.5);

  --text-normal:                   var(--dark-text);
  --text-faint:                    var(--dark-text-faint);
  --text-muted:                    var(--dark-text-muted);

  --h1-color:                      var(--faded-red);
  --h2-color:                      var(--faded-yellow);
  --h3-color:                      var(--faded-green);
  --h4-color:                      var(--faded-aqua);
  --h5-color:                      var(--faded-blue);
  --h6-color:                      var(--faded-purple);

  --text-highlight-bg:             var(--faded-yellow);
  --text-highlight-fg:             var(--light0-hard);

  --text-accent:                   var(--neutral-yellow);
  --text-accent-hover:             var(--faded-yellow);

  --tag-color:                     var(--faded-aqua);
  --tag-background:                var(--light1);
  --tag-background-hover:          rgba(var(--light1-x), 0.6);

  --titlebar-text-color-focused:   var(--bright-red);

  --inline-title-color:            var(--neutral-yellow);

  --bold-color:                    var(--faded-yellow);
  --italic-color:                  var(--faded-yellow);

  --checkbox-color:                var(--light4);
  --checkbox-color-hover:          var(--light4);
  --checkbox-border-color:         var(--light4);
  --checkbox-border-color-hover:   var(--light4);
  --checklist-done-color:          rgba(var(--dark2-x), 0.4);

  --table-header-background:       rgba(var(--light3-x), 0.4);
  --table-header-background-hover: var(--light2);
  --table-row-even-background:     rgba(var(--light1-x), 0.2);
  --table-row-odd-background:      rgba(var(--light1-x), 0.7);
  --table-row-background-hover:    var(--light2);

  --text-selection:                rgba(var(--neutral-red-x), 0.6);
  --flashing-background:           rgba(var(--neutral-red-x), 0.3);

  --code-normal:                   var(--neutral-blue);
  --code-background:               var(--light1);

  --mermaid-note:                  var(--neutral-blue);
  --mermaid-actor:                 var(--light3);
  --mermaid-loopline:              var(--faded-blue);

  --icon-color-hover:              var(--neutral-red);
  --icon-color-focused:            var(--neutral-blue);

  --nav-item-color-hover:          var(--neutral-red);
  --nav-item-color-active:         var(--faded-blue);
  --nav-file-tag:                  rgba(var(--faded-blue-x), 0.9);

  --graph-line:                    var(--light3);
  --graph-node:                    var(--gray);
  --graph-node-tag:                var(--faded-red);
  --graph-node-attachment:         var(--neutral-green);

  --calendar-hover:                var(--neutral-red);
  --calendar-background-hover:     var(--light1);
  --calendar-week:                 var(--neutral-red);
  --calendar-today:                var(--neutral-red);

  --dataview-key:                  var(--text-faint);
  --dataview-key-background:       rgba(var(--faded-red-x), 0.3);
  --dataview-value:                var(--text-faint);
  --dataview-value-background:     rgba(var(--neutral-green-x), 0.2);

  --tab-text-color-focused-active:         var(--neutral-yellow);
  --tab-text-color-focused-active-current: var(--neutral-red);
}

table {
  border: 1px solid var(--background-secondary) !important;
  border-collapse: collapse;
}

thead {
  border-bottom: 2px solid var(--background-modifier-border) !important;
}

th {
  font-weight: 600 !important;
  border: 1px solid var(--background-secondary) !important;
}

td {
  border-left: 1px solid var(--background-secondary) !important;
  border-right: 1px solid var(--background-secondary) !important;
  border-bottom: 1px solid var(--background-secondary) !important;
}

.markdown-rendered tbody tr:nth-child(even) {
  background-color: var(--table-row-even-background) !important;
}

.markdown-rendered tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd-background) !important;
}

.markdown-rendered tbody tr:nth-child(even):hover,
.markdown-rendered tbody tr:nth-child(odd):hover
{
  background-color: var(--table-row-background-hover) !important;
}

.markdown-rendered mark {
  background-color: var(--text-highlight-bg) !important;
  color: var(--text-highlight-fg) !important;
}

.markdown-rendered mark a {
  color: var(--red) !important;
  font-weight: 600;
}

.search-result-file-matched-text {
  color: var(--text-highlight-fg) !important;
}

.cm-hashtag-begin:hover,
.cm-hashtag-end:hover
{
  color: var(--text-accent);
  /* background-color: var(--tag-background-hover); */
  text-decoration: underline;
}

input[type=checkbox] {
  border: 1px solid var(--checkbox-color);
}

input[type=checkbox]:checked {
  background-color: var(--checkbox-color);
  box-shadow: inset 0 0 0 2px var(--background-primary);
}

input[type=checkbox]:checked:after {
  display: none;
}

code[class*="language-"],
pre[class*="language-"]
{
  line-height: var(--line-height-tight) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight {
  color: var(--text-highlight-fg) !important;
}

/* Keep inline code the same between viewer and editor. */
.cm-inline-code {
  border-radius: var(--radius-s);
  font-size: var(--code-size);
  padding: 0.1em 0.25em;
}

/* Keep list bullet padding the same between viewer and editor. */
.cm-formatting-list {
  padding-right: 4px !important;
}

/*
Keep sub-list indenting the same between viewer and editor.
This assumes --list-indent is default at 2em.
*/
/*
.cm-indent 
{
text-indent: 1em !important;
}
*/

.mermaid .note {
  fill: var(--mermaid-note) !important;
}

.mermaid .actor {
  fill: var(--mermaid-actor) !important;
}

.mermaid .loopLine {
  stroke: var(--mermaid-loopline) !important;
}

.calendar .week-num {
  color: var(--calendar-week) !important;
}

.calendar .today {
  color: var(--calendar-today) !important;
}

.calendar .week-num:hover,
.calendar .day:hover
{
  color: var(--calendar-hover) !important;
  background-color: var(--calendar-background-hover) !important;
}

.markdown-embed-title {
  color: var(--yellow);
  font-weight: 600 !important;
}

.cm-active {
  background-color: var(--cursor-line-background) !important;
}

.nav-file-tag {
  color: var(--nav-file-tag) !important;
}

.is-flashing {
  background-color: var(--flashing-background) !important;
}

.dataview.inline-field-key {
  border-top-left-radius: var(--radius-s);
  border-bottom-left-radius: var(--radius-s);
  padding-left: 4px;
  font-family: var(--font-monospace);
  font-size: var(--font-smaller);
  color: var(--dataview-key) !important;
  background-color: var(--dataview-key-background) !important;
}

.dataview.inline-field-value {
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
  padding-right: 4px;
  font-family: var(--font-monospace);
  font-size: var(--font-smaller);
  color: var(--dataview-value) !important;
  background-color: var(--dataview-value-background) !important;
}

.suggestion-highlight {
  color: var(--bright-red);
}

.cm-line .cm-strong {
  color: var(--bold-color) !important;
}

.cm-line .cm-em {
  color: var(--italic-color) !important;
}

/* === README ===
Snippet: MCL Multi Column / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay

Ver 0.10.0 (updated 2024-09-01)
- introduce fw dw and pw
- added left-right margin for Float Callout
- refactor List Column code to improve performance
Ver 0.9.10 (updated 2024-06-26)
- fix issues #81 and #89
Ver 0.9.9 (updated 2024-01-25)
- code cleanup (including -small -medium -large)
- improve css performance on float but require cssclass use again
Ver 0.9.8 (updated 2023-11-03)
- fixes on sub-callout becomes flexible height (and introduce option for such)
Ver 0.9.7 (updated 2023-10-13)
- GH FR issue #41, #42 and fixed GH issue #35. MC Callout now supports sub-blockquote and sub-paragraph
- GH FR issue #43. MC Callout now supports Multi Column within Multi Column
Ver 0.9.5 (updated 2023-07-30)
- fixes on minimal float affecting Minimal own wide table feature
- fixes on properties padding affecting Minimal
Ver 0.9.4 (updated 2023-07-06)
- improved MC Callout compatibility with Minimal theme V7.0
- improved MC Callout compatibility with Blue Topaz
Ver 0.9.3 (updated 2023-06-24)
- add support for List Column for li that's also a header
- fixes on column ruler to apply properly only for List Column on first ul only
- fixes on Float Callout in LP not floating due to additional div layer
Ver 0.9.2 (updated 2023-05-27)
- fix MC List Card mistakenly affect non List Card bullet list padding in same note
- fix obsidian default bullet "draw" not rendered properly in List Column (for the ones using tag and contextual typography plugin)
Ver 0.9.1 (updated 2023-04-06)
- fix MC "fixed center" option not properly coded
- fix MC List Grid previous not support sublist
- fix MC List Column margin top for first column
- fix MC List Grid for first bullet header
Ver 0.9.0 (updated 2023-04-01)
- MC - add option to hide SNW block ref for images in MC Callout
- MC - added wide option for List Grid/Card
- MC - added option to adjust float callout top margin
- MC - added fixed width option
- fix support minimal Callout style Outlined
- List Column/Grid/Card fully support :has()

What is this snippet for?
- to allow Obsidian users to change the layout with preset css by just specifying
the cssClass in the frontmatter (YAML) or naming the Callout block
- available cssClass
- cssClass: two-column-list
- cssClass: {.two-column-list-block}
- cssClass: three-column-list
- cssClass: {.three-column-list-block}
- cssClass: multi-column-list
- available Callout format
- [!multi-column]
- [!blank] / [!blank-container]

Compatibility
- tested to work fine with the following Community Theme
- Default Theme
- Big Sur / Blue Topaz / California Cost / Notation / Pisum / Prism / Things / Typewriter (with minor issue on title color)
- known to be not working
- Primary (due to the theme heaving theming, box-shadow and so on)

Credits
- Kevin Powell Youtube channel
- https://css-tricks.com/
- discord OMG members @Cáo thoát tục (Cáo thoát tục#6993), @mulfok (mulfok#6931) and @Rainbell (Rainbell#3617)
- kepano for accomodating my snippets adjustment
- trainbuffer for numerous help and assisted css snippets
*/



body{
  /* for list column, grid and card */
  --list-min-width: 200px;
  --col-rule-color: var(--background-modifier-border); /* #b3b3b3; */
  --col-rule-width: 1px;
  --list-grid-min-width: 250px;
  --list-grid-wide-min-width: 350px;

}
.theme-dark {
  /*	--background-mcl-card: hsl(300, 5%, 15%); */
}
.theme-light {
  /*	--background-mcl-card: hsl(300, 5%, 90%); */
}


/* === General === */

/* -- Fixed Width definition -- */
/* quadruple the last .callout to win specificity with main multi-column callout */
div[data-callout-metadata*="fw"].callout.callout.callout { flex-grow: 0; flex-shrink: 0;}
div[data-callout-metadata*="fw1"].callout.callout.callout.callout { flex-basis: 100px; width: 100px; }
div[data-callout-metadata*="fw2"].callout.callout.callout.callout { flex-basis: 200px; width: 200px; }
div[data-callout-metadata*="fw3"].callout.callout.callout.callout { flex-basis: 300px; width: 300px; }
div[data-callout-metadata*="fw4"].callout.callout.callout.callout { flex-basis: 400px; width: 400px; }
div[data-callout-metadata*="fw5"].callout.callout.callout.callout { flex-basis: 500px; width: 500px; }
div[data-callout-metadata*="fw6"].callout.callout.callout.callout { flex-basis: 600px; width: 600px; }
div[data-callout-metadata*="fw7"].callout.callout.callout.callout { flex-basis: 700px; width: 700px; }
div[data-callout-metadata*="fw8"].callout.callout.callout.callout { flex-basis: 800px; width: 800px; }
div[data-callout-metadata*="fw9"].callout.callout.callout.callout { flex-basis: 900px; width: 900px; }

div[data-callout-metadata*="pw1"].callout.callout.callout.callout { flex-basis: 10%; width: 10%; }
div[data-callout-metadata*="pw2"].callout.callout.callout.callout { flex-basis: 18%; width: 18%; }
div[data-callout-metadata*="pw3"].callout.callout.callout.callout { flex-basis: 28%; width: 28%; }
div[data-callout-metadata*="pw4"].callout.callout.callout.callout { flex-basis: 38%; width: 38%; }
div[data-callout-metadata*="pw5"].callout.callout.callout.callout { flex-basis: 48%; width: 48%; }
div[data-callout-metadata*="pw6"].callout.callout.callout.callout { flex-basis: 58%; width: 58%; }
div[data-callout-metadata*="pw7"].callout.callout.callout.callout { flex-basis: 68%; width: 68%; }
div[data-callout-metadata*="pw8"].callout.callout.callout.callout { flex-basis: 78%; width: 78%; }
div[data-callout-metadata*="pw9"].callout.callout.callout.callout { flex-basis: 88%; width: 88%; }


/* metadata "wide-x" to control subcallout flexible max width. only discrete 2,4,8,16 */
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="mw0"].callout.callout { flex-basis: 0; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw1"].callout { flex: 1 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw2"].callout { flex: 2 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw3"].callout { flex: 3 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw4"].callout { flex: 4 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw5"].callout { flex: 5 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw6"].callout { flex: 6 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw7"].callout { flex: 7 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw8"].callout { flex: 8 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw9"].callout { flex: 9 0 auto; }




/* === Multi Column Callout (MCC) === */
/* 	some issues still persists
(2) some theme uses transparency to affect .callout-title */

/* common MCC variables */
body {
  --mcc-img-snw-display: none;
  --callout-min-width: 200px;
  --callout-nowrap-min-width: 250px;
  --callout-gap: 1em;
  --callout-margin: 0px;
}
[data-callout="multi-column"].callout {
  --callout-blend-mode: normal;
}

/* -- Main MCC Code -- */

/* remove callout-title and make callout-content as part of main callout for box formatting */
div[data-callout="multi-column"].callout > .callout-title { display: none; }
div[data-callout="multi-column"].callout > .callout-content { display: contents; }
/* make the main callout a flex and remove box formatting */
/* --columns: unset to undo Sanctum's mod */
div[data-callout="multi-column"].callout
{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; --columns: unset; }
/* make the subcallout in flex column to allow growing vertically */
div[data-callout="multi-column"].callout .callout:not([data-callout="multi-column"]) { display: flex; flex-direction: column; }
div[data-callout="multi-column"].callout:not(.is-collapsed) .callout { margin-inline: var(--callout-margin); margin-block: var(--callout-margin); } /* to allow spacing for box shadow */
div[data-callout="multi-column"].callout .callout .callout-content { flex-grow: 1}

div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul,blockquote,p) { flex: 1 1 var(--callout-min-width); margin: 0;}

/* metadata "wide-x" to control subcallout flexible max width. only discrete 2,4,8,16 */
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="min-0"] { flex-basis: 0; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-2"] { flex-grow: 2; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-3"] { flex-grow: 3; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-4"] { flex-grow: 4; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-5"] { flex-grow: 5; }

@media (min-width: 500px) {
  /* .is-collapsed is used to draw the border-left only when it's collapsed */
  div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { box-shadow: unset; height: min-content;}
}

/* -- MCC Variant - Flexible Height for Subcallout / Children -- */
/* also useful if one wants to have non callout children like table and don't want to fill the height */
div[data-callout="multi-column"].callout {}
div[data-callout="multi-column"][data-callout-metadata*="flex-h"].callout { align-items: flex-start; }

/* -- MCC Variation - Fixed Columns -- */
div[data-callout="multi-column"][data-callout-metadata*="col3"]:not([data-callout-metadata*="icons"]).callout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* -- MCC Variation - Icons -- */

/* Main code */
div[data-callout="multi-column"][data-callout-metadata*="icons"] {

  &.callout { justify-content: center; }
  &.callout .callout { display: flex; flex-direction: row; flex-wrap: wrap; }
  &.callout.callout .callout-content > p { flex-grow: 1; text-align: center; }
  /* Options for number of columns */
  &[data-callout-metadata*="col2"].callout.callout .callout-content > p { flex-basis: 40%; }
  &[data-callout-metadata*="col3"].callout.callout .callout-content > p { flex-basis: 30%; }
  &[data-callout-metadata*="col4"].callout.callout .callout-content > p { flex-basis: 22%; }
  &[data-callout-metadata*="col5"].callout.callout .callout-content > p { flex-basis: 18%; }

  /* listive theme */
  &.callout p:first-child { margin-top: revert; }
}


/* -- MCC Variation - Fixed Width Option -- */
/* Fixed Width Option (using callout-metadata) */
div[data-callout="multi-column"][data-callout-metadata*="center-fixed"].callout { justify-content: center; }
div[data-callout="multi-column"][data-callout-metadata*="left-fixed"].callout { justify-content: flex-start; }
div[data-callout="multi-column"][data-callout-metadata*="right-fixed"].callout { justify-content: flex-end; }
div[data-callout="multi-column"][data-callout-metadata*="fixed"].callout > .callout-content > *:is(div,ul) { flex-grow: 0; }

/* Callout size for Fixed Width Option */
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="small"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-small-width) * 0.5 ); }
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="medium"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-medium-width) * 0.65); }
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="large"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-large-width) * 0.8); }


/* -- MCC Variation - No Wrap Option -- */

/* No-Wrap Option (using callout-metadata) - for single row with horizontal scrollbar */
div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout {
  flex-wrap: nowrap; overflow-x: scroll;
  & > .callout-content > *:is(div,ul) { flex-shrink: 0; }
}

/* No-Wrap Option, Width Options. Legacy width option. better to dw, pw and fw options at the top */
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="small"] { flex-basis: 300px; }
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="medium"] { flex-basis: 400px; }
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="large"] { flex-basis: 600px; }

/* Align center for items in callout */
div[data-callout="multi-column"] .callout[data-callout-metadata*="center"] { text-align: center; }


/* -- Special Adjustment for Community Themes -- */

/* Special Adjustment -- for theme with negative margin & box shadow. (e.g. Prism) */
div[data-callout="multi-column"].callout > .callout-content { margin-top: unset;}
div[data-callout="multi-column"].callout:not(.is-collapsed) { box-shadow: unset;}

/* Blue Topaz - remove box shadow from main [!multi-column] */
body[class*="notebook-liked-markdown-page"].shade-callout-style .callout[data-callout="multi-column"] { box-shadow: unset !important; }

/* Special Adjustment -- for minimal left margin *//*
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout="multi-column"].callout
{ width: 100%; max-width: 100%; margin-inline: 0 !important; }

/* Minimal -  .dataview.list-view-ul width - Minimal set the width with --line-width-adaptive (40rem by default) */
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) div[data-callout="multi-column"].callout .dataview.list-view-ul {width: auto;}

/* Minimal -- Callout Outline, to ensure sub-callout not overlapped and hidden */
.callouts-outlined div[data-callout="multi-column"].callout:not(.is-collapsed) .callout:not([data-callout="multi-column"]) {
  margin-top: 1em;
}


/* -- Special Adjustment for Plugins / Markdown Elements -- */

/* SNW plugin */
div[data-callout*="multi-column"].callout .callout-content span.image-embed + .snw-reference { display: var(--mcc-img-snw-display); }




/* === Blank Container "DIV"'s - can be used with Main Multi-Column layout above === */

/* "blank-container" - no bg, no border, no title, no nothing, and remove the ligthen effect */
div[data-callout*="blank"].callout {--callout-blend-mode: normal;}
div[data-callout*="blank"].callout > .callout-title { display: none; }
div[data-callout*="blank"].callout > .callout-content {display: contents;}
div[data-callout*="blank"].callout { border: 0; padding-top: 0; padding-inline: 5px; background: unset; box-shadow: unset; }

/* -- No Margin -- */
/* issues still persists
- headers font size not same
- "no-margin" not fully workable in editing view due to wide-page override for Minimal theme
*/
div[data-callout-metadata*="no-margin"]:is(.cm-callout, .callout.callout, .callout.callout .callout-content) {margin: 0; padding: 0;}

/* -- No Margin for only child -- */
div[data-callout*="blank"].callout .callout-content > p:only-child {
  margin-block: 0;
}


/* -- Special Adjustment for Themes -- */

/* Mado. Remove  theme's pseudo left border */
div[data-callout*="blank"] .callout-content::before { display: none; }


/* === Text Justify === */

.text-justify :is(.markdown-preview-view p,.markdown-source-view .cm-line) { text-align: justify; }


/* === Floating Callout - Base === */
/* float uses callout-metadata to control the layout. can apply to any callout */

/* variables */
body {
  --float-small-width: 300px;
  --float-medium-width: 400px;
  --float-large-width: 600px;

  --float-left-callout-margin: 0 15px 0 0;
  --float-right-callout-margin: 0 0 0 15px;
  --float-callout-top-margin: 0em;
  --float-callout-bottom-margin: 0em;
  --float-callout-snw-display: none;
}
/* variables */
body {
  --float-left-callout-margin-inline: 0 12px;
  --float-right-callout-margin-inline: 12px 0;
  --float-snw-display: none;
}


/* -- Main Code. Use media query so that floats only works when there's enough width */
@media (min-width: 500px){
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) { display: inline; z-index: 30;}
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > div > .callout { float: left; z-index: 30; }
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > .edit-block-button { display: none; }
  .markdown-reading-view div[data-callout-metadata*="left"].callout {float: left;}

  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) { display: inline; z-index: 30;}
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > div > .callout { float: right; z-index: 30; }
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > .edit-block-button { display: none; }
  .markdown-reading-view div[data-callout-metadata*="right"].callout {float: right; }

  .markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .callout-content > p:last-of-type { margin-bottom: auto;}

  [data-callout-metadata*="float-right"].cm-embed-block.cm-callout {width: auto !important;}

  /* remove margin from first para in the float callout */
  .callout:is(div[data-callout-metadata*="left"],div[data-callout-metadata*="right"]) .callout-content > :is(p:first-child,ul:first-child,ol:first-child) {margin-top: 0;}

  /* Adjustable Gap */
  /* 26Mar2023 only top for now, to work on left-right later */
  .markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"]),
  .markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="right"])
  { margin-top: calc(1em * var(--line-height-normal) + var(--float-callout-top-margin)); }

  /**/
  .markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"]),
  .markdown-reading-view div[data-callout-metadata*="left"].callout {
    margin-inline: var(--float-left-callout-margin-inline);
  }
  .markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="right"]),
  .markdown-reading-view div[data-callout-metadata*="right"].callout {
    margin-inline: var(--float-right-callout-margin-inline);
  }
}

/* -- FC Size Options -- */

/* legacy width option. better to dw, pw and fw options at the top */
[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
[data-callout-metadata*="-large"].callout {width: var(--float-large-width);}


/* -- Special Adjustment for Plugins / Markdown Elements -- */

/* Option for Caption */
div:is([data-callout-metadata*="caption"]).callout > .callout-content > p .image-embed[alt]:not([alt$=".png"], [alt$=".jpg"], [alt$=".jpeg"], [alt$=".tiff"])::after {content: attr(alt); text-align: center; display: block; font-style: italic; color: var(--text-muted); }
div:is([data-callout-metadata*="caption"]).callout > .callout-content > p img:not(.emoji) { display: block; margin-right: auto; margin-left: auto;}

/* Introduce clear to break the float */
/* .markdown-preview-view h2, *//* remove this as it has weird spacing effect */
.embedded-backlinks { clear: both; }

/* for Blockquote underlap the float layout -- to remove by 30Jun2024, no longer needed */
/* .markdown-preview-view :is(blockquote) { overflow-x: auto; } /* fix for blockquote underlap */
/* .markdown-preview-view :is(p) { overflow: unset; } /* fix for para not wrapping around float. applicable for Willemstad */

/* for SNW plugin */
div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .snw-embed-preview { display: var(--float-callout-snw-display); width: min-content; height: min-content; }
div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}


/* -- Special Adjustment for Themes -- */

/* Minimal. Minimal Float. Updated for Minimal V7.4.7 */
/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclass ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) */
.minimal-float.markdown-source-view.mod-cm6 {
  .cm-sizer {
    max-width: var(--max-width); width: var(--line-width);
  }
  .cm-contentContainer.cm-contentContainer > .cm-content > div,
  .cm-sizer > .embedded-backlinks,
  .cm-sizer > .inline-title,
  .cm-sizer > .metadata-container {
    max-width: none; width: auto;
  }
}

/* Minimal. Previous Minimal Float but with performance issue. Kept for reference until 30 June 2024 */ /*
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer { max-width: var(--max-width); width: var(--line-width); }

:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer>.cm-content>div,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.embedded-backlinks,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.inline-title,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.metadata-container
{ max-width: none; width: auto; }


/* Minimal - fix to support Breadcrumbs plugin. Sub to the above LP float fix for Minimal */
body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }

/* Minimal - Size Option fix due to !important */
/* Minimal. Uses body[class*="minimal-tab-title"] as identifier. To override (have higher specificity) the width param. Can be merged to main code later on */
@media (min-width: 500px){
  body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="small"].callout { width: var(--float-small-width) !important; margin-left: 0 !important; }
  body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="medium"].callout { width: var(--float-medium-width) !important; margin-left: 0 !important; }
}
@media (min-width: 750px){
  body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="large"].callout { width: var(--float-large-width); margin-left: 0 !important; }
}


/* === List Column ===*/
/* supported for (1) css :has(), (2) yaml cssclass, (3) CT plugin, and (4) MA plugin
- CSS :has() can be applied to sublists, so no column rule. CT plugin apply to div that houses the ul, so column gap is different
- xx-column-list for first level only list, but apply anywhere but xx-column-list-block apply at block level. Both require JV's Markdown Attributes plugin
*/


/* -- List Column/Grid/Card general styling -- */

/* hide tag in rendered view, dim it in edit mode and small size */
:is(div[class*="mcl"].markdown-rendered, .markdown-rendered) a[href*="#mcl"] {display: none;}
/* :is(div[class*="mcl"].markdown-rendered, .markdown-rendered div[class*="mcl"]) a[href*="#mcl"] {display: none;} */
.cm-s-obsidian .HyperMD-list-line span[class*="mcl"] {background-color: var(--background-primary) !important; color: var(--text-faint); font-size: 0.9rem; }


/* -- List Column using YAML cssclass and Markdown Attributes i.e. {.three-column-list-block} -- */

/* define the column gap and column rule */
.two-column-list div > ul,   .two-column-list-block,
.three-column-list div > ul,  .three-column-list-block,
.four-column-list div > ul,  .four-column-list-block,
.multi-column-list div > ul,  .multi-column-list-block
{ column-gap: 3rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }

/* define the column count, for fixed number of columns, to subject it to note's width (in future can use @container when installer v1.2.7 widely used ) */
@media (min-width: 500px ){
  .two-column-list div > ul,   .two-column-list-block {columns: 2; }
  .three-column-list div > ul,  .three-column-list-block {columns: 3; }
  .four-column-list div > ul,  .four-column-list-block {columns: 4; }
}
.multi-column-list div > ul,  .multi-column-list-block { column-width: var(--list-min-width); }

/* Special adjustment for footnotes applied with -colum-list-block -- obsidian creates a <br> tag at the last <li> */
.footnotes [class$="-column-list-block"] li:last-of-type br:last-of-type {display: none;}


/* -- List Column Using Tag (using CSS has) -- */

/* set the column rules at ul level and adjust the margin */
ul:has(> li > [data-heading] > [href*="#mcl/list-column"]),
ul:has(> li > [href*="#mcl/list-column"]) {
  margin-top: 0;
  column-width: var(--list-min-width); column-gap: 1rem;
  column-rule: var(--col-rule-width) solid var(--col-rule-color);
}

/* give some margin for the div, for first ul only */
div:has(> ul > li > [href*="#mcl/list-column"]),
div:has(> ul > li > [data-heading] > [href*="#mcl/list-column"])
{ margin-top: 0.8em; }

/* readjust [!blank] display contents */
div[data-callout*="blank"] > .callout-content:has(li [href*="#mcl/list-column"]) {display: block; margin: 0; padding: 0; }


/* -- General Adjustment for List Column -- */

/* Adjustment for misaligned bullets (this is a hack, need to find better solution later) */
ul:has([href="#mcl/list-column"]) li > .list-bullet::after, /* :has() */
.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclass */
.tag-mcllist-column ul li > .list-bullet::after, /* contextual typography */
ul[class*="column-list"] li > .list-bullet::after /* markdown attributes */
{ position: relative; }


/* -- Special Adjustment for Plugins for List Column -- */

/* for Custom Classes */
div.cc-container:has(li > [href="#mcl/list-column"]) { width: 100%; }



/* === List Grid (using hashtag) === */
/* supported (1) :has() and (2) Contextual Typography plugin */

/* -- Main Code -- */

ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]),
ul:has(> li > [href*="#mcl/list-grid"]),
div[class*="mcllist-grid"] ul:first-child
{ display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); }

ul:has(> li > [data-heading] > [href*="#mcl/list-grid-wide"]),
ul:has(> li > [href*="#mcl/list-grid-wide"]),
div[class*="mcllist-grid-wide"] ul:first-child
{ grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-wide-min-width),1fr)); }

ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
ul:has(> li > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
div[class*="mcllist-grid"] ul:first-child > li:not(:last-of-type)
{ padding-right: 1.6em; }

ul:has(> li > [data-heading] > [href*="#mcl/list-grid-sm"]),
ul:has(> li > [href*="#mcl/list-grid-sm"]),
div[class*="mcllist-grid-sm"] ul:first-child
{ --list-grid-min-width: 20%; }


/* - dashboard style, page level only, apply to any first level */
/* -- applicable only when width > 400pt, else just single column */
/* grid list block level cannot be done, it breaks formatting */
@media (min-width: 500px) {
  .two-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(2,1fr);}
}
@media (min-width: 600px) {
  .three-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(3,1fr);}
}

body {
  --mcl-card-header-border-width: 1px;
  --mcl-card-bg-color: var(--background-secondary);
  --mcl-card-gap: 0.2em;
  --mcl-card-border-width: 1px;
  --mcl-card-border-color: var(--background-modifier-border);
}

/* -- Main Code -- */

/* make the list grid, remove some ul padding */

:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), [class*="mcllist-card"]) ul:first-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); margin-block-start: 0.5em; }
:is(div:has(> ul [data-heading*="#mcl/list-card-wide"]), [class*="mcllist-card-wide"]) ul:first-child { grid-template-columns: repeat(auto-fit, minmax(var(--list-grid-wide-min-width),1fr));}
/* unindent first level bullet */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) { padding-left: 0.1em; } /* with v1.6 this is somewhat redundant */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) > li { margin-inline-start: 0; }
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul { padding-left: 0; }
:is(.is-mobile .markdown-preview-section) :is(div:has([data-heading*="#mcl/list-card"]), .tag-mcllist-card) :is(ol:not(ol ol ol),  ul:not(ul ul ul)) {padding-left: 0;}
/* reposition the collapse indicator and hover behaviour */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li {position: relative;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:hover > .collapse-indicator,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li:hover > .collapse-indicator {opacity: 1;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > .collapse-indicator,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li > .collapse-indicator {position: absolute; right: 0.7em; padding-right: 0;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul::before {display: none;}
/* decorate the first heading for cards */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:not(.is-collapsed) > [data-heading] {border-bottom: var(--mcl-card-header-border-width) solid var(--mcl-card-border-color); margin-bottom: 0.2em;}
/* hide the list bullet for list-card for first and second level */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li::before,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li::before,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li > .list-bullet::after {visibility: hidden;}
/* remove the indentation guide */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul ul ul)::before {--indentation-guide-width: 0;}
.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ul::before,
.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ol::before {border-right: 0; border-left: 0; }
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li {list-style: none;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li li li {list-style: circle;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) .callout ul:not(ul ul) > li,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li
{ margin-inline: var(--mcl-card-gap); margin-bottom: calc(var(--mcl-card-gap)*2); padding: 0.3em 0.5em; outline: var(--mcl-card-border-width) solid var(--mcl-card-border-color); border-radius: 0.5em; background-color: var(--mcl-card-bg-color);}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li img {width: 100%;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul img {margin: 0; float: none;}

.markdown-rendered .tag-mcllist-card ul img[alt*=right] {margin: 0;}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
}

.infobg {
  border-radius: 8px;
  background-color: rgba(var(--color-orange-rgb), 0.1);
}

.card {
  display: flex;
  align-items: center;
  background-color: var(--background-primary);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--background-primary-alt) inset;
  transition: all 0.2s ease;
}
.card:hover {
  background: var(--background-secondary);
  box-shadow: 0 0 0 1px var(--text-accent) inset;
  transform: translateY(-2px);
}

.icon {
  padding-right: 0.5rem;
}

.site-footer a {
  display: block !important;
  text-align: center;
  padding: 1em 1em;
  margin-top: 3em;
}

.footer-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.footer-social-links svg {
  width: 22px;
  height: 22px;
  fill: var(--text-muted);
  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
}

.footer-social-links a:hover svg {
  fill: var(--text-accent);
  transform: scale(1.15);
}

.published-container.is-readable-line-width .site-body-left-column {
  --sidebar-left-width: 240px;
  flex-basis: calc((90vw - var(--page-width)) / 2);
}