/* hide page before it is loaded */
/* html { visibility: hidden; background-color: black; } */

/* remove canvas controls */
.canvas-card-menu {
	display: none;
	cursor: default !important;

}

.canvas-controls {
	display: none;
	cursor: default !important;

}

.canvas-node-connection-point 
{
	display: none;
	cursor: default !important;

}

.canvas-menu-container {
	display: none;
}

.canvas-node-content-blocker
{
	display: none;
	cursor: pointer !important;
}

.canvas-wrapper
{
	position: relative;
	cursor: default !important;
}

.canvas-node-resizer
{
	cursor: default !important;
}

.canvas-node-container
{
	cursor: default !important;
}

/* fix coloring for horizontal divider */
hr
{
	border-top: var(--hr-thickness) solid var(--divider-color);
}

/* sidebars */
.sidebar-left,  .sidebar-right {
    background-color: var(--background-secondary);
    flex: 1 0 fit-content;
}

.sidebar-left
{
    border-right: 1px dashed var(--divider-color);
	z-index: 1000;
}

.sidebar-right
{
    border-left: 1px dashed var(--divider-color);
	z-index: 1000;
}

.flex-container
{
    background-color: var(--background-primary);
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.markdown-reading-view
{
    align-self: center;
    -ms-flex-align: center;
    width: 100%;
}

/* Small fix for exporting kanban files */
.markdown-preview-view.kanban-plugin__markdown-preview-view {
    font-family: var(--font-text, var(--default-font));
    font-size: .875rem;
    line-height: var(--line-height-tight);
    padding: unset;
    width: unset;
    height: unset;
    position: unset;
    overflow-y: unset;
    overflow-wrap: unset;
    color: unset;
    user-select: unset;
    -webkit-user-select: unset;
}

.kanban-plugin__item-button-wrapper, .kanban-plugin__lane-grip, .kanban-plugin__lane-settings-button.clickable-icon, .kanban-plugin__item-postfix-button.clickable-icon
{
    display: none;
}

@media print 
{
    #sidebar, .sideabr-right, .sidebar-left, .outline-container, .theme-toggle, .theme-toggle-inline, .toggle__fill, .toggle__input
    {
        display: none !important;
    }
}
/*
@media screen and (max-width: 900px)
{
    #sidebar, .sideabr-right, .sidebar-left, .outline-container
    {
        display: none !important;
    }
}

@media screen and (max-width: 1200px)
{
    .sidebar-left
    {
        display: none !important;
    }
}
*/

.outline-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0.3em;
    margin-left: 10px;
    margin-right: 10px;
}

.outline-item:last-child 
{
    margin-bottom: 0;
}

.outline-container {
    width: 380px;
    margin: 10px;
    margin-right: auto;
    height: fit-content;
    line-height: var(--line-height-tight);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
    padding-bottom: 20px;
}

.outline-item-contents {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0.3em;
    border-radius: 0.4em;
    color: var(--nav-item-color);
	text-decoration: none;
    width: 100%;
}

.outline-item-contents:hover 
{
    background-color: var(--nav-item-background-hover);
    color: var(--nav-item-color-hover);
	text-decoration: none;
    cursor: pointer;
}

.outline-item-contents:active
{
    background-color: var(--nav-item-background-active);
    color: var(--nav-item-color-active);
	text-decoration: none;
    cursor: pointer;
}

span.outline-item-title {
    margin-left: 0.5em;
    text-decoration: none;
    color: inherit;
}

span.outline-item-title:hover 
{
    color: inherit;
    text-decoration: none;
}

.outline-item-children {
    border-left: 1px solid var(--divider-color);
    margin-left: 10px;
    width: 100%;
}

