melon-theme-4

/* ============================================================================= */
/*                                   MELON 4                                     */
/*                      by https://github.com/raphwriter/                        */ 
/*          A Theme For Trilium Notes (https://github.com/zadam/trilium)         */
/* ============================================================================= */



/* ----------------------------------------------------------------------------- */
/* FONT DECLARATIONS
/* ----------------------------------------------------------------------------- */

/* Fira Mono */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/FiraMono-Regular.woff') format('woff');
}

/* Fira Sans */
@font-face {
  font-family: 'Fira Sans';
  font-style: light;
  font-weight: 300;
  src: url('/custom/fonts/FiraSans-Light.woff') format('woff');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: regular;
  font-weight: 400;
  src: url('/custom/fonts/FiraSans-Regular.woff') format('woff');
}

/* Fira Code */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300;
  src: url('/custom/fonts/FiraCode-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 600;
  src: url('/custom/fonts/FiraCode-Bold.woff') format('woff');
}

/* Roboto-slab */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 200;
  src: url('/custom/fonts/roboto-slab-v11-latin-200.woff') format('woff'); 
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: url('/custom/fonts/roboto-slab-v11-latin-300.woff') format('woff'); 
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/roboto-slab-v11-latin-regular.woff') format('woff'); 
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: url('/custom/fonts/roboto-slab-v11-latin-600.woff') format('woff'); 
}


html {
/* ----------------------------------------------------------------------------- */
/* COLOR VARIABLES
/* ----------------------------------------------------------------------------- */
    
    --color-blue-dark: #2e4b76;
    --color-blue-dark-alpha: #2e4b76d1;  
    --color-blue-dark-text: #e8f1f5;
    --color-blue-light: #3cad9e;
    --color-blue-light-alpha: #3cad9e70;
    --color-blue-light-alpha-darker: #3cad9ed1;
    --color-blue-light-alpha-lighter: #2aa19229;
    --color-blue-light-text: #f0f4f4;
    --color-blue-light-gradient-1: #4ea596;
    --color-blue-light-gradient-2: #2ba090;
    --color-yellow: #e9c46a; 
    --color-yellow-darker: #ecb400;
    --color-yellow-text: #63583c;
    --color-yellow-bg-alpha: #e9c46a1a; 
    --color-sidebar-yellow-dark: #e1dbce;
    --color-orange-light: #f4a261;
    --color-orange-light-text: #c96a2e;
    --color-orange-dark: #e76f51;
    --color-orange-dark-text: #f2dcd6; 
    --color-gray: #d6d6d6;
    --color-gray-text: #333;
    --color-gray-text-code: #555;
    --color-gray-light: #f5f5f5;
    --color-gray-light-alpha: rgba(199, 199, 199, 0.2);
    --color-gray-light-text: #999;
    --color-gray-medium: #868E8D;
    --color-gray-light-buttons: #e9e9e9;
    --color-gray-light-buttons-text: #434343;
    --color-gray-dark: #666;
    --color-gray-dark-text: #666;
    --color-paper: #ecebe3;
    --color-paper-text: #555;
    --color-paper-light: #fcfcfa;
    --color-paper-light-cool: #fcfcfd;
    --color-shadow: rgba(181, 181, 181, 0.6);
    --color-shadow-light: rgba(181, 181, 181, 0.3);
    --gradient-blue-light: linear-gradient(138deg, var(--color-blue-light-gradient-1) 0%, var(--color-blue-light-gradient-1) 35%, var(--color-blue-light-gradient-2) 100%);
    --gradient-paper-light: linear-gradient(170deg, var(--color-paper-light-cool) 0%, var(--color-paper-light-cool) 45%, var(--color-paper-light) 100%);
    --launcher-pane-background-color: var(--gradient-blue-light);
    --ck-color-image-caption-background: var(--color-shadow-light);
    
/* ----------------------------------------------------------------------------- */
/* BORDER & SHADOW VARIABLES
/* ----------------------------------------------------------------------------- */
    
    --border-radius-small: 2px;
    --border-radius-tabs: 2px;
    --border-radius-large: 10px;
    --border-standard: 1px solid var(--color-gray);
    --border-accent: 2px solid var(--color-orange-dark);
    --border-accent-alt: 2px solid var(--color-blue-light);
    --border-accent-muted: 2px solid var(--color-gray-dark);
    --border-accent-light: 1px dotted var(--color-blue-dark-text);
    
    --shadow-light: 3px 4px 3px -3px var(--color-shadow-light);
    --shadow-standard: 3px 4px 3px -3px var(--color-shadow);
    --shadow-accented: 2px 2px 5px -2px var(--color-gray-dark);
    --shadow-90deg: 0 3px 5px -3px var(--color-shadow);
    --shadow-90deg-inset: 0 9px 4px -9px inset var(--color-shadow-light);
    --shadow-embedded-notes: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

/* ----------------------------------------------------------------------------- */
/* FONT VARIABLES 
/* ----------------------------------------------------------------------------- */
    
    --main-font-family-sans: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
    --main-font-family-serif: 'Roboto Slab', Georgia, Serif;
    --main-font-family-mono: 'Fira Mono', 'Source Code Pro', Courier, Monospace;
    --detail-text-font-family: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
    --font-family-monospace: 'Fira Mono', 'Source Code Pro', Courier, Monospace;
    --font-headers: 'Roboto Slab', Georgia, Serif;
    --font-body: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
    --font-code: 'Fira Code', 'Source Code Pro', Courier, Monospace;
}

