Stylesheet for Roam Research

roam.css

/* Based on original Dark Age theme by @shodty */

/* MAIN BODY AND BLOCK COLORS */

.roam-body-main {
    margin-top: 45px;
    border-radius: 12px;
    background: var(--background);
    margin-right: 6px;
    margin-left: 9px;
}

.rm-bullet__inner {
    background-color: var(--bullets);
}

.rm-bullet--closed .rm-bullet__inner {
    border: 4px solid var(--closed-bullets) !important;
    /* !important needed */
}

.rm-bullet__inner:hover {
    background-color: var(--icons-hover);
}

.rm-caret {
    color: var(--links--hover);
    opacity: 1 !important;
    /* !important needed */
    position: relative;
    top: -1.5px;
}

.rm-caret-hidden {
    opacity: 0 !important;
    /* !important needed */
}

.rm-caret:hover {
    color: var(--icons-hover);
}

.version-bullet {
    background-color: var(--sidebar-background) !important;
    /* !important needed */
    color: var(--body-text);
}

.rm-block-input {
    color: var(--body-text);
    background-color: var(--sidebar-background);
    padding-left: 6px;
    border-radius: 5px;
}

/* Block reference */

.block-ref-count-button {
    color: var(--icons);
    background: transparent;
    z-index: 1000;
    transition: color 0.3s ease;
    font-family: var(--monospace);
    margin-right: 6px;
    margin-top: 2px;
    border-radius: 0;
}

.block-ref-count-button:hover {
    color: var(--icons-hover);
    transition: color 0.3s ease, border 0.3s ease;
}

.rm-block-ref, span[style*="color: red"] {
    color: var(--body-text);
    border-bottom: var(--references-style) var(--references-color);
}

span[style*="color: red"] {
    color: var(--block-reference-text) !important;
    border-bottom: var(--references-style) var(--references-color);
}

.rm-block-ref:hover, span[style*="color: red"]:hover {
    background-color: var(--kanban-column-background);
    transition: color 0.3s ease;
}

span[style*="color: red"]:hover {
    cursor: nw-resize;
}

/* Filter icon */

.bp3-icon.bp3-icon-filter[style*="color: rgb(168, 42, 42);"] {
    color: var(--filter-icon) !important;
    /* !important needed */
}

/* Inline Block References */

.rm-inline-references {
    background-color: var(--background);
    box-shadow: var(--references-color) 40px 0px 50px -40px inset;
    padding: 5px 20px 5px;
}

.rm-inline-references:before {
    color: var(--block-reference-text);
    content: "Block References";
    font-weight: 500;
}

.rm-zoom-mask {
    color: var(--body-text);
}

.rm-zoom-item-content.rm-zoom-collapsed-item {
    color: var(--references-color);
    text-decoration: underline;
}

.bp3-icon-caret-right {
    color: var(--icons) !important;
    /* !important needed */
}

.squish[style*="color: rgb(138, 155, 168);"]>svg>g>path {
    fill: var(--icons) !important;
    /* !important needed */
}

.bp3-icon-standard.bp3-icon-circle {
    color: var(--icons);
}

/* BETTERROAM-LIKE STYLE Original BetterRoam theme by @linuz90 */

.roam-article {
    padding: 10px 30px 0px 30px !important;
    /* !important needed */
}

.roam-app, .roam-body-main.flex-h-box, .roam-body {
    background: var(--sidebar-background);
}

/*---------------------------------------------------------------------------*/

/* TOPBAR  & SIDEBAR STYLE AND COLORS */

/* Right sidebar and topbar */

#right-sidebar, .rm-topbar {
    background-color: var(--sidebar-background);
}

.sidebar-content {
    margin-left: 4px;
    margin-right: 6px;
    padding: 5px;
    min-width: 100%;
    min-height: 100%;
}

/* Spacing between right sidebar items */

#roam-right-sidebar-content>div>div:nth-child(n)>div {
    padding-top: 11px !important;
    /* !important needed */
    padding-bottom: 11px !important;
    /* !important needed */
}

#roam-right-sidebar-content {
    margin-top: 9px;
    border: 1px solid var(--sidebar-background);
    border-radius: 12px;
    background: var(--background);
    margin-right: 6px;
}

#right-sidebar .rm-title-textarea {
    width: 95%;
}

.roam-main {
    height: 99%;
}

/* fix references layout in right sidebar */

.sidebar-content .rm-reference-container {
    border: 0;
    padding: 0;
}

/* Left sidebar */

.roam-sidebar-container {
    background-color: transparent !important;
    /* !important needed */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.rm-topbar {
    border-bottom: 0;
}

/* Compact formatting */

.log-button, .page, .starred-pages-wrapper, td {
    line-height: normal;
}

/* fix to ensure search popover does not slide under left sidebar when open */

.rm-find-or-create-wrapper:focus-within {
    flex: 1 1 30% !important;
    /* !important needed */
}

div[style*="border-bottom: 1px solid rgb(138, 155, 168);"] {
    border-bottom: 1px solid var(--references-color) !important;
    /* !important needed */
}

div[style*="border-bottom-color: rgb(138, 155, 168);"] {
    border-bottom-color: var(--references-color) !important;
    /* !important needed */
}

/* Ensure right sidebar properly styled via Murf */

#right-sidebar .rm-resize-handle {
    z-index: 1;
}

#right-sidebar {
    height: 99%;
}

/* Hide sidebar button visibility */

.bp3-icon-menu-closed {
    transition: opacity 0.3s ease !important;
    /* !important needed */
}

/* Block search dropdown menu */

.rm-autocomplete-result {
    color: var(--dropdown-menu-text) !important;
    /* !important needed */
}

span[style*="color: rgb(129, 145, 157);"] {
    color: var(--icons) !important;
}

/* Left sidebar text color (CREDIT - Roam-util)*/

.roam-sidebar-container .rm-db-title-container .rm-db-title, .roam-sidebar-container .rm-db-title-container .rm-db-title .bp3-icon.bp3-icon-chevron-down.expand-icon, .starred-pages-wrapper>div>span {
    color: var(--icons);
    transition: color 0.3s ease !important;
    /* !important needed */
}

.log-button, .page {
    color: var(--sidebar-text) !important;
    /* !important needed */
}

/* Left sidebar hover color (CREDIT - Roam-util)*/