.outline-header 
{
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.outline-item.is-collapsed .collapse-icon svg.svg-icon
{
    color: var(--color-accent);
}


/* Let links wrap anywhere so that the width isn't set by long links */
a {
    overflow-wrap: anywhere;
}

/* mobile support for obsidian columns plugin */
.columnParent {
    display: flex;
    padding: 15px 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.columnParent {
    white-space: normal;
}

.cm-preview-code-block .admonition-content .columnParent p {
    white-space: pre-wrap;
}

.columnChild {
    flex-grow: 1;
    flex-basis: 0px;
}

/* sortable plugin fix */
.markdown-preview-view th,
.table-view-table > thead > tr > th,
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th {
    /* background-image: none;
    background-repeat: no-repeat;
    background-position: right, left;
    padding-right: 21px;
    padding-left: 21px; */
    cursor: pointer;
}

th[sortable-style="sortable-asc"], th[sortable-style="sortable-desc"]
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: left;
}

th[sortable-style="sortable-asc"]::after 
{
    height: 100%;
    position: relative;
    content: "▲";
    display: flex;
}

th[sortable-style="sortable-desc"]::after {
    height: 100%;
    position: relative;
    content: "▼";
    display: flex;
}

/* Toggle Styles */
.theme-toggle {
    --toggle-width: 42px; /* 50 px */
    --toggle-height: calc(var(--toggle-width) / 2.0);
    --border-radius: calc(var(--toggle-height) / 2);
    --handle-width: calc(var(--toggle-height) * 0.6);
    --handle-radius: calc(var(--handle-width) / 2);
    --handle-margin: calc((var(--toggle-height) - var(--handle-width)) / 2);
    --handle-translation: calc(var(--toggle-width) - var(--handle-width) - (var(--handle-margin) * 2));

    display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

.theme-toggle-inline {
    --toggle-width: 50px;
    --toggle-height: calc(var(--toggle-width) / 2.2);
    --border-radius: calc(var(--toggle-height) / 2);
    --handle-width: calc(var(--toggle-height) * 0.6);
    --handle-radius: calc(var(--handle-width) / 2);
    --handle-margin: calc((var(--toggle-height) - var(--handle-width)) / 2);
    --handle-translation: calc(var(--toggle-width) - var(--handle-width) - (var(--handle-margin) * 2));

    display: inline-block;
    cursor: pointer;
    position: relative;

    margin-top: 10px;
    margin-bottom: 10px;
}

/* animation to expand width, move handle, then contract width */
@keyframes toggle-slide-right
{
    0%
    {
        width: var(--handle-width);
        transform: translateX(0);
    }
    50%
    {
        width: calc(var(--toggle-width) * 0.5);
    }
    90%
    {
        width: var(--handle-width);
    }
    100%
    {
        transform: translateX(var(--handle-translation));
    }
}

@keyframes toggle-slide-left
{
    0%
    {
        width: var(--handle-width);
        transform: translateX(calc(var(--handle-translation) - ((var(--toggle-width) * 0.33) - var(--handle-width))));
    }
    70%
    {
        width: calc(var(--toggle-width) * 0.5);
    }
    100%
    {
        width: var(--handle-width);
        transform: translateX(0);
    }
}

/* just exapnd and contract */
@keyframes toggle-expand-right
{
    0%
    {
        width: var(--handle-width);
    }
    100%
    {
        width: calc(var(--toggle-width) * 0.33);
    }
}

@keyframes toggle-expand-left
{
    0%
    {
        width: var(--handle-width);
        transform: translateX(var(--handle-translation));
    }
    100%
    {
        width: calc(var(--toggle-width) * 0.33);
        transform: translateX(calc(var(--handle-translation) - ((var(--toggle-width) * 0.33) - var(--handle-width))));
    }
}

@keyframes toggle-contract
{
    0%
    {
        width: calc(var(--toggle-width) * 0.33);
    }
    100%
    {
        width: var(--handle-width);
    }
}

.toggle__input {
    display: none;
    z-index: 1000;
}

/* Fill in dark mode / default */
.toggle__fill {
    position: relative;
    width: var(--toggle-width);
    height: var(--toggle-height);
    border-radius: var(--border-radius);
	background-color: var(--background-primary-alt);

    transition: background-color 0.2s;
    z-index: 1000;

    box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.4);

	border: 1px solid var(--divider-color);

}

.theme-light .toggle__fill 
{
    box-shadow: inset 0px 0px 5px 2px hsla(var(--color-accent-hsl), 0.15);
}

/* Handle default */
.toggle__fill::before 
{
    content: "";
    position: absolute;
    left: var(--handle-margin);
    top: calc(var(--handle-margin) * 0.75);
    height: var(--handle-width);
    width: var(--handle-width);
    
    border-radius: var(--handle-radius);
    background-color: var(--text-normal);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
    animation: toggle-slide-left 0.2s ease-in-out normal both;

    z-index: 1000;
}

/* handle light*/
.toggle__input:checked ~ .toggle__fill::before 
{
    animation: toggle-slide-right 0.2s ease-in-out normal both;
}

.toggle__input:active ~ .toggle__fill::before 
{
    animation: toggle-expand-right 0.2s ease-in-out normal both;
}

.toggle__input:active:checked ~ .toggle__fill::before
{
    animation: toggle-expand-left 0.2s ease-in-out normal both;
}

/* sun moon icon icon default */
.toggle__fill::after
{
    content: "";
    position: absolute;
    right: var(--handle-margin);
    top: calc(var(--handle-margin) * 0.75);
    height: var(--handle-width);
    width: var(--handle-width);
    scale: 90%;
    transition: transform 0.3s;

    background: url('https://api.iconify.design/lucide/moon.svg?color=white') no-repeat center center;
}

/* sun moon icon icon light */
.toggle__input:checked ~ .toggle__fill::after
{
    transform: translate3d(calc(var(--handle-translation) * -1), 0, 0);
    background: url('https://api.iconify.design/lucide/sun.svg') no-repeat center center;
}

/** Live Preview padding fixes, specifically for DataviewJS custom HTML elements. */
.is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span {
    line-height: 1.0;
}

.block-language-dataview {
    overflow-y: auto;
}

/*****************/
/** Table Views **/
/*****************/

/* List View Default Styling; rendered internally as a table. */
.table-view-table {
    width: 100%;
}

.table-view-table > thead > tr, .table-view-table > tbody > tr {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

.table-view-table > tbody > tr:hover {
    background-color: var(--text-selection) !important;
}

.table-view-table > thead > tr > th {
    font-weight: 700;
    font-size: larger;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid;

    max-width: 100%;
}

.table-view-table > tbody > tr > td {
    text-align: left;
    border: none;
    font-weight: 400;
    max-width: 100%;
}

.table-view-table ul, .table-view-table ol {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Rendered value styling for any view. */
.dataview-result-list-root-ul {
    padding: 0em !important;
    margin: 0em !important;
}

.dataview-result-list-ul {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Generic grouping styling. */
.dataview.result-group {
    padding-left: 8px;
}

/*******************/
/** Inline Fields **/
/*******************/

.dataview.inline-field-key {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-primary-alt);
    color: var(--text-nav-selected);
}

.dataview.inline-field-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--text-nav-selected);
}

.dataview.inline-field-standalone-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--text-nav-selected);
}