#root-widget {
  /* FF basic styling */
  scrollbar-color: var(--color-gray-dark) var(--color-gray-light);
  scrollbar-gutter: 5px;
}


/* ----------------------------------------------------------------------------- */
/* RESET 
/* ----------------------------------------------------------------------------- */

#root-widget *, .modal-content, :not(.ribbon-body *), form input, :not(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-body);
  border-radius: var(--border-radius-small);
}


#root-widget #center-pane :is(h1, h2, h3, h4, h5, h6),
.modal-content :is(h1, h2, h3, h4, h5, h6) {
  border-bottom: none;
  color: var(--color-gray-light-buttons-text);
  font-family: var(--main-font-family-serif);
  margin-top: 1.6rem;
  margin-bottom: .3rem;
  font-weight: bold;
  padding: 6px 0px;
  border-radius: 0;

  font-family: var(--font-headers) !important;
}

/* Excalidraw fixes */
#root-widget #center-pane div.excalidraw-wrapper :is(h1, h2, h3, h4, h5, h6) {
  margin: unset;
  padding: unset;
}

#root-widget #center-pane div.excalidraw-wrapper .App-menu__left .panelColumn {
  row-gap: 0;
}


#root-widget a {
  color: var(--color-blue-dark);
}


span.edited-note-line {
  padding: 0 .5rem 0 0;
  display: flex;
}
span.edited-note-line small {
  color: var(--color-gray-dark);
  margin-right: 2px;
  margin-left: 2px;
}

div#rest-pane.component div#center-pane .title-row {

}


/* ----------------------------------------------------------------------------- */
/* CodeMirror 
/* ----------------------------------------------------------------------------- */