.log-button:hover, .page:hover, .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row:hover, .roam-sidebar-container .rm-db-title-container .rm-db-title .bp3-icon.bp3-icon-chevron-down.expand-icon:hover {
    background-color: unset !important;
    /* !important needed */
    color: var(--icons-hover) !important;
    /* !important needed */
    transition: color 0.3s ease !important;
    /* !important needed */
}

/* MOBILE */

/* Mobile bar (HT: Azlen) */

#rm-mobile-bar {
    background-color: var(--sidebar-background) !important;
    /* !important needed */
}

#rm-mobile-bar .bp3-button i::before, #rm-mobile-bar .bp3-button::before {
    color: var(--icons) !important;
    /* !important needed */
}

/* align mobile bar buttons */

.bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block[style*="padding: 6px 4px 4px;"], .bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block[style*="padding: 6.1px 4px 4px;"] {
    margin: 6px 4px;
    transform: scale(1.2);
}

#mobile-more-icon-button>i {
    margin: 14px 4px !important;
    /* !important needed */
    transform: scale(1.2) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* FONTS. TEXT STYLING, AND COLORS */

/* Global Font */

body, div, textarea {
    font-family: var(--global-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rm-italics, em {
    color: var(--italics-color);
}

.rm-bold, strong {
    color: var(--bold-color);
}

/* Headings */

h1 {
    font-size: 2.2em;
}

.rm-title-textarea {
    color: var(--body-text);
}

/* Cursor color */

.roam-body .roam-app {
    caret-color: var(--cursor);
}

/* Body text color */

.roam-body .roam-app {
    color: var(--body-text);
}

/* Left sidebar separator color  */

div[style*="background-color: rgb(57, 75, 89);"] {
    background-color: var(--icons) !important;
    /* !important needed */
}

/* Heading/Header Colors */

.rm-heading-level-1>.rm-block__self .rm-block__input {
    color: var(--heading);
}

.rm-heading-level-2>.rm-block__self .rm-block__input {
    color: var(--heading);
}

.rm-heading-level-3>.rm-block__self .rm-block__input {
    color: var(--heading);
}

/* Page title & Daily date color */

.rm-title-display, .level2, .rm-ref-page-view-title>a {
    color: var(--page-heading) !important;
    /* !important needed */
    font-family: var(--header-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.3s ease;
}

/* Right sidebar collapsed outlines */

#roam-right-sidebar-content a[style*="font-weight: bold; cursor: pointer;"] {
    color: var(--page-heading);
    font-family: var(--header-font);
    font-weight: 500 !important;
    /* !important needed */
    font-size: 1.5em;
}

/* Main link coloring + hover */

.rm-alias--block {
    color: var(--page-links);
    transition: color 0.3s ease;
    text-decoration: var(--references-style) var(--references-color);
}

.rm-alias--page {
    color: var(--page-links);
    transition: color 0.3s ease;
    text-decoration: var(--references-style) var(--references-color);
}

.rm-alias--external, a {
    color: var(--external-links);
    transition: color 0.3s ease;
}

/* Internal Roam Links [[Roam]] & #Roam & #[[Roam]] */

.bp3-text-overflow-ellipsis a, .rm-pages-title-text strong {
    color: var(--page-links);
    font-weight: 500;
    transition: color 0.3s ease;
}

.rm-page-ref, .rm-page-ref--link {
    color: var(--page-links);
    font-weight: 500;
    transition: color 0.3s ease;
}

.rm-page-ref__brackets {
    color: var(--references-color);
}

.rm-page-ref--tag {
    color: var(--hashtags);
    font-weight: 500;
    padding-left: 2px;
    padding-right: 2px;
    transition: color 0.3s ease;
}

.rm-page-ref--tag:hover, .rm-page-ref:hover, .rm-pages-title-text strong:hover, .rm-ref-page-view-title>a>span[style*="text-decoration: underline"] {
    color: var(--links-hover);
    text-decoration: none !important;
    /* !important needed */
    transition: color 0.3s ease;
}

.rm-page-ref--link:hover, a:focus, a:hover {
    color: var(--links-hover);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Attribute links */

.rm-attr-ref {
    color: var(--attributes-color);
}

/* Block and Page embed */

.rm-embed--page.rm-embed-container {
    background-color: var(--background);
    margin-bottom: 0;
    padding: 10px 20px 10px 15px !important;
    /* !important needed */
    border-radius: 5px;
    box-shadow: 0 0 2px 1px var(--references-color);
}

.rm-embed--page.rm-embed-container::before {
    content: "Page Embed";
    color: var(--block-reference-text);
    font-weight: 500;
}

.rm-embed__content .rm-reference-container {
    border: none;
}

.rm-embed__content .rm-reference-main {
    border-color: var(--references-color);
}

.rm-embed-margin-action {
    background-color: var(--closed-bullets) !important;
    /* !important needed */
}

.rm-embed-margin-action.rm-not {
    margin-left: -7px;
}

.rm-embed-margin-action.rm-active {
    margin-left: -7px;
}

.rm-embed-container {
    margin-left: -20px;
    background-color: transparent !important;
}

.rm-embed-edit {
    background-color: transparent !important;
    /* !important needed */
    padding-top: 5px;
}

.rm-embed-inner-block-hide {
    margin: 2px 2px 2px 4px !important;
    /* !important needed */
    background-color: var(--background);
    padding: 3px 10px 3px 3px;
    border-radius: 5px;
    box-shadow: 0 0 2px 1px var(--references-color);
}

.rm-embed-inner-block-hide:before {
    content: "Block Embed";
    color: var(--block-reference-text);
    padding-left: 8px;
    font-weight: 500;
}

.rm-embed-inner-block-hide .roam-block-container.rm-not-focused.block-bullet-view {
    margin-left: 6px;
}

.rm-embed-container .rm-page__title {
    color: var(--page-heading);
    font-family: var(--header-font);
    padding-top: 5px;
}

.rm-nested-refs {
    background-color: transparent;
}

/* Namespace text color [[roam/css]] when using CTRL+C CTRL+L */

.rm-page-ref--namespace {
    color: var(--namespaces);
    font-weight: 600;
    transition: color 0.3s ease;
}

.rm-page-ref--namespace:hover {
    color: var(--links-hover);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Highlights */

.rm-highlight, .rm-highlight:hover {
    color: var(--highlight-text-color);
    background-color: var(--highlighter);
}

.block-highlight-yellow {
    background: var(--dropdown-menu-background) !important;
    /* !important needed */
}

/* highlight adjustments */

.rm-highlight .rm-page-ref--link, .rm-highlight .rm-page-ref--tag, .rm-highlight .rm-page-ref__brackets, .rm-highlight .rm-bold, .rm-highlight .rm-italics {
    background-color: var(--background);
    opacity: 0.9;
    padding: 0px 3px 0px 3px;
}

/* Word Count */

.bp3-button:not([class*="bp3-intent-"]) {
    color: var(--body-text);
    font-family: var(--monospace);
    background: var(--sidebar-background) !important;
    /* !important needed */
    transition: color 0.3s ease;
    padding: 0px 10px 0px 10px;
    transform: scale(0.9);
}

/* Query */

.rm-query-title {
    background: var(--sidebar-background) !important;
    /* !important needed */
    color: var(--block-reference-text) !important;
    /* !important needed */
    font-weight: 500;
    box-shadow: 0 0 2px 1px var(--references-color);
    border-radius: 5px;
    padding-top: 4px !important;
    /* !important needed */
    padding-bottom: 4px !important;
    /* !important needed */
}

.rm-query {
    box-shadow: 0 0 2px 1px var(--references-color);
    border-radius: 5px;
    border: transparent;
    padding: 0;
}

.rm-ref-page-view {
    margin-right: 20px;
}

/* Alias */

span[style*="background-color: rgb(235, 241, 245);"] {
    background: var(--sidebar-background) !important;
    /* !important needed */
    color: var(--block-reference-text) !important;
    /* !important needed */
    border: 1px solid var(--body-text);
    transition: color 0.3s ease, border 0.3s ease;
}

/* diagram */

svg[style*="background-color: rgb(86, 112, 134);"] {
    background: var(--closed-bullets) !important;
    /* !important needed */
}

div[style*="background-color: white"] {
    background: var(--sidebar-background) !important;
    /* !important needed */
}

svg[style*="background-color: rgb(86, 112, 134);"] g rect {
    fill: var(--background);
}

rect[fill="#fff"] {
    fill: var(--links-hover) !important;
    /* !important needed */
}

svg[style*="background-color: rgb(86, 112, 134);"] foreignObject {
    cursor: -webkit-grab;
    cursor: grab;
}

svg[style*="background-color: rgb(86, 112, 134);"] foreignObject .rm-input {
    background-color: transparent !important;
    /* !important needed */
    color: var(--background);
}

line[style*="stroke: black;"] {
    stroke: var(--body-text) !important;
    /* !important needed */
}

button {
    background-color: var(--icons);
    color: var(--background);
}

/* Reaction */

.rm-emoji-button {
    background: transparent !important;
    /* !important needed */
    border: 1px solid #7C6EAD !important;
    /* !important needed */
}

.rm-emoji-number {
    color: var(--body-text);
}

.rm-emoji-tooltip {
    color: var(--page-links);
}

span[style*="color: rgb(167, 182, 194);"] {
    color: var(--body-text) !important;
    /* !important needed */
}

/* chart */

svg[style*="background-color: white;"] {
    background: transparent !important;
    /* !important needed */
}

g circle {
    fill: var(--links-hover) !important;
    /* !important needed */
}

/* Calculation */

.dont-focus-block.rm-calc-val {
    background: var(--kanban-column-background);
    padding: 3px 6px 4px;
    color: var(--body-text);
    border-radius: 5px;
}

.dont-focus-block.rm-calc-val:before {
    content: "❇️";
    color: var(--bold-color);
}

/* Calendar */

.bp3-datepicker {
    background-color: var(--sidebar-background);
}

.DayPicker-Day:hover {
    background: var(--references-color) !important;
    /* !important needed */
}

.bp3-divider {
    border-color: var(--references-color);
}

.bp3-datepicker-caption {
    background-color: #FAFAFA;
    border-radius: 5px;
}

.bp3-datepicker-day-wrapper {
    color: var(--body-text);
}

.bp3-datepicker .DayPicker-Day.DayPicker-Day--outside {
    opacity: 0.4;
}

.bp3-icon-chevron-left, .bp3-icon-chevron-right, .bp3-icon-double-caret-vertical {
    color: var(--icons) !important;
    /* !important needed */
}

/* Kanban Card Styling */

.kanban-column-container {
    background-color: var(--kanban-main-background);
    border-radius: 4px;
}

.kanban-board {
    background-color: transparent;
}

.kanban-title {
    color: var(--links-hover);
}

.kanban-column {
    background-color: var(--kanban-column-background);
    border-radius: 4px;
}

.kanban-card {
    background-color: var(--kanban-card-background);
    border-radius: 4px;
}

.kanban-card:hover {
    color: var(--kanban-text-hover);
    background-color: var(--icons);
    transition: background-color 0.3s ease;
}

/* Pomodoro */

.rm-pomodoro {
    padding: 5px 10px 3px 3px !important;
    /* !important needed */
}

.bp3-button.rm-pomodoro.running {
    background: #E91E63 !important;
    /* !important needed */
    color: var(--body-text) !important;
    /* !important needed */
}

.bp3-button.rm-pomodoro.break {
    background: #4CAF50 !important;
    /* !important needed */
    color: var(--body-text) !important;
    /* !important needed */
}

/* JSS warning */

.bp3-button.dont-focus-block {
    background: var(--sidebar-background);
    color: var(--body-text) !important;
    /* !important needed */
    font-family: var(--monospace);
    font-weight: Bold;
}

div[style*="background: rgb(255, 243, 205);"] {
    background-color: var(--closed-bullets) !important;
    /* !important needed */
    color: var(--body-text) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* REFERENCE SECTION */

/* Reference Background Color + Spacing Fixes */

.rm-reference-item {
    background-color: transparent;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: solid var(--references-color);
}

.rm-level1 {
    margin-bottom: 20px;
}

/* Reference Section Divider */

.rm-reference-container {
    border-top: solid double var(--references-color);
    padding-top: 15px;
}

/* Remove second small line (HT Hasan Yalcinkaya) */

.rm-reference-container .dont-focus-block {
    border-top: 0;
}

/* Daily Notes Divider */

.roam-log-page {
    border-bottom: 1.5px solid var(--references-color) !important;
    /* !important needed */
    border-top: 0 !important;
    /* !important needed */
    padding: 0 0 30px 0 !important;
    /* !important needed */
    margin: 0 !important;
    /* !important needed */
}

.roam-log-page.roam-log-preview {
    color: var(--references-color);
}

/* Path text color for Linked References and Zoom path view */

.parent-path-wrapper {
    color: var(--body-text);
}

.rm-zoom.zoom-path-view {
    margin: 0;
}

.rm-zoom-item-content {
    color: var(--page-links);
}

.rm-zoom-mask {
    background: transparent !important;
    /* !important needed */
}

/* Unlinked References */

strong[style*='color: rgb(206, 217, 224);'] {
    color: var(--bold-color) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* SEARCH BOX */

/* Search box background color */

.bp3-input, .rm-pages-toolbar .toolbar-search-group .search-input {
    background: var(--search-bar-background);
    color: var(--body-text);
}

/* Search box placeholder text color */

.bp3-input::placeholder {
    color: var(--search-bar-text);
    opacity: 0.5;
}

.bp3-input.bp3-active, .bp3-input:focus {
    box-shadow: 0 0 4px 1px var(--references-color);
}

/* Search box "Recent" color */

div[style*="padding: 6px; color: rgb(206, 217, 224);"] {
    padding: 6px;
    color: var(--page-links) !important;
    /* !important needed */
}

/* Search box input text color */

.bp3-input-group input {
    color: var(--search-bar-text);
}

.rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item span[style*="yellow"], .rm-pages-title-col span[style*="yellow"] {
    background-color: var(--highlighter) !important;
    /* !important needed */
    color: var(--highlight-text-color);
}

/* Dropdown page menu hover highlight */

.rm-menu-item:hover {
    background: var(--dropdown-menu-highlight);
}

/* New page text color */

.rm-new-page {
    color: var(--dropdown-newpage) !important;
    /* !important needed */
}

.rm-search-list-item {
    color: var(--dropdown-menu-text) !important;
    /* !important needed */
}

/* Ctrl-Shift-9 menu */

.bp3-dialog-container.bp3-overlay-content.bp3-overlay-enter-done>div>div>div>div:nth-child(n)>input {
    background-color: var(--background);
    color: var(--body-text);
    margin-top: 5px;
    padding: 5px;
    border-radius: 10px;
}

.bp3-menu-item {
    color: var(--body-text);
}

.bp3-menu-item.bp3-active, .bp3-menu-item:hover {
    background-color: var(--background);
}

/*---------------------------------------------------------------------------*/

/* ALL PAGES STYLING */

/* Top bar size fixes */

.rm-all-pages .table .rm-pages-row .rm-pages-checkbox-col {
    padding-right: 0;
}

/* Row background color */

.rm-pages-row.rm-pages-row-header {
    background-color: var(--sidebar-background) !important;
    /* !important needed */
    border-bottom: 1px solid var(--links-hover);
}

.title-children-text {
    color: var(--body-text);
}

.sorted-header-text {
    color: var(--icons-hover);
}

.bp3-icon.bp3-icon-chevron-down.sort-button.desc.focused {
    color: var(--icons-hover);
}

.bp3-icon.bp3-icon-chevron-up.sort-button.focused {
    color: var(--icons-hover);
}

.rm-zoom-chevron {
    color: var(--icons) !important;
    /* !important needed */
}

/* Title Header */

.bp3-text-overflow-ellipsis, .rm-pages-col, .rm-pages-sort-header {
    font-size: 1em;
    color: var(--body-text);
}

/* Mentions Pill */

.rm-clickable-pill, .rm-clickable-pill.level1-pill, .rm-clickable-pill.level2-pill, .rm-clickable-pill.level3-pill, .rm-clickable-pill.level4-pill {
    color: var(--background);
    background: var(--all-pages-mentions);
    opacity: 1;
    padding: 2px 10px;
    width: 42px;
    border-radius: 2px;
}

.rm-clickable-pill.level1-pill {
    background: var(--all-pages-mentions);
    filter: hue-rotate(-10deg);
}

.rm-clickable-pill.level3-pill {
    background: var(--all-pages-mentions);
    filter: hue-rotate(-20deg);
}

.rm-clickable-pill.empty-pill {
    color: #F2F2F2;
    background: var(--background);
}

.rm-clickable-pill:hover {
    background: var(--links-hover);
}

/* Checkbox */

.bp3-control input:checked~.bp3-control-indicator {
    background: rgb(27, 159, 28);
}

.bp3-control input:checked~.bp3-control-indicator:hover {
    background: rgb(1, 122, 69);
}

.bp3-control.bp3-checkbox .bp3-control-indicator {
    border-radius: 25px;
}

/* Dropdown Menu Styling */

.bp3-elevation-3, .bp3-menu, .bp3-popover-content {
    background-color: var(--dropdown-menu-background) !important;
    /* !important needed */
    color: var(--page-links) !important;
    /* !important needed */
}

.bp3-menu {
    border-radius: 10px;
    padding: 2px 8px 8px;
}

.bp3-popover-content {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.bp3-elevation-3 .dont-unfocus-block:hover, .bp3-menu a:hover {
    background: var(--dropdown-menu-highlight);
}

.bp3-elevation-3 .dont-unfocus-block:hover .bp3-text-overflow-ellipsis {
    color: var(--links-hover);
    text-decoration: none;
    transition: color 0.3s ease;
}

.bp3-menu-item-label {
    color: var(--body-text) !important;
    font-size: 1em;
}

.bp3-elevation-3 .dont-unfocus-block[style*="background-color: rgb(213, 218, 223);"], .bp3-popover-content .rm-menu-item[style*="background-color: rgb(213, 218, 223);"] {
    background-color: var(--dropdown-menu-highlight) !important;
}

.bp3-text-overflow-ellipsis {
    color: var(--page-links);
}

button[style*="padding: 4px 8px;"] {
    color: black;
}

.bp3-input.bp3-round.bp3-minimal.search-input {
    background: var(--sidebar-background);
}

.bp3-menu-divider {
    border-color: var(--references-color);
}

button[style*="background-color: white;"] {
    background: transparent !important;
    /* !important needed */
    border: none !important;
    /* !important needed */
    color: var(--references-color) !important;
    /* !important needed */
}

button[style*="background-color: rgba(72, 176, 240, 0.5);"] {
    background: var(--background) !important;
    /* !important needed */
    border: solid 1px var(--icons-hover) !important;
    /* !important needed */
    color: var(--references-color) !important;
    /* !important needed */
}

button[style*="background-color: rgba(72, 176, 240, 0.5);"]:hover, button[style*="background-color: white;"]:hover {
    color: var(--icons-hover) !important;
}

.bp3-icon-standard {
    color: var(--icons) !important;
}

.bp3-icon-standard:hover {
    color: var(--icons-hover) !important;
    transition: color 0.3s ease;
}

/* Button Styling */

.bp3-button {
    background-color: transparent;
    text-transform: initial;
    border: 0;
}

.bp3-button[class*="bp3-icon-"]::before, .bp3-icon-filter, .bp3-button.bp3-minimal.bp3-small, .bp3-icon.bp3-icon-calendar.filter-icon, .bp3-icon.filter-icon.bp3-icon-eye-open, .bp3-button.bp3-icon-calendar, .bp3-icon.bp3-icon-sort {
    color: var(--icons) !important;
    /* !important needed */
    background: transparent !important;
    /* !important needed */
    opacity: 1;
}

.bp3-button[class*="bp3-icon-"]:hover, .bp3-button[class*="bp3-icon-"]:hover::before, .bp3-icon-filter:hover, .bp3-button.bp3-minimal:hover, .bp3-icon.bp3-icon-calendar.filter-icon:hover, .bp3-icon.filter-icon.bp3-icon-eye-open:hover, .bp3-icon.bp3-icon-sort:hover, .bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned, .bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned:before {
    background: transparent !important;
    /* !important needed */
    transition: background 0.1s ease, color 0.3s ease;
    color: var(--icons-hover) !important;
    /* !important needed */
    opacity: 1;
}

.bp3-popover-content .bp3-button {
    background: var(--sidebar-background) !important;
    /* !important needed */
    font-weight: bold;
}

.bp3-icon>svg {
    fill: var(--icons);
}

.bp3-icon>svg:hover {
    fill: var(--icons-hover);
}

.bp3-icon, .icon {
    color: var(--icons) !important;
}

/* Remove shadow border around calendar icon */

.bp3-button:not([class*="bp3-intent-"]), .bp3-button:not([class*="bp3-intent-"]):hover {
    box-shadow: none;
}

/*---------------------------------------------------------------------------*/

/* CODEBLOCK */

/* Dracula CodeMirror theme from https://github.com/codemirror/CodeMirror/blob/master/theme/dracula.css */

@media (prefers-color-scheme: dark) {
    .cm-s-default .CodeMirror-gutters, .cm-s-default.CodeMirror {
        background-color: #282a36;
        color: #f8f8f2;
        border: none;
        border-radius: 6px;
    }
    code {
        background-color: #282a36;
        color: #ff79c6;
        border: 1px solid var(--references-color);
    }
    .cm-s-default .CodeMirror-gutters {
        color: #282a36;
    }
    .cm-s-default .CodeMirror-cursor {
        border-left: solid thin #f8f8f0;
    }
    .cm-s-default .CodeMirror-linenumber {
        color: #6D8A88;
    }
    .cm-s-default .CodeMirror-selected {
        background: rgba(255, 255, 255, 0.10);
    }
    .cm-s-default .CodeMirror-line>span>span::selection, .cm-s-default .CodeMirror-line>span::selection, .cm-s-default .CodeMirror-line::selection {
        background: rgba(255, 255, 255, 0.10);
    }
    .cm-s-default .CodeMirror-line>span>span::-moz-selection, .cm-s-default .CodeMirror-line>span::-moz-selection, .cm-s-default .CodeMirror-line::-moz-selection {
        background: rgba(255, 255, 255, 0.10);
    }
    .cm-s-default span.cm-comment {
        color: #6272a4;
    }
    .cm-s-default span.cm-string, .cm-s-default span.cm-string-2 {
        color: #f1fa8c;
    }
    .cm-s-default span.cm-number {
        color: #bd93f9;
    }
    .cm-s-default span.cm-variable {
        color: #50fa7b;
    }
    .cm-s-default span.cm-variable-2 {
        color: white;
    }
    .cm-s-default span.cm-def {
        color: #50fa7b;
    }
    .cm-s-default span.cm-operator {
        color: #ff79c6;
    }
    .cm-s-default span.cm-keyword {
        color: #ff79c6;
    }
    .cm-s-default span.cm-atom {
        color: #bd93f9;
    }
    .cm-s-default span.cm-meta {
        color: #f8f8f2;
    }
    .cm-s-default span.cm-tag {
        color: #ff79c6;
    }
    .cm-s-default span.cm-attribute {
        color: #50fa7b;
    }
    .cm-s-default span.cm-qualifier {
        color: #50fa7b;
    }
    .cm-s-default span.cm-property {
        color: #66d9ef;
    }
    .cm-s-default span.cm-builtin {
        color: #50fa7b;
    }
    .cm-s-default span.cm-type, .cm-s-default span.cm-variable-3 {
        color: #ffb86c;
    }
    .cm-s-default .CodeMirror-activeline-background {
        background: rgba(255, 255, 255, 0.1);
    }
    .cm-s-default .CodeMirror-matchingbracket {
        text-decoration: underline;
        color: white;
    }
    .CodeMirror * {
        font-family: var(--monospace);
    }
}

/* ToDo Checkbox Fixes */

.check-container input:checked~.checkmark {
    background-color: #FFFFFF;
    background-color: rgb(27, 159, 28);
}

.check-container:hover input~.checkmark {
    background-color: var(--icons);
}

.check-container {
    position: relative;
    top: 2px;
    padding-right: 2px;
}

.checkmark {
    transform: scale(1.1);
    border-width: 1.5px;
    border-color: var(--references-color);
}

/* Scrollbar improvements
HT: Palash Karia */

div::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 20px;
}

div::-webkit-scrollbar-thumb {
    background-color: var(--closed-bullets)!important;
    /* !important needed */
}

div::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 8px;
}

div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border: 5px var(--icons-hover) solid;
}

/* Compact borderless references and queries */

.rm-reference-item {
    padding: 0;
    margin: 0;
    border: 0;
}

.rm-ref-page-view {
    padding-bottom: 10px;
}

.flex-h-box.rm-title-arrow-wrapper {
    padding-bottom: 3px;
}

/*---------------------------------------------------------------------------*/

/* MERMAID Customization */

.bp3-card.dont-focus-block, .rm-mermaid {
    background: var(--sidebar-background);
}

/*---------------------------------------------------------------------------*/

/* MISCELLANEOUS MENUS, BUTTONS, POP-UPS */

.bp3-dialog-container.bp3-overlay-content.bp3-overlay-appear-done.bp3-overlay-enter-done {
    color: var(--body-text) !important;
    /* !important needed */
}

.bp3-button.bp3-intent-danger {
    color: var(--body-text) !important;
    /* !important needed */
    background: #E91E63 !important;
    /* !important needed */
}

.bp3-dialog-container.bp3-overlay-content.bp3-overlay-enter-done {
    color: var(--body-text) !important;
    /* !important needed */
}

.confirmation-content-dialog .confirmation-content {
    background-color: var(--background);
}

/*---------------------------------------------------------------------------*/

/* HELP MODAL (new Feb 2021) */

.rm-help-popup__drag-handle.bp3-card.bp3-elevation-2 {
    background: transparent !important;
    /* !important needed */
}

.rm-help-title {
    color: var(--page-links);
}

.bp3-icon-search {
    color: var(--icons);
}

.rm-help-search__icon-container {
    border: none;
    padding-right: 10px;
}

.rm-help-search__input {
    border-radius: 10px;
    border: solid 1px var(--references-color);
}

.rm-help-categories, .rm-help-function__name, .rm-help-markdown-function__markdown {
    color: var(--body-text) !important;
    /* !important needed */
}

.rm-help-markdown-function .rm-strikethrough, .rm-help-markdown-function .mord, .rm-help-resource__description, .rm-help-markdown-function .rm-level1, .rm-help-markdown-function .rm-level2, .rm-help-markdown-function .rm-level3, .rm-help-component__description {
    color: var(--body-text);
}

.rm-help-resource__title, .rm-help-component__title {
    color: var(--attributes-color);
}

.rm-help-category__name {
    color: var(--bold-color) !important;
    /* !important needed */
}

.rm-help-function__shortcut {
    color: var(--italics-color) !important;
    /* !important needed */
}

.rm-help-popup {
    background-color: var(--sidebar-background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 20px;
}

.rm-help-category-menu-item--selected, .rm-help-resource:hover {
    background-color: var(--background) !important;
    /* !important needed */
}

.rm-help-category-menu-item:hover {
    background-color: unset !important;
    /* !important needed */
    color: var(--links-hover);
}

.rm-help-category-menu-item--selected:hover {
    color: var(--links-hover) !important;
    /* !important needed */
    background-color: var(--background) !important;
    /* !important needed */
}

.rm-help-version {
    color: var(--body-text);
}

/*---------------------------------------------------------------------------*/

/* GRAPH VIEW */

/* you can't actually style the graph view because it uses canvas elements, but we *can* apply CSS filters to it to slightly change the appearance */

canvas[data-id="layer2-node"] {
    /*filter: invert(1) drop-shadow(0px 3px 4px rgba(0,0,0,0.1));*/
    filter: invert(1) hue-rotate(110deg) saturate(2.5);
    opacity: 0.3;
    transition: opacity 0.2s ease-out;
}

*[id*="cyto-wrapper"]:hover canvas[data-id="layer2-node"] {
    opacity: 1;
}

/*---------------------------------------------------------------------------*/

/* DB DROPDOWN SELECTOR */

.bp3-menu-item.setting {
    background-color: transparent !important;
    /* !important needed */
}

.bp3-menu-item.setting:hover {
    background-color: var(--dropdown-menu-highlight) !important;
    /* !important needed */
}

.bp3-icon.bp3-icon-cog.icon.settings {
    color: var(--icons);
    padding-bottom: 1px;
}

.flex-h-box.top-row .bp3-menu-item.setting>a {
    color: var(--body-text);
}

.flex-h-box.top-row .bp3-menu-item.setting>a:hover, .bp3-menu-item.menu-item:hover {
    background-color: var(--dropdown-menu-highlight);
    color: var(--body-text);
}

.menu-title {
    color: var(--page-links) !important;
    /* !important needed */
}

.signout {
    color: var(--bold-color);
}

.bp3-menu.rm-graph-dropdown {
    opacity: 1 !important;
    /* !important needed */
    box-shadow: none !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* UPDATE ALERTS AND VARIOUS SPECIAL MENUS */

body>div.bp3-portal>div>div>span>div>span>strong, body>div:nth-child(10)>div>div>span>div>span>strong {
    color: var(--body-text) !important;
    /* !important needed */
}

body>div.bp3-portal>div>div>div>button>span>svg>path, body>div:nth-child(10)>div>div>div>button>span>svg>path {
    color: var(--body-text) !important;
    /* !important needed */
}

.rm-modal-dialog {
    background-color: var(--sidebar-background);
}

.bp3-heading {
    color: var(--page-links);
}

.bp3-dialog {
    background-color: var(--sidebar-background);
}

.bp3-dialog-header {
    background-color: var(--background);
}

/* Share menu */

#db-permissions-modal textarea {
    background-color: var(--background) !important;
    /* !important needed */
    padding: 5px !important;
    /* !important needed */
    border: transparent;
    border-radius: 5px;
    margin-top: 10px;
}

#db-permissions-modal>div>div:nth-child(3)>div>div.flex-v-box>span, #db-permissions-modal>div>div:nth-child(4)>div>div>span {
    display: none;
}

/* Various input boxes */

.rm-display-name-settings>input, .import-table input {
    background-color: var(--background) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* FIX SELECTION COLOR AND BLOCK-HIGLIGHTS */

.block-highlight-blue, ::selection {
    background-color: var(--closed-bullets) !important;
    /* !important needed */
}

/* {{or}} dropdown */

.rm-option {
    background-color: var(--sidebar-background);
    color: var(--italics-color);
    font-style: italic;
    border: var(--references-style) var(--references-color);
    border-radius: 4px;
    padding-right: 15px;
    margin: 0 2px 0 2px;
}

.rm-option::after {
    border-top-color: var(--body-text);
}

.rm-option:hover {
    cursor: default;
}

/*---------------------------------------------------------------------------*/

/* ATTRIBUTE TABLE */

span[style*="background-color: rgb(14, 90, 138);"] {
    background-color: unset !important;
    /* !important needed */
    border-radius: 5px;
}

/*---------------------------------------------------------------------------*/

/* Block quote styling */

.rm-bq {
    background-color: var(--sidebar-background);
    color: var(--italics-color);
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: var(--references-color);
    font-family: var(--header-font);
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.rm-bq::before {
    content: "❝\A";
    white-space: pre;
    font-size: 100%;
    color: var(--references-color);
}

.rm-bq::after {
    content: "\A❞";
    white-space: pre;
    color: var(--references-color);
    font-size: 100%;
}

.rm-alias-tooltip__content .rm-bq {
    color: var(--bold-color);
}

/*---------------------------------------------------------------------------*/

.rm-bullet__tooltip {
    font-size: 1em;
    color: var(--body-text);
}

.bp3-popover-content {
    padding: 5px !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* Better Quick Capture Sync Modal */

.rm-quick-capture-sync-modal {
    border-radius: 5px;
    background-color: var(--sidebar-background);
}

.bp3-button.bp3-intent-primary.bp3-large {
    color: var(--body-text);
    background-color: #D9822B !important;
    /* !important needed */
    border: none;
    box-shadow: none;
}

.bp3-button.bp3-intent-primary.bp3-large:hover {
    color: var(--links-hover) !important;
    /* !important needed */
}

#quick-capture-history {
    color: var(--bold-color);
    font-size: 16px;
    width: 90% !important;
    /* !important needed */
    padding: 20px;
    border-radius: 5px;
    background-color: var(--background);
}

#quick-capture-history .level3 {
    color: var(--page-links);
    font-family: var(--header-font);
    font-size: 20px;
}

#quick-capture-history>div>li {
    color: var(--body-text);
}

/*---------------------------------------------------------------------------*/

/* HR line styling */

.rm-hr {
    border-color: var(--references-color);
    margin: 8px 0px 0px 0px;
}

/*---------------------------------------------------------------------------*/

/* In-line comments */

.rm-paren {
    color: var(--body-text);
    background-color: var(--kanban-column-background);
    border: none;
    border-radius: 8px;
    padding: 2px 5px 4px;
    transition: color 0.3s ease;
}

.rm-spacer {
    font-size: 1.1em;
    position: relative;
    top: 2px;
    color: var(--references-color);
}

.rm-spacer:hover {
    color: var(--links-hover);
}

.rm-paren__paren {
    color: var(--references-color);
}

.rm-paren__paren--left {
    padding-right: 3px;
}

.rm-paren__paren--right {
    padding-left: 3px;
}

.rm-paren__paren:hover {
    color: var(--links-hover);
    background-color: transparent;
}

.rm-paren:hover {
    cursor: crosshair;
    background-color: var(--kanban-column-background);
}

/*---------------------------------------------------------------------------*/

/* Resize styling */

.rm-resize-handle:hover {
    border-left: dashed var(--icons-hover);
    transition: border 0.3s ease;
}

div::-webkit-resizer {
    border-style: solid;
    border-color: transparent var(--references-color);
    background-color: transparent;
}

/*---------------------------------------------------------------------------*/

/* Cloze styling */

.rm-block__part--equals {
    background-color: #A5494F;
    border: none;
    border-radius: 5px;
    padding: 3px 3px 3px 4px;
    cursor: help;
}

.rm-block__part--equals:hover {
    background-color: #48864D;
}

.bp3-card {
    background-color: var(--sidebar-background);
    border: none;
    color: var(--body-text);
    padding: 3px 5px 3px 5px;
    box-shadow: none;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    width: unset;
    max-width: 30vw;
    text-align: justify;
    text-justify: inter-word;
    max-height: 60vh;
    overflow-y: auto;
}

/* Cloze block embeds */

.bp3-card .rm-embed-container {
    margin-left: -2px !important;
    /* !important needed */
}

.bp3-card .rm-hide-bullet {
    background-color: transparent;
}

/*---------------------------------------------------------------------------*/

/* Mobile scrollable right sidebar in portrait mode */

@media only screen and (max-width: 390px) {
    .roam-body {
        overflow-x: scroll !important;
        /* !important needed */
        display: flex;
        background-color: var(--sidebar-background);
        max-width: 100%;
    }
    .roam-main {
        min-width: 95vw;
    }
    #right-sidebar[style*="flex: 0 0 40%;"] {
        flex: 0 0 95% !important;
        /* !important needed */
    }
}

/* Mobile compact view */

@media (max-device-width: 800px) {
    .roam-article {
        padding: 0px 15px 0px 25px !important;
        /* !important needed */
    }
    .rm-find-or-create-wrapper:focus-within {
        flex: 1 1 auto !important;
        /* !important needed */
    }
}

/*---------------------------------------------------------------------------*/

/* Encrypted block */

.rm-encrypted-block {
    color: var(--italics-color);
}

.rm-encrypted-passphrase>form {
    color: var(--body-text);
}

.rm-encrypted-passphrase>form>input {
    background-color: var(--sidebar-background);
}

/*---------------------------------------------------------------------------*/

/* Grey prompts e.g., click here to start a daily note */

span[style*="color: rgb(206, 217, 224);"], .rm-right-sidebar__helper-text {
    color: var(--bold-color) !important;
    /* !important needed */
    font-style: italic !important;
    /* !important needed */
}

.simple-bullet-inner {
    background-color: var(--bullets) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* On hover level 0 multibar */

.rm-level-0>.rm-multibar:hover {
    border-right-color: var(--icons-hover) !important;
    /* !important needed */
}

/*---------------------------------------------------------------------------*/

/* New Command Palette and Settings */

.rm-command-palette__scroll-container .bp3-menu .rm-menu-item--active, .rm-command-palette__scroll-container .bp3-menu .rm-menu-item--active:hover, .rm-settings input.rm-display-name-settings__input, .rm-settings input.rm-display-name-settings__input:focus, .rm-settings .bp3-tabs .bp3-tab-list, .rm-settings .select-wrapper {
    background-color: var(--background);
}

.rm-settings .bp3-tabs .bp3-tab[aria-selected="true"], .rm-settings .bp3-tabs .bp3-tab:hover, .rm-settings .bp3-tabs .bp3-tab-panel {
    background-color: var(--sidebar-background) !important;
    /* !important needed */
}

.bp3-tab {
    color: var(--body-text);
}

.rm-settings .rm-settings-panel .rm-settings-panel__description {
    color: var(--italics-color);
}

.rm-settings__tab, .rm-settings-heading {
    color: var(--body-text) !important;
    /* important needed */
}

.rm-settings .rm-settings-panel .rm-select-wrapper {
    background-color: var(--background);
}

.rm-settings input[type="text"], .rm-settings input[type="text"]:focus {
    background-color: var(--background);
}

.rm-command-palette__shortcut {
    background-color: var(--background);
}

/*---------------------------------------------------------------------------*/

/* Excalidraw adjustments */

.ex-header-wrapper-light {
    background-color: var(--sidebar-background);
}

.ex-header-title-light {
    background-color: var(--background);
}

@import url('https://fonts.googleapis.com/css?family=Commissioner|Crimson+Text|Fira+Code|Bitter|Work+Sans');
@media (prefers-color-scheme: light) {
    :root {
        /* FONTS */
        --global-font: 'Work Sans', sans-serif;
        --monospace: 'Fira Code', monospace;
        --header-font: 'Bitter', serif;
        /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */
        --reduce-padding-right: 3400px;
        --reduce-padding-left: 3400px;
        /* COLORS - One light*/
        --page-links: #283593;
        --attributes-color: #283593;
        --external-links: #50A14E;
        --links-hover: #E4564A;
        --hashtags: #A626A4;
        --body-text: #292D31;
        --italics-color: #292D31;
        --bold-color: #292D31;
        --highlight-text-color: #292D31;
        --highlighter: #FFFF80;
        --background: #FAFAFA;
        --sidebar-background: #EAEAEB;
        --sidebar-text: #292D31;
        --page-heading: #283593;
        --daily-heading: #283593;
        --heading: #292D31;
        --bullets: #3F51B5;
        --closed-bullets: #3F51B577;
        --references-color: #3F51B5;
        --references-style: 1px dashed;
        --namespaces: #E4564A;
        --all-pages-mentions: #0184BC;
        --cursor: #292D31;
        --icons: #3F51B5;
        --icons-hover: #E4564A;
        --filter-icon: #50A14E;
        /* DROPDOWN MENU */
        --dropdown-menu-background: #EAEAEB;
        --dropdown-menu-highlight: #FAFAFA;
        --dropdown-menu-text: #292D31;
        --dropdown-newpage: #0184BC;
        /* SEARCH BAR */
        --search-bar-background: #F7F8FA;
        --search-bar-text: #292D31;
        /* KANBAN CARD COLORS */
        --kanban-main-background: #FAFAFA;
        --kanban-column-background: #EAEAEB;
        --kanban-card-background: #FAFAFA;
        --kanban-text-hover: #E4564A;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* FONTS */
        --global-font: 'Work Sans', sans-serif;
        --monospace: 'Fira Code', monospace;
        --header-font: 'Bitter', serif;
        /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */
        --reduce-padding-right: 3400px;
        --reduce-padding-left: 3400px;
        /* COLORS (Material Dark theme) */
        --page-links: #BB86FC;
        --attributes-color: #FFFF80;
        --external-links: #8AFF80;
        --links-hover: #03DAC6;
        --hashtags: #FE7FBF;
        --body-text: #A49C92;
        --italics-color: #03DAC6;
        --bold-color: #A49C92;
        --highlight-text-color: #000000;
        --highlighter: #FFFF80;
        --background: #000000;
        --sidebar-background: #121212;
        --sidebar-text: #A49C92;
        --page-heading: #A49C92;
        --daily-heading: #A49C92;
        --headings: #A49C92;
        --bullets: #A49C92;
        --closed-bullets: #A49C9291;
        --references-color: #A49C92;
        --references-style: 1px dashed;
        --block-reference-text: #A49C92;
        --namespaces: #03DAC6;
        --all-pages-mentions: #A49C92;
        --cursor: #A49C92;
        --icons: #A49C92;
        --icons-hover: #92FFFF;
        --filter-icon: #8AFF80;
        /* DROPDOWN MENU */
        --dropdown-menu-background: #121212;
        --dropdown-menu-highlight: #000000;
        --dropdown-menu-text: #A49C92;
        --dropdown-newpage: #A49C92;
        /* SEARCH BAR */
        --search-bar-background: #000000;
        --search-bar-text: #A49C92;
        /* KANBAN CARD COLORS */
        --kanban-main-background: #000000;
        --kanban-column-background: #121212;
        --kanban-card-background: #000000;
        --kanban-text-hover: #03DAC6;
    }
    .rm-alias--external {
        color: var(--fg-link);
    }
    .rm-alias--external:after {
        content: ‘ ↗’;
    }
    .rm-alias--external:hover {
        text-decoration: none!important;
        border-bottom: 1px dashed;
    }
    .rm-alias--external {
        text-decoration: none!important;
        border-bottom: 1px solid;
    }
    div::-webkit-scrollbar {
        width: 10px;
    }
    div::-webkit-scrollbar-track {
        background-color: #9993 !important;
    }
    div::-webkit-scrollbar-thumb {
        background-color: #9999 !important;
    }
    /* Tag Decorations */
    span.rm-page-ref[data-tag="text"]:before {
        content: '📄 ';
    }
    span.rm-page-ref[data-tag="comment"]:before {
        content: '💬 ';
    }
    span.rm-page-ref[data-tag="directive"]:before {
        content: '👉 ';
    }
    span.rm-page-ref[data-tag="idea"]:before {
        content: '💡 ';
    }
    span.rm-page-ref[data-tag="caution"]:before {
        content: '⚠️ ';
    }
    span.rm-page-ref[data-tag="question"]:before {
        content: '❓ ';
    }
    span.rm-page-ref[data-tag="event"]:before {
        content: '📅 ';
    }
    span.rm-page-ref[data-tag="note"]:before {
        content: '📎 ';
    }
    span.rm-page-ref[data-tag="setting"]:before {
        content: '📍 ';
    }
    span.rm-page-ref[data-attribute="Goal"]:before {
        content: '🏅 ';
    }
    span.rm-page-ref[data-attribute="Conflict"]:before {
        content: '💢 ';
    }
    span.rm-page-ref[data-attribute="Disaster"]:before {
        content: '🔥 ';
    }
    span.rm-page-ref[data-attribute="Reaction"]:before {
        content: '🔄 ';
    }
    span.rm-page-ref[data-attribute="Dilemma"]:before {
        content: '🔶 ';
    }
    span.rm-page-ref[data-attribute="Decision"]:before {
        content: '✅ ';
    }
    span[data-link-title="INCOMPLETE"] .rm-page-ref {
        color: #ee4f00 !important;
    }
}