/***************/
/** Task View **/
/***************/

.dataview.task-list-item, .dataview.task-list-basic-item {
    margin-top: 3px;
    margin-bottom: 3px;
    transition: 0.4s;
}

.dataview.task-list-item:hover, .dataview.task-list-basic-item:hover {
    background-color: var(--text-selection);
    box-shadow: -40px 0 0 var(--text-selection);
    cursor: pointer;
}

/*****************/
/** Error Views **/
/*****************/

div.dataview-error-box {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px dashed var(--background-secondary);
}

.dataview-error-message {
    color: var(--text-muted);
    text-align: center;
}

/*************************/
/** Additional Metadata **/
/*************************/

.dataview.small-text {
    font-size: smaller;
    color: var(--text-muted);
    margin-left: 3px;
}

.dataview.small-text::before {
	content: "(";
}

.dataview.small-text::after {
	content: ")";
}
.obsidian-icon {
  font-size: inherit;
  display: inline-block;
  width: 2rem !important;
  text-align: center;
  /* margin-right: -0.5rem !important; */
}

p .obsidian-icon {
  width: 1.75rem !important;
}

.obsidian-icon.react-icon > svg {
  vertical-align: middle;
  margin-bottom: 3px;
}
/* Default abcjs styles look good. Just adapting it to the current theme.  */