div#root-widget div#rest-pane div#center-pane div.note-detail div.note-detail-code div.note-detail-code-editor div.CodeMirror-code span {
  /*color: var(--color-gray-text-code);*/
    font-family: var(--font-code);
}
div.CodeMirror span.cm-atom {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-builtin {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-callee {
  color: var(--color-yellow-text);
}
div.CodeMirror span.cm-comment {
  color: var(--color-yellow-darker);
  background-color: var(--color-gray-light);
  padding: 5px 2px;
  margin: -5px -2px;
}
div.CodeMirror span.cm-def {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-keyword {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-matchhighlight {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-number {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-operator {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-overlay {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-property {
    color: var(--color-paper-text);
    text-decoration: underline;
    text-decoration-color: var(--color-gray);
    text-decoration-style: dotted;
}
div.CodeMirror span.cm-variable {
  color: var(--color-blue-dark);
}
div.CodeMirror span.cm-variable-2 {
  color: var(--color-blue-light);
}
div.CodeMirror span.cm-variable-3 {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-qualifier {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-string {
  color: var(--color-orange-dark);  
}
div.CodeMirror span.cm-string-2 {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-tag {
  color: var(--color-gray-text-code);
}

.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
  background-color: var(--color-blue-light-alpha);
}

.CodeMirror-matchingbracket { 
  text-decoration: none; 
  color: var(--color-orange-dark) !important;
  border: 1px solid var(--color-gray);
}

.CodeMirror-linenumber {
  /*! font-size: 0.9rem; */
  color: var(--color-gray);
  font-family: var(--font-code) !important;
}

.CodeMirror-linenumber::before {
  /*content: "\00B7";*/
}

/* ----------------------------------------------------------------------------- */
/* HYPERLINKS
/* ----------------------------------------------------------------------------- */

a, a:visited, a:hover, 
.note-detail a, .note-detail a:hover,
.modal-dialog a, .modal-dialog a:hover, 
.note-paths-widget a, .note-paths-widget a:hover, 
.similar-notes-widget a, .similar-notes-widget a:hover,
.related-notes-container a, .related-notes-container a:hover,
div.tooltip a, 
li a, li a:visited, li a:hover
{
    color: var(--color-blue-dark);
    border-bottom: 1px solid var(--color-gray-dark);
    border-radius: 0 !important;
    text-decoration: none;
}

a:hover, 
.note-detail a:hover,
.modal-dialog a:hover, 
.note-paths-widget a:hover, 
.similar-notes-widget a:hover,
.related-notes-container a:hover {
    border-bottom: 1px solid var(--color-blue-light);
    border-radius: 0;
    color: var(--color-blue-light);
    text-decoration: none;
}

div#root-widget div#rest-pane div#center-pane div.scrolling-container div.note-detail.component div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content li span.todo-list__label__description a {
  margin-left: 0.4rem;
}


/* ----------------------------------------------------------------------------- */
/* CK EDITOR 
/* ----------------------------------------------------------------------------- */
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-off.ck-block-toolbar-button,
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-on.ck-block-toolbar-button {
  /*! position: absolute; */
  /*! left: -50px; */
  margin: 0 0 0 -20px;
  /*! border: 1px dashed var(--color-gray-light-buttons-text); */
  border-radius: 7px;
  width: 31px;
  height: 31px;
  color: var(--color-gray-light-buttons-text);
  outline: 1px solid var(--color-blue-light-text);
  outline-offset: -3px;
  box-shadow: var(--shadow-embedded-notes);
  padding: 5px;
  background: var(--gradient-paper-light);
  border: 2px solid white;
}

div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible {
  border-radius: 7px;
  background: var(--gradient-paper-light);
  border: 2px solid white;
  box-shadow: var(--shadow-embedded-notes);
  color: var(--color-gray-light-buttons-text);
  outline: 1px solid var(--color-blue-light-text);
  outline-offset: -3px;
  padding: 5px;
  
}

div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar,
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar .ck-toolbar__items {
  background: var(--gradient-paper-light);
}

.ck.ck-button, a.ck.ck-button {
  background: var(--gradient-light-gray);
}

.ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
  background: var(--color-blue-light-alpha);
}


/* ----------------------------------------------------------------------------- */
/* MODALS 
/* ----------------------------------------------------------------------------- */

/* ----------- RECENT CHANGES ----------- */
div#recent-changes-content div {
  margin-bottom: 2rem;
}

div#recent-changes-content div ul {
  margin-left: .5rem;
  margin-top: .5rem;
  padding-left: 0;
}

div#recent-changes-content div ul li {
  list-style-type: none;
  margin-bottom: .3rem;
}

div#recent-changes-content div ul li span {
  color: var(--color-blue-light);
  font-family: var(--main-font-family-serif);
}

div#recent-changes-content div ul li span small {
  color: var(--color-gray-light-text);
  display: block;
  margin-left: 0rem;
}

div#recent-changes-content div b {
  border-bottom: 1px solid var(--color-gray);
  color: var(--color-blue-dark);
  display: block;
  font-family: var(--main-font-family-serif);
  font-weight: normal;
}



/* ----------------------------------------------------------------------------- */
/* COMPONENTS 
/* ----------------------------------------------------------------------------- */

/* ----------- GUTTER ----------- */

div#root-widget div.gutter-horizontal {
  background: var(--color-gray-light);
  /*! width: 5px !important; */
  border-left: var(--border-standard);
  border-radius: 0;
  padding-right: 0.5rem;
  border-right: var(--border-standard);
}



/* -----------LEFT PANE -------------- */
div#left-pane {
  background-color: var(--color-paper-light-cool);
}


/* ----------- RIGHT PANE ------------ */

div#right-pane.component {
    margin-left: 10px;
}

div#right-pane.component div.card-header {
    border-radius: 0;
    font-family: var(--font-headers);
    font-weight: normal;
}

div#right-pane.component div.card-header .toc > ol {
    padding-left: 15px;
}

