.logo {
  position: fixed;
  top: 8px;
  left: 5px;
}

.custom-page {
  text-align: center;
  /* border-bottom: var(--divider-width) solid var(--divider-color); */
}

.custom-page-logo {
  border-radius: 50%;
  width: 130px;
}

.social-logo {
  width: 20px;
}

.social-media-list {
  padding-left: 10px;
  list-style-type: none;
}

.social-media-list li {
  display: inline-block;
  padding-right: 10px;
}

.sm-site-title {
  padding-top: 0px;
  padding-bottom: 10px;
}

.sm-site-desc {
  padding-bottom: 10px;
  max-width: 80%;
  display: inline-block;
}


.sidebar-toggle-button.mod-left {
  position: relative;
  width: unset;
}

.collapse:not(.show) {
  display: none;
}

.workspace-split.mod-vertical.mod-root {
  min-width: 400px;
}

/* fix graph canvas height */
#localGraph {
  /* border: calc(0.5px + var(--divider-width)) solid var(--divider-color); */
  height: 50%;
}

#mynetwork {
  height: 100%;
}

#graph_all{
  height: 100%;
}

.is-sidedock-collapse {
  display: none;
  width: 0%;
}

.nav-buttons-container {
  justify-content: right !important;
}

img {
  display: initial !important;
  max-width: 100%;
}

.images.center {
  display: block !important;
  margin-left: auto;
  margin-right: auto;
}

.images.right {
  display: block !important;
  margin-left: auto;
  margin-right: 0;
}

.popup-icon {
  padding-bottom: 1px;
  top: -6px;
  position: relative;
  left: 3px;
}

#loading-text {
  position: absolute;
  top: 8px;
}

.inline-title {
  padding-bottom: 30px;
}

#mdContent h1:nth-of-type(1) {
  padding-top: 0px !important;
}

h1, h2, h3, h4 {
  padding-top: 30px;
}

.sidebar-top h3{
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.toc-item {
  padding-left: 10px !important;
}

.metadata-text {
  line-height: 1.9;
  text-indent: 5px;
}

.is-collapsed-callout {
  display: none;
}

.callout-title-inner * {
  display: inline !important;
  
}

.popover.hover-popover > * {
  width: 100%;
} 

span.cm-highlight {
  background-color: var(--text-highlight-bg);
  color: var(--text-normal);
}

#tags_container {
  margin-top: 30px;
}


/* Position and appearance of copy icon */
.copy-icon {
  cursor: pointer;
  color: var(--text-tag);
  font-size: 0.9em;
  margin-left: 0.25em;
  visibility: hidden;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Show icon only on hover */
h1:hover .copy-icon,
h2:hover .copy-icon,
h3:hover .copy-icon,
h4:hover .copy-icon,
h5:hover .copy-icon,
h6:hover .copy-icon {
  visibility: visible;
}

/* Hover effect */
.copy-icon:hover {
  color: var(--text-accent);
}

/* Temporary success state */
.copy-icon.copied {
  color: green;
  visibility: visible;
}










/* --------------- */
/* Mobile / Responive Settings */

@media screen and (max-width: 990px) {

   .workspace-split.mod-horizontal.mod-right-split {
    display: none;
  } 
  .workspace-split.mod-horizontal.mod-left-split {
    width: 90vw !important;
    max-width: 300px !important;
  }

  .markdown-preview-view {
    padding: 10px !important;

  }

  .sidebar-toggle-button.mod-right {
    display: none;
  }

  .workspace-split.mod-vertical.mod-root {
    min-width: unset;
  }

  #mdContent {
    padding-right: 30px;
  }

}

/* downloadable files in the navigation (TREE_VISIBLE_EXTENSIONS) */
a.perlite-download-link,
a.perlite-download-link:hover {
  color: inherit;
  text-decoration: none;
}

/* canvas (read-only), the canvas markup follows obsidian, see app.css */
.perlite-canvas {
  position: relative;
  height: calc(100vh - 200px);
  min-height: 400px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

#mdHoverContent .perlite-canvas,
#popUpContent .perlite-canvas {
  height: 400px;
  min-height: 0;
}

.perlite-canvas .canvas-wrapper {
  cursor: grab;
}

.perlite-canvas .canvas-wrapper.is-dragging,
.perlite-canvas .canvas-wrapper.is-dragging * {
  cursor: grabbing;
}