.abcjs-container svg path {
  fill: var(--text-normal);
}

.abcjs-container svg text {
  fill: var(--text-normal);
}

.abcjs-brace {
  stroke: var(--text-normal);
}

.obsidian-plugin-abcjs-error {
  background-color: #E74C3C;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  text-align: center
}


/** Live Preview padding fixes, specifically for DataviewJS custom HTML elements. */
.is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span {
    line-height: 1.0;
}

.block-language-dataview {
    overflow-y: auto;
}

/*****************/
/** Table Views **/
/*****************/

/* List View Default Styling; rendered internally as a table. */
.table-view-table {
    width: 100%;
}

.table-view-table > thead > tr, .table-view-table > tbody > tr {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

.table-view-table > tbody > tr:hover {
    background-color: var(--text-selection) !important;
}

.table-view-table > thead > tr > th {
    font-weight: 700;
    font-size: larger;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid;

    max-width: 100%;
}

.table-view-table > tbody > tr > td {
    text-align: left;
    border: none;
    font-weight: 400;
    max-width: 100%;
}

.table-view-table ul, .table-view-table ol {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Rendered value styling for any view. */
.dataview-result-list-root-ul {
    padding: 0em !important;
    margin: 0em !important;
}

.dataview-result-list-ul {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Generic grouping styling. */
.dataview.result-group {
    padding-left: 8px;
}

/*******************/
/** Inline Fields **/
/*******************/

.dataview.inline-field-key {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-primary-alt);
    color: var(--text-nav-selected);
}

.dataview.inline-field-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--text-nav-selected);
}

.dataview.inline-field-standalone-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--text-nav-selected);
}

/***************/
/** Task View **/
/***************/

.dataview.task-list-item, .dataview.task-list-basic-item {
    margin-top: 3px;
    margin-bottom: 3px;
    transition: 0.4s;
}

.dataview.task-list-item:hover, .dataview.task-list-basic-item:hover {
    background-color: var(--text-selection);
    box-shadow: -40px 0 0 var(--text-selection);
    cursor: pointer;
}

/*****************/
/** Error Views **/
/*****************/

div.dataview-error-box {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px dashed var(--background-secondary);
}

.dataview-error-message {
    color: var(--text-muted);
    text-align: center;
}

/*************************/
/** Additional Metadata **/
/*************************/

.dataview.small-text {
    font-size: smaller;
    color: var(--text-muted);
    margin-left: 3px;
}

.dataview.small-text::before {
	content: "(";
}

.dataview.small-text::after {
	content: ")";
}
.obsidian-icon {
  font-size: inherit;
  display: inline-block;
  width: 2rem !important;
  text-align: center;
  /* margin-right: -0.5rem !important; */
}

p .obsidian-icon {
  width: 1.75rem !important;
}

.obsidian-icon.react-icon > svg {
  vertical-align: middle;
  margin-bottom: 3px;
}
/* Default abcjs styles look good. Just adapting it to the current theme.  */

.abcjs-container svg path {
  fill: var(--text-normal);
}

.abcjs-container svg text {
  fill: var(--text-normal);
}

.abcjs-brace {
  stroke: var(--text-normal);
}

.obsidian-plugin-abcjs-error {
  background-color: #E74C3C;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  text-align: center
}