div#right-pane.component div.card-body .toc > ol > ol li {
    list-style: lower-latin;
}

div#right-pane.component div.card-body div.toc-widget {
padding: 0 1rem;
contain: none;
overflow: auto;
    }

/* ----------- DROPDOWN MENU ----------- */

div#root-widget div#left-pane .dropdown-menu a {
    color: var(--color-dark-blue);
}

a.dropdown-item {
  border-bottom: none;
}
div#root-widget div#launcher-pane div.dropdown div.dropdown-menu span.bx {
  color: var(--color-blue-dark);
}

div#root-widget div#launcher-pane div.dropdown div.dropdown-menu a {
  color: var(--color-blue-dark);
}

div#root-widget div#rest-pane .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled),
div#root-widget div#rest-pane div#center-pane div.ribbon-container div.ribbon-top-row div.ribbon-button-container div.dropdown.show div.dropdown-menu a.dropdown-item.show-source-button:hover kbd{
  background-color: var(--color-blue-light-alpha) !important;
  color: var(--color-blue-light-gradient-2) !important;
}



/* ----------- TABS ----------- */

div#root-widget div#rest-pane > div.component:first-child {
  border-bottom: var(--border-standard);
  height: 50px !important;
}

div#root-widget div#rest-pane div.tab-row-widget {

}

div#root-widget div#rest-pane div.tab-row-widget-container {

}

div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-dark);
  background-color: var(--color-gray-light-alpha);
  border-radius: 0;
  margin-left: 5px;
}

div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab:hover {
  color: var(--color-blue-light);
  background-color: var(--color-blue-light-alpha);
}

.tab-row-widget .note-tab .note-tab-title {
    
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper {
    background-color: var(--color-gray-light);
    color: var(--color-gray-light-text);
    align-items: center;
    height: 50px;
    border-radius: 0;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper:hover {
  color: var(--color-blue-light);
  background-color: var(--color-blue-light-alpha);
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active=""] div.note-tab-wrapper   {
  color: white;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div {
  height: 50px;
  align-items: center;
  display: flex;
  padding: 0;
  font-family: var(--font-headers);
  font-weight: normal;
}

/* close button */
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close span {
  justify-content: end;
  margin-right: 3px;
  margin-left: 3px;
  
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close {
  height: 1.5rem;
  width: 1.5rem;
  justify-content: center;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close:hover {
  color: var(--color-gray-light-buttons-text);
  cursor: pointer;
}

/* close button "x" */
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div span {
  top: unset;
  font-size: 1.5rem;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper {
    background-color: #3cad9e;
    color: var(--color-blue-light-text);
    background: var(--gradient-blue-light);
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper div.note-tab-title::before {
  /*! content: "\203B  "; */ /* reference mark */
  /*! content: "\1F348  "; */ /* melon */
  content: "\1F34B     "; /* lemon */
  margin-right: 5px;
  font-size: .8rem;
}



/* ----------- TREE ----------- */

div#root-widget div#left-pane div.tree ul#ft-id-1 {
  margin-left: .4rem;
  margin-right: .7rem;
}

div#root-widget div#left-pane span.fancytree-node:hover { 
    background-color: #2aa19229;
    border: 1px dotted var(--color-blue-light);
  color: var(--color-blue-light);
}


div#root-widget div#left-pane .fancytree-node {
height: 36px; padding: 2px 4px 5px;
  font-family: var(--main-font-family-serif);
}

div#root-widget div#left-pane span.fancytree-node.fancytree-active {
  background-color: var(--color-gray-light-alpha) !important;
  border: none !important;
}

div#root-widget div#left-pane span.fancytree-node.fancytree-node span {
  font-family: var(--main-font-family-serif);
}

div#root-widget div#left-pane span.fancytree-node.fancytree-active span {
  color: var(--color-blue-dark);
}

div#root-widget div#left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
  /* remove shadow from protected notes icon */
  filter: none;
  color: var(--color-gray-medium);
}


/* multiple selected nodes */

div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected {
  background-color: var(--color-gray-light) !important;
  color: var(--color-blue-dark-alpha);
}

div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected .fancytree-title {
    font-style: normal;
  text-decoration: none;
}

/* NOTES WITH MULTIPLE PARENTS*/