.perlite-canvas .canvas-node-content .markdown-preview-view {
  user-select: none;
  -webkit-user-select: none;
}

.perlite-canvas .canvas-node-label a,
.perlite-canvas .canvas-node-placeholder a {
  color: inherit;
  text-decoration: none;
}

.perlite-canvas .canvas-node-label a:hover,
.perlite-canvas .canvas-node-placeholder a:hover {
  color: var(--text-accent);
}

.perlite-canvas .perlite-canvas-missing {
  font-size: var(--font-ui-medium);
  font-weight: normal;
  color: var(--text-muted);
}

.perlite-canvas .canvas-edges polygon.perlite-canvas-path-end {
  pointer-events: none;
  stroke: rgb(var(--canvas-color));
  fill: rgb(var(--canvas-color));
  stroke-linejoin: round;
  stroke-width: 1px;
}

.perlite-canvas .perlite-canvas-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-4-4);
  padding: var(--size-4-4);
}

.perlite-canvas .perlite-canvas-link a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-4-2);
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.perlite-canvas .perlite-canvas-link template {
  display: none;
}

.perlite-canvas .perlite-canvas-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: var(--background-primary);
}

.perlite-canvas .video-embed video {
  max-height: 100%;
}

.perlite-canvas .audio-embed audio {
  width: calc(100% - 2 * var(--size-4-4));
}

.perlite-canvas .perlite-canvas-link-host {
  font-size: 1.6em;
  font-weight: var(--font-semibold);
  color: var(--text-normal);
}

.perlite-canvas .perlite-canvas-link-url {
  color: var(--text-accent);
}

.perlite-canvas-error {
  padding: var(--size-4-4);
  color: var(--text-muted);
}


/* --------------- */
/* Print */
/* app.css (obsidian) hides the whole app while printing, because obsidian prints a cloned .print element.
   Perlite prints the current note directly, the color mode is set by the user setting "Print colors" (perlite.js) */

@media print {

  @page {
    margin: 15mm;
  }

  body > .app-container {
    display: block !important;
  }

  /* hide the ui, only the note is printed */
  .titlebar,
  .status-bar,
  .workspace-ribbon,
  .workspace-split.mod-left-split,
  .workspace-split.mod-right-split,
  .view-header,
  .workspace-tab-header-container,
  #graph_content,
  .graph-controls,
  .modal-container,
  .popover,
  .copy-code-button,
  .copy-icon,
  .sidebar-toggle-button,
  .markdown-preview-pusher,
  .workspace-leaf-resize-handle {
    display: none !important;
  }

  /* let the note flow over multiple pages */
  html,
  body,
  .app-container,
  .horizontal-main-container,
  .workspace,
  .workspace-split.mod-vertical.mod-root,
  .workspace-tabs,
  .workspace-tab-container,
  .workspace-leaf,
  .workspace-leaf-content,
  .view-content,
  .markdown-reading-view,
  .markdown-preview-view,
  .markdown-preview-sizer {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  .markdown-preview-sizer {
    padding-bottom: 0 !important;
  }

  .markdown-preview-view {
    padding: 0 !important;
  }

  #mdContent {
    padding-right: 0 !important;
  }

  /* keep backgrounds and code highlight colors */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html,
  body {
    background-color: var(--background-primary) !important;
  }

  pre,
  pre code {
    white-space: pre-wrap !important;
    word-break: break-word;
    overflow: visible !important;
  }

  /* page breaks */
  pre,
  img,
  svg,
  table,
  blockquote,
  .callout,
  .katex-display,
  .perlite-canvas {
    break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6,
  .inline-title {
    break-after: avoid;
  }

  .is-collapsed-callout {
    display: block !important;
  }

  .perlite-canvas {
    height: 180mm;
    min-height: 0;
  }

  /* black & white */
  body.theme-light.perlite-print-bw {
    --background-primary: #fff;
    --text-normal: #000;
    --text-muted: #333;
    --text-faint: #555;
    --text-accent: #000;
    --inline-title-color: #000;
    --h1-color: #000;
    --h2-color: #000;
    --h3-color: #000;
    --h4-color: #000;
    --h5-color: #000;
    --h6-color: #000;
    --bold-color: #000;
    --italic-color: #000;
    --link-color: #000;
    --link-external-color: #000;
    --link-unresolved-color: #000;
    --tag-color: #000;
  }

  body.perlite-print-bw a {
    text-decoration: underline !important;
  }
}