.block-language-dataview {
    overflow-y: auto;
}

/*****************/
/** Table Views **/
/*****************/

/* List View Default Styling; rendered internally as a table. */
.table-view-table {
    width: 100%;
}

.table-view-table > thead > tr, .table-view-table > tbody > tr {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

.table-view-table > tbody > tr:hover {
    background-color: var(--table-row-background-hover);
}

.table-view-table > thead > tr > th {
    font-weight: 700;
    font-size: larger;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid;

    max-width: 100%;
}

.table-view-table > tbody > tr > td {
    text-align: left;
    border: none;
    font-weight: 400;
    max-width: 100%;
}

.table-view-table ul, .table-view-table ol {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Rendered value styling for any view. */
.dataview-result-list-root-ul {
    padding: 0em !important;
    margin: 0em !important;
}

.dataview-result-list-ul {
    margin-block-start: 0.2em !important;
    margin-block-end: 0.2em !important;
}

/** Generic grouping styling. */
.dataview.result-group {
    padding-left: 8px;
}

/*******************/
/** Inline Fields **/
/*******************/

.dataview.inline-field-key {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-primary-alt);
    color: var(--nav-item-color-selected);
}

.dataview.inline-field-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--nav-item-color-selected);
}

.dataview.inline-field-standalone-value {
    padding-left: 8px;
    padding-right: 8px;
    font-family: var(--font-monospace);
    background-color: var(--background-secondary-alt);
    color: var(--nav-item-color-selected);
}

/***************/
/** Task View **/
/***************/

.dataview.task-list-item, .dataview.task-list-basic-item {
    margin-top: 3px;
    margin-bottom: 3px;
    transition: 0.4s;
}

.dataview.task-list-item:hover, .dataview.task-list-basic-item:hover {
    background-color: var(--text-selection);
    box-shadow: -40px 0 0 var(--text-selection);
    cursor: pointer;
}

/*****************/
/** Error Views **/
/*****************/

div.dataview-error-box {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px dashed var(--background-secondary);
}

.dataview-error-message {
    color: var(--text-muted);
    text-align: center;
}

/*************************/
/** Additional Metadata **/
/*************************/

.dataview.small-text {
    font-size: smaller;
    color: var(--text-muted);
    margin-left: 3px;
}

.dataview.small-text::before {
	content: "(";
}

.dataview.small-text::after {
	content: ")";
}
.obsidian-icon {
  font-size: inherit;
  display: inline-block;
  width: 2rem !important;
  text-align: center;
  /* margin-right: -0.5rem !important; */
}

p .obsidian-icon {
  width: 1.75rem !important;
}

.obsidian-icon.react-icon > svg {
  vertical-align: middle;
  margin-bottom: 3px;
}
/* Default abcjs styles look good. Just adapting it to the current theme.  */

.abcjs-container svg path {
  fill: var(--text-normal);
}

.abcjs-container svg text {
  fill: var(--text-normal);
}

.abcjs-brace {
  stroke: var(--text-normal);
}

.obsidian-plugin-abcjs-error {
  background-color: #E74C3C;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  text-align: center
}

/* ------------------------------------------------- Audio Playback styles */
.abcjs-container {
  cursor: pointer;
}

/* color the current notes */
.abcjs-highlight path {
  fill: var(--background-modifier-success) !important;
}

/* Highlight the region when audio is playing */
.cm-embed-block.is-playing,
.cm-embed-block.is-playing:focus-within {
  box-shadow: 0 0 0 1px var(--background-modifier-success), inset 0 0 0 1px var(--background-modifier-success) !important;
  border-radius: var(--radius-s);
}
/* .cm-embed-block:focus-within {
  box-shadow: 0 0 0 1px var(--color-blue), inset 0 0 0 1px var(--color-blue) !important;
  border-radius: var(--radius-s);
} */

.abcjs-css-warning {
  display: none;
}