div#root-widget div#left-pane span.fancytree-node.multiple-parents .fancytree-title::after {
  /* cloned notes icon */
  font-family: boxicons;
  /*content: " \1F517";*/
  content: " \EA72";
  font-size: .85rem;
  color: var(--color-blue-dark);
}

div#root-widget div#left-pane div.tree-wrapper div.tree .ui-fancytree.fancytree-container.fancytree-plain.fancytree-ext-clones.fancytree-treefocus span.fancytree-node.fancytree-has-children.multiple-parents.fancytree-match.fancytree-active-clone {
  background-color: var(--color-gray-light) !important;
  color: var(--color-blue-dark-alpha);
}



/* ----------- CONTEXT MENU ----------- */

#context-menu-container {
  font-family: var(--main-font-family-sans);
}



/* ----------- LAUNCHER PANE ----------- */

div#launcher-pane {
    background-color: var(--color-blue-light);
    background: var(--gradient-blue-light);
}

div#launcher-pane .component,
div#launcher-pane .component button,
div#launcher-pane .icon-action {
    color: var(--color-blue-light-text);

}

div#launcher-pane .global-menu-button {
  filter:invert(1);
}

div#launcher-pane .global-menu-button:hover {
  filter:invert(1);
}


div#launcher-pane .component button:hover {
    filter: invert(0);
    background-color: var(--color-gray-light-alpha);
    display: block;
    width: inherit;
}

div#launcher-pane .icon-action:hover {
    background-color: var(--color-gray-text);
}

.tooltip-inner {
    font-family: var(--main-font-family-sans);
}


/* ----------- RIBBON ----------- */

div#rest-pane.component div#center-pane div.ribbon-body.active {
  margin-left: 0;
  margin-right: 0;
  border: none;
}

div#rest-pane.component div#center-pane div.attribute-list {
  margin-top: 0;
}

div#rest-pane.component div#center-pane div.ribbon-tab-container {
  justify-content: start;
  margin-left: 0;
}

div#rest-pane.component div#center-pane div.ribbon-container {
  margin-bottom: 0px;
  /*! padding-bottom: 5px; */
  border-bottom: 1px solid var(--color-gray-light-buttons);
  border-top: 1px solid var(--color-gray-light-buttons);
  background-color: var(--color-blue-light-text);
}

div#rest-pane.component div#center-pane div.ribbon-body-container,
div#rest-pane.component div#center-pane div.ribbon-body-container p,
div#rest-pane.component div#center-pane div.ribbon-body-container div.inherited-attributes-container span {
  font-family: var(--main-font-family-mono) !important;
  
}

div#rest-pane.component div#center-pane div.ribbon-body-container div.component {
  font-size: 1rem;
}

div#rest-pane.component div#center-pane span.bx {
  font-family: boxicons !important;
}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title {
  
}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-top-row {
  justify-content: space-between;
  border: none;
}

div#rest-pane.component div#center-pane .ribbon-button-container {
  border: none;
    padding: 0.3rem .3rem 0rem;
  justify-content: end;
  align-content: end;
}
div#rest-pane.component div#center-pane .ribbon-button-container button {

}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer,
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title {
  border-radius: 0;
  padding: 0.3rem 1rem;
  border-bottom: none;

}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer {
  display: none;
  max-width: 0;
  
}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active {
  color: var(--color-blue-light);
}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title:hover {
  background-color: var(--color-blue-light-alpha);
  color: var(--color-blue-light);
}

div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active:hover {
  background-color: var(--color-blue-light-alpha);
  color: var(--color-blue-light);
}

div#root-widget div#center-pane .note-paths-widget a {
  font-weight: 400;
}

div#root-widget div#center-pane .note-paths-widget ul {
  padding: .4rem 0;
}

div#root-widget div#center-pane .note-paths-widget li {
  list-style-type: none;
  
}

div#root-widget div#center-pane .note-paths-widget li::before {
  content: "\203A \202F";
}

div#rest-pane.component div#center-pane .button-widget.icon-action {
  color: var(--color-gray-medium);
}


/* ----------- FORM ELEMENTS ----------- */



div#root-widget div#center-pane button:not(.bx).btn-primary {
    background-color: var(--color-blue-light);
    color: white;
}

div#center-pane button:not(.bx).btn-secondary {
    background-color: var(--color-gray-dark);
}

div#center-pane .switch {
  background: none;
}

div#center-pane .switch .slider {
  /*slider background*/
  background-color: var(--color-gray-light-buttons);
  box-shadow: var(--shadow-light);
  border-radius: var(--border-radius-small);
}

div#center-pane .switch .slider::before {
  /*slider off state*/
  background-color: var(--color-gray-light-buttons-text);
  border-radius: var(--border-radius-small);
}

div#center-pane .switch .slider.checked::before {
  /*slider on state*/
  background-color: var(--color-blue-light);
  border-radius: var(--border-radius-small);
}

input#clone-to-note-autocomplete,
.algolia-autocomplete {
  
}

/*Algolia (Search Autocomplete Form Field)*/
.algolia-autocomplete small {
  font-family: var(--main-font-family-mono);
  color: var(--color-gray-dark);
  display: block;
  
}
.algolia-autocomplete .aa-suggestion {
  border-bottom: var(--border-standard);
}
.algolia-autocomplete .aa-dropdown-menu b {
  color: var(--color-blue-light-gradient-1);
  text-decoration: underline;
  font-weight: normal;

}

/* checkbox background*/
.ck-content .todo-list .todo-list__label > input[checked]::before {
  background: var(--color-blue-dark-alpha);
  border-radius: var(--border-radius-small);
}


#left-pane input.search-string {
  background: white !important;
  border: 1px solid var(--color-blue-light);
  border-radius: var(--border-radius-small);
  border: var(--border-accent-light);
  box-shadow: var(--shadow-light) inset;
    margin-right: 10px;
}

#left-pane div.quick-search {
  border-bottom: var(--border-standard);
  padding: unset;

  align-content: center;
  align-items: center;
}

#left-pane div.quick-search button {
  padding: unset;
  align-self: center;
  margin: 0 10px;
}


div#root-widget div#rest-pane div#center-pane div.split-note-container-widget div.note-split.component {
  margin-left: 0;
  border-right: var(--border-standard);
}



/* ----------- NOTEBOOK CARDS ----------- */

div#center-pane .note-list {

}

div#center-pane .note-list .note-book-card {
    
    border: var(--border-standard) !important;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-standard);
    padding: 10px;
}

div#center-pane .note-list.list-view .note-book-card {
  margin: 5px 0px;
  overflow-y: hidden;
}

div#center-pane .note-list.grid-view .note-book-card {
  margin: 10px;
}

div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6) {
  border-bottom: var(--border-standard);
  background-color: var(--color-gray-light);
  color: var(--color-blue-dark);
  display: block;
  margin-top: 0;
  width: 100%;
  padding: 6px;
  margin-bottom: 0;
}

div#center-pane .note-book-card h5:first-of-type {
  background-color: var(--color-blue-light-text);
  border: 1px solid white;
  outline: 1px solid var(--color-gray);
}

div#center-pane h5 > span.note-book-title{
  font-family: var(--font-headers);
  /*! font-weight: normal; */
}

div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6).note-book-header span.note-icon {
  padding: 3px;
  border-radius: 3px;
  margin-right: 5px;
}

div.note-list-widget div.note-list-widget-content div.note-list-container div.note-book-card.expanded div.note-book-content div.rendered-note-content pre {
  font-size: .9rem;
  padding: 3px 6px;
}

.note-book-card.expanded > .note-book-title {
    font-weight: 500;
}

.note-list-widget .note-list-widget-content .note-list .note-book-card :is(h1, h2, h3, h4, h5) {
    font-size: 1rem;
}

.note-list-container div.note-book-card h5.note-book-title {
  margin-top: 0;
}

.note-list-widget .note-list-widget-content .note-list .note-book-card {
    background-color: white;
}

.note-list-widget .note-list-widget-content .note-list .note-book-card:hover {
    background-color: white;
    box-shadow: var(--shadow-standard);
}

.note-list-widget .note-list-widget-content .note-list .note-book-card h5 {
    color: var(--color-blue-dark);  
}

.note-list-widget .note-list-widget-content .note-list .note-book-card h5 span.rendered-note-attributes {
    display: none;  /* hide note attributes */
}

.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content {
    
}

.note-list-widget .note-list-widget-content .note-list .note-book-card.expanded .note-book-content {
    
}

.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content a,
.note-list-widget .note-list-widget-content .note-list .note-book-card h5 a {
    color: var(--color-blue-dark);
}

.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content .rendered-note-content {
    color: var(--color-gray-dark);
    padding: 0 5px !important;
}

div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text {
  contain: content;
  border: 1px solid lightgray;
  margin-top: 10px;
  padding: 10px;
}

div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text img {
  max-width: 100%;
}

/* remove background from small note renders*/
div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5, pre) {
  background: none;
  /*! padding-left: 0; */
  margin-bottom: 5px;
}

div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5) {
  padding-left: 0;
}

/* ----------- NOTES ----------- */

#center-pane .backlinks-ticker {
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark-text);
  border: var(--border-accent-light);
  top: 0;
  right: 12px;
  width: fit-content;
}

#center-pane .backlinks-items div :is(h2, h3, h4, h5, h6) {
  font-size: 1.1rem;
}

#center-pane .backlinks-ticker span.backlinks-count {
  font-family: var(--main-font-family-mono);
  font-size: .95rem;

}

#center-pane .title-row {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
}

#center-pane .title-row .note-icon-widget {
  
  /*! align-content: baseline; */
  display: flex;
  margin: 0;
  padding: 5px;
  
}

/* Trilium >= 0.55.1 */
#center-pane div.scrolling-container {
  /*! display: flex; */
  /*! flex-direction: column; */
  /*! justify-content: space-between; */
}

#center-pane .note-detail {
  /*! margin: 0; */
  /*! padding: 0; */
  flex-grow: 1;
  /*! display: flex; */
}

div#center-pane div.note-detail div.canvas-widget {
  display: grid;
}


div#center-pane div.note-detail div.note-detail-readonly-text
 {
   border-left: 5px solid var(--color-blue-light);
   padding: 2rem 4rem 1rem 2rem;
}

div#center-pane div.note-detail div.note-detail-printable {
  
}

div#center-pane div.note-detail div.note-detail-editable-text-editor {

}

div#center-pane div.note-detail div.note-detail-editable-text {
  /*padding: 20px 25px 5px 25px;*/
     padding: 2rem 0 1rem 2rem;
  border-left: 5px solid var(--color-orange-dark);
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}

#center-pane .note-detail + .note-list-widget {
  padding: 0;
  background-color: var(--color-blue-light-text);
  border-top: var(--border-standard);
  box-shadow: var(--shadow-90deg-inset);
  margin-bottom: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#center-pane .note-list-widget div.note-list.list-view,
#center-pane .note-list-widget div.note-list.grid-view {
}

#center-pane div.note-list.list-view div.note-list-wrapper div.note-list-container {
  display: flex;
  flex-direction: column;
}

#center-pane .title-row .note-icon-widget button {
  color: var(--color-blue-dark);
}

#center-pane .title-row .note-title-widget {
    align-self: center;
    display: flex;
    align-items: center;
}

#center-pane .title-row .note-title-widget input.note-title {
    color: var(--color-blue-dark) !important;
    font-family: var(--main-font-family-serif);
    font-weight: 600;
    font-size: 2rem;
  /*! box-shadow: none; */
  
}

#center-pane .title-row .note-title-widget input.note-title.protected {
  text-shadow: none;
  color: var(--color-gray-medium) !important;
}

#center-pane .title-row .note-title-widget input.note-title.protected {
  
}

#center-pane .note-detail h2:first-of-type {
    margin-top: auto;
}

#center-pane .note-detail p {
  color: var(--color-gray-text);
}

#center-pane .note-detail p a {
  color: var(--color-blue-dark);
  border-bottom: 1px solid var(--color-orange-dark);
}

#center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre,
#center-pane .CodeMirror pre code {
  color: var(--color-blue-dark) !important;
  padding: 1.5rem;
  margin: 1.0rem auto 2.5rem;
  background-color: var(--color-gray-light);
  border: 1px dotted var(--color-gray);
}

/* embedded notes */
div#center-pane div.scrolling-container div.note-detail section.include-note {
  background-color: white;
  margin: 1rem 12rem 1rem;
  box-shadow: var(--shadow-embedded-notes);
  border-radius: var(--border-radius-small);
  padding: 20px 30px;
}

#center-pane code {
  font-family: var(--main-font-family-mono);
}

div#root-widget div#rest-pane div#center-pane div.note-detail img {
  border: 1px solid var(--color-gray);
  padding: .5rem;
}

/* FIGURES & IMAGES */

/* figcaption */
div#root-widget div#center-pane div.split-note-container-widget div.note-detail figure > figcaption {
  font-style: italic;
  background-color: white !important;
}