/*
 * USER INTERFACE
 */

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

:root {
    --dropdown-backdrop-filter: blur(10px) saturate(6);
    --dropdown-border-radius: 10px;
}

#root-widget {
    background-color: var(--root-background);
}

body {
    --native-titlebar-darwin-x-offset: 10;
    --native-titlebar-darwin-y-offset: 17 !important;
}

body.layout-horizontal {
    --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
    --launcher-pane-size: var(--launcher-pane-horizontal-size);
    --active-tab-background-color: var(--launcher-pane-background-color);
    --active-tab-hover-background-color: var(--active-tab-background-color);
    --new-tab-button-background: transparent;
    --tab-bar-height: 44px;
    --native-titlebar-darwin-x-offset: 12;
    --native-titlebar-darwin-y-offset: 14 !important;
}

body.mobile {
    --hover-item-background-color: transparent;
}

/* #region Mica */
body.background-effects.platform-win32 {
    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
    --launcher-pane-background-color: rgba(255, 255, 255, 0.7);
    --tab-background-color: transparent;
    --new-tab-button-background: transparent;
    --active-tab-background-color: var(--launcher-pane-background-color);
    --background-material: tabbed;
}

@media (prefers-color-scheme: dark) {
    body.background-effects.platform-win32 {
        --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5);
        --launcher-pane-background-color: rgba(255, 255, 255, 0.09);
    }
}

body.background-effects.platform-win32.layout-vertical {
    --left-pane-background-color: transparent;
    --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
    --left-pane-item-hover-background: rgba(127, 127, 127, 0.05);
    --background-material: mica;
}

body.background-effects.platform-win32,
body.background-effects.platform-win32 #root-widget,
body.background-effects.platform-win32 #launcher-pane .launcher-button {
    background: transparent !important;
}

body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,
body.background-effects.platform-win32.layout-vertical #vertical-main-container {
    background-color: var(--root-background);
}
/* #endregion */

/* Matches when the left pane is collapsed */
:has(#left-pane.hidden-int) {
    --center-pane-border-radius: 0;
    --tab-first-item-horiz-offset: 5px;
}

:has(#left-pane.hidden-int) #launcher-pane.vertical {
    border-right: 2px solid var(--left-pane-collapsed-border-color);
}

/*
 * Global menu
 */

.global-menu div.zoom-buttons a {
    border: unset;
}

.global-menu div.zoom-buttons a.bx {
    color: var(--menu-text-color) !important;
}

/*
 *  Launcher pane
 */
#launcher-container,
body.layout-horizontal > .horizontal {
    align-items: center;
}

#launcher-pane.vertical {
    width: var(--launcher-pane-size) !important;
    padding-bottom: var(--launcher-pane-button-gap);
}

#launcher-pane.horizontal {
    height: var(--launcher-pane-size) !important;
    align-items: center;
}

@media (max-width: 991px) {
    #mobile-bottom-bar {
        background: var(--launcher-pane-background-color);
    }

    body.mobile #launcher-pane {
        background: transparent !important;
    }
}

@media (min-width: 992px) {
    #launcher-pane.horizontal {
        border-top: unset;
        border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
    }
}

#launcher-pane .launcher-button,
#launcher-pane .dropdown {
    width: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
    height: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
    margin: var(--launcher-pane-button-gap) var(--launcher-pane-button-margin);
}

#launcher-pane .launcher-button {
    padding: 0 !important;
    border-radius: 8px;
    transition:
        background-color 300ms ease-out,
        color 300ms ease-out,
        box-shadow 300ms ease-out;
    cursor: default;
}

#launcher-pane .dropdown .launcher-button {
    margin: 0;
}

#launcher-pane .launcher-button:active,
#launcher-pane .launcher-button.show {
    transform: scale(0.9);
    transition: transform 50ms linear;
}

#launcher-pane .launcher-button:hover,
#launcher-pane .launcher-button.right-dropdown-button.show,
#launcher-pane.horizontal .global-menu-button:hover,
#launcher-pane.horizontal .global-menu-button.show {
    background: var(--launcher-pane-button-hover-background) !important;
    color: var(--launcher-pane-button-hover-color);
    box-shadow: var(--launcher-pane-button-hover-shadow);
    transition:
        background-color 100ms ease-in,
        color 80ms ease-in,
        box-shadow 100ms ease-in;
}

#launcher-pane div.launcher-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#launcher-pane.vertical .spacer {
    width: var(--launcher-pane-size);
}

#launcher-pane.horizontal .spacer {
    height: var(--launcher-pane-size);
}

/* Protected session enabled button */

#launcher-pane button.bx-check-shield,
#launcher-pane button.bx-check-shield:hover {
    color: var(--protected-session-active-icon-color);
    transition: color 500ms ease-in-out;
}

/* Sync status button */

#launcher-pane .sync-status .sync-status-icon {
    top: 3px;
}

#launcher-pane .sync-status-icon:not(.sync-status-in-progress):hover {
    background: unset;
}

@keyframes sync-status-pulse {
    from {
        color: currentColor;
    }
    to {
        color: var(--pulse-color);
    }
}

#launcher-pane .sync-status-disconnected-with-changes {
    --pulse-color: var(--sync-status-error-pulse-color);
    animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
}

#launcher-pane.horizontal .launcher-button {
    font-size: var(--launcher-pane-horizontal-icon-size);
}

#launcher-pane .global-menu-button {
    --hover-item-background-color: transparent;
}

#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
    right: -23px;
    bottom: -22px;
    transform: scale(0.85);
}

.tooltip .tooltip-arrow {
    display: none;
}

.tooltip .tooltip-inner {
    padding: 6px 10px !important;
    box-shadow:
        -1px -1px 2px var(--tooltip-shadow-color),
        2px 2px 8px var(--tooltip-shadow-color) !important;
    border: unset !important;
    border-radius: 6px;
    backdrop-filter: blur(5px);
    color: var(--tooltip-foreground-color) !important;
}

/* 
  * Search Box
  */

div.quick-search {
    --padding-top: 8px;
    --padding-left: 8px;
    --padding-right: 8px;
    --padding-bottom: 8px;

    position: relative;
    flex-direction: row-reverse;
    align-items: center;
    height: unset;
    contain: unset;
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

div.quick-search, div.quick-search:hover, div.quick-search:focus-within {
    /* Prevent changes to background and outline when the state of the input group changes */
    background: transparent;
    outline: none;
}

div.quick-search::before {
    /* The background rectangle of the search box */
    position: absolute;
    content: "";
    top: var(--padding-top);
    left: var(--padding-left);
    bottom: var(--padding-bottom);
    right: var(--padding-right);
    z-index: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--quick-search-background);
    transition: background-color 200ms ease-in;
}

div.quick-search:hover:before {
    /* Hovered search box background rectangle */
    background: var(--quick-search-hover-background);
    transition: background-color 75ms ease-out;
}

div.quick-search:focus-within:before {
    /* Focused search box background rectangle */
    border-color: var(--quick-search-focus-border);
    background: var(--quick-search-focus-background);
    transition: background-color 100ms ease-out;
}

div.quick-search input {
    padding-left: 15px !important;
    box-shadow: unset !important;
    background: transparent !important;
}

div.quick-search input::placeholder {
    color: var(--quick-search-color);
}

div.quick-search:focus-within input {
    color: var(--quick-search-focus-color) !important;
}

div.quick-search .search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 50%;
    padding: 0;
    color: var(--quick-search-color) !important;
    transition: background-color 200ms ease-in !important;
}

div.quick-search .search-button:active {
    transform: scale(0.85);
}

div.quick-search:focus-within:has(input:not(:placeholder-shown)) .search-button {
    /* Matches when the input has a value and the focus is inside the search box */
    background: var(--left-pane-item-action-button-background) !important;
    color: var(--left-pane-item-action-button-color) !important;
    transition: background-color 500ms ease-out !important;
}

html body .quick-search:focus-within .search-button:hover,
div.quick-search .search-button.show {
    /* Hover state */
    background: var(--left-pane-item-action-button-hover-background) !important;
    color: var(--left-pane-item-action-button-color) !important;
    transition: background-color 100ms ease-out !important;
}

/*
 * Quick search results
 */

/* Item */
.quick-search .dropdown-menu *.dropdown-item {
    padding: 8px 12px !important;
}

/* Note icon */
.quick-search .dropdown-menu .dropdown-item > .bx {
    position: relative;
    top: 1px;
}

/* Note title */
.quick-search .dropdown-menu .dropdown-item > a {
    color: var(--menu-text-color);
}

.quick-search .dropdown-menu .dropdown-item > a:hover {
    --hover-item-background-color: transparent;
    text-decoration: underline;
}

/* Note path */
.quick-search .dropdown-menu small {
    display: block;
    opacity: 0.5;
    font-size: 0.75em;
    overflow: hidden;
}

/*
 * Left pane
 */

/* Tree */

#left-pane div.tree {
    padding: 3px 6px 40px 6px;
    animation: fade-in 200ms ease-in;
}

#left-pane span.fancytree-node {
    border: unset;
    border-radius: 6px;
    cursor: default;
}

#left-pane .ui-fancytree ul {
    padding-left: 10px;
}

/* The root element of the tree */
#left-pane .fancytree-container > li:first-child > span {
    padding-left: 12px;
}

#left-pane span.fancytree-node.fancytree-active {
    position: relative;
    background: transparent !important;
    color: var(--left-pane-item-selected-color) !important;
}

@keyframes left-pane-item-select {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#left-pane span.fancytree-node.fancytree-active::before {
    position: absolute;
    content: "";
    top: var(--left-pane-item-selected-shadow-size);
    left: var(--left-pane-item-selected-shadow-size);
    bottom: var(--left-pane-item-selected-shadow-size);
    right: var(--left-pane-item-selected-shadow-size);
    background: var(--left-pane-item-selected-background) !important;
    box-shadow: var(--left-pane-item-selected-shadow);
    border-radius: 6px;
    animation: left-pane-item-select 200ms ease-out;
    z-index: -1;
}

#left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
    position: relative;
    filter: unset !important;
}

#left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 14px;
    content: "\eb4a";
    font-family: "boxicons";
    transform: translateX(25%);
    background: var(--left-pane-background-color);
    border-radius: 50%;
}

body.mobile .fancytree-expander::before,
body.mobile .fancytree-title,
body.mobile .fancytree-node > span {
    font-size: 1rem !important;
}

@media (max-width: 991px) {
    body.mobile #mobile-sidebar-container {
        background-color: rgba(0, 0, 0, 0.5);
    }

    body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-right: 1px solid var(--subtle-border-color);
    }
}

#left-pane .fancytree-expander {
    opacity: 0.65;
    transition: opacity 150ms ease-in;
}

#left-pane .fancytree-expander:hover {
    opacity: 1;
    transition: opacity 300ms ease-out;
}

#left-pane .fancytree-custom-icon {
    margin-top: 0; /* Use this to align the icon with the tree view item's caption */
}

#left-pane span .fancytree-title {
    margin-top: -5px;
}

#left-pane span.fancytree-active .fancytree-title {
    font-weight: normal;
}

#left-pane span.fancytree-node:hover {
    background: var(--left-pane-item-hover-background);
}

#left-pane span.fancytree-node.shared .fancytree-title::after {
    opacity: 0.5;
}

#left-pane .tree-item-button {
    margin-right: 6px;
    border: unset;
    border-radius: 50%;
    background: var(--left-pane-item-action-button-background);
    color: var(--left-pane-item-action-button-color);
    transition:
        background-color 200ms ease-out,
        box-shadow 200ms ease-out;
}

#left-pane .tree-item-button:hover {
    background: var(--left-pane-item-action-button-hover-background);
    box-shadow: var(--left-pane-item-action-button-hover-shadow);
    transition:
        background-color 100ms ease-in,
        box-shadow 100ms ease-in;
}

#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover {
    box-shadow: var(--left-pane-item-selected-action-button-hover-shadow);
}

#context-menu-container {
    /* The context menu of the tree */
    --menu-item-icon-vert-offset: -1px;
}

/* Tree actions toolbar */

/* Toolbar container (collapsed state) */
#left-pane .tree-actions {
    max-width: var(--tree-actions-toolbar-collapsed-width);
    right: var(--tree-actions-toolbar-horizontal-margin);
    bottom: var(--tree-actions-toolbar-vertical-margin);
    overflow: hidden;
    border: 1px solid transparent;
    padding: var(--tree-actions-toolbar-padding-size);
    padding-right: var(--tree-actions-toolbar-collapsed-width);
    background: transparent;
    transition:
        max-width 400ms ease-out,
        background-color 400ms ease-out,
        border-color 400ms ease-out;
}

/* Toolbar container (expanded state) */
#left-pane .tree-actions:hover {
    max-width: 200px;
    border-color: var(--dropdown-border-color);
    background: var(--menu-background-color);
    backdrop-filter: blur(10px) saturate(6);
    box-shadow: 0 5px 10px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
}

/* Toolbar button (toolbar collapsed)*/
#left-pane .tree-actions button {
    border: unset;
    color: var(--menu-item-icon-color);
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* Toolbar button on hover */
#left-pane .tree-actions button:hover {
    background: var(--hover-item-background-color);
}

/* Toolbar button (toolbar expanded) */
#left-pane .tree-actions:hover button {
    opacity: 1;
    transition: opacity 250ms ease-in;
}

/* The floating expand button (toolbar collapsed) */
#left-pane .tree-actions::after {
    display: flex;
    content: "\eab4";
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 50%;
    right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
    width: var(--tree-actions-toolbar-expand-button-size);
    height: var(--tree-actions-toolbar-expand-button-size);
    box-shadow: 2px 2px 6px var(--left-pane-background-color);
    border-radius: 50%;
    background: var(--left-pane-item-action-button-background);
    backdrop-filter: blur(10px);
    color: var(--left-pane-item-action-button-color);
    font-family: boxicons;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    transition: color 200ms ease-in;
}

/* The floating expand button (toolbar expanded) */
#left-pane .tree-actions:hover::after {
    background: transparent;
    color: var(--menu-item-icon-color);
    opacity: var(--menu-item-disabled-opacity);
    transition: color 200ms ease-out;
}

/*
 * Tree settings popup
 */

#left-pane .tree-settings-popup {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
    border: 1px solid var(--dropdown-border-color);
    padding: 25px;
    background: var(--menu-background-color);
    backdrop-filter: blur(10px) saturate(6);
    color: var(--menu-text-color);
}

#left-pane .tree-settings-popup h4 {
    margin-bottom: 0.75em;
    font-size: 1.5em;
    line-height: 1;
}

/*
 * Gutter
 */

.gutter {
    background: var(--gutter-color) !important;
    transition: background 150ms ease-out;
}

.gutter:hover {
    background: var(--gutter-hover-color) !important;
    transition: background 300ms ease-in;
}

/*
 * Tab bar
 */

/* The parent element of the tab bar */
#rest-pane > div.component:first-child {
    height: var(--tab-bar-height) !important;
}

.tab-row-widget,
.tab-row-container {
    background: transparent !important;
    height: var(--tab-bar-height) !important;
}

.tab-row-container .toggle-button {
    margin: 6px 10px !important;
}

.tab-row-container {
    position: relative;
}

/* #region Apply a border to the tab bar that avoids the current tab but also allows a transparent active tab. */
body.layout-horizontal .tab-row-widget,
body.layout-horizontal .tab-row-widget-container,
body.layout-horizontal .tab-row-container .note-tab[active] {
    overflow: visible !important;
}

body.layout-horizontal .tab-row-container .note-tab[active]:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100vw;
    top: var(--tab-height);
    right: calc(100% - 1px);
    height: 1px;
    border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
}

body.layout-horizontal .tab-row-container .note-tab[active]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    top: var(--tab-height);
    right: 0;
    width: 100vw;
    height: 1px;
    border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
}
/* #endregion */

body.layout-vertical.electron.platform-darwin .tab-row-container {
    border-bottom: 1px solid var(--subtle-border-color);
}

.tab-row-widget-container {
    margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2);
    height: var(--tab-height) !important;
}

body.layout-horizontal .tab-row-container {
    padding-top: calc((var(--tab-bar-height) - var(--tab-height)));
}

body.layout-horizontal .tab-row-widget-container {
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-layout {
    background-color: var(--root-background) !important;
}

#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper {
    border: 1px solid transparent;
    border-bottom-color: transparent;
    box-shadow: unset;
}

#root-widget.horizontal-layout .tab-row-widget .note-tab[active] .note-tab-wrapper {
    border: 1px solid var(--launcher-pane-horizontal-border-color);
    border-bottom-color: transparent;
}

.tab-row-widget .note-tab .note-tab-wrapper {
    height: var(--tab-height) !important;
    transition:
        background 75ms ease-in,
        box-shadow 75ms ease-in;
}

.tab-row-widget .note-tab .note-tab-wrapper:hover {
    transition: none;
}

.tab-row-container .title-bar-buttons {
    margin-top: calc((var(--tab-bar-height) - var(--tab-height)) * -1);
}

body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.note-tab .note-tab-wrapper {
    --tab-background-color: initial !important;
}

.note-tab .note-tab-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--workspace-tab-background-color);
}

.tab-row-widget .note-tab:nth-child(1) {
    transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0);
}

.tab-row-widget .note-tab .note-tab-title {
    text-overflow: ellipsis;
}

.tab-row-widget-is-sorting .note-tab[active] .note-tab-wrapper {
    transform: scale(0.85);
    box-shadow: var(--active-tab-dragging-shadow) !important;
}

.tab-row-widget .note-tab[active] .note-tab-wrapper {
    box-shadow: var(--active-tab-shadow);
    font-weight: unset !important;
    transition:
        background 150ms ease-out,
        box-shadow 300ms ease-out;
}

.tab-row-widget-is-sorting .note-tab-drag-handle {
    cursor: grabbing !important;
}

.tab-row-widget .note-tab-close {
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
        background-color 75ms ease-out,
        color 75ms ease-out;
}

.tab-row-widget .note-tab-close:hover {
    background: var(--tab-close-button-hover-background) !important;
    color: var(--tab-close-button-hover-color) !important;
    transition-timing-function: ease-in;
}

.tab-row-widget .note-new-tab {
    position: relative;
    margin-left: 3px;
    color: transparent; /* Prevent the original "+" from being displayed */
}

.tab-row-widget .note-new-tab {
    background: transparent !important;
}

.tab-row-widget .note-new-tab::before {
    /* The background circle */
    position: absolute;
    content: "";
    top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
    left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
    width: var(--new-tab-button-size);
    height: var(--new-tab-button-size);
    background: var(--new-tab-button-background);
    border-radius: 50%;
    transition:
        background-color 200ms ease-out,
        box-shadow 200ms ease-out,
        transform 300ms ease-in;
    will-change: transform;
}

.tab-row-widget .note-new-tab:hover::before {
    background: var(--new-tab-button-hover-background);
    box-shadow: var(--new-tab-button-shadow);
    transition:
        background-color 100ms ease-in,
        box-shadow 100ms ease-in;
}

.tab-row-widget .note-new-tab::after {
    /* The "X" icon */
    display: flex;
    position: absolute;
    content: "\ebc0";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: boxicons;
    font-size: calc(var(--new-tab-button-size) * 0.75);
    color: var(--new-tab-button-color);
    transition:
        color 300ms ease-out,
        transform 300ms ease-in;
    will-change: transform;
}

.tab-row-widget .note-new-tab:hover::after {
    color: var(--new-tab-button-hover-color);
    transition: color 100ms ease-in;
}

.tab-row-widget .note-new-tab:active:before,
.tab-row-widget .note-new-tab:active:after {
    transform: scale(0.85);
    transition: transform 75ms ease-out;
}

.tab-row-filler {
    top: 0;
}

/*
 * Center pane
 */

#center-pane {
    padding-top: 2px;
    background: var(--main-background-color);
}

.vertical-layout #center-pane {
    border-radius: var(--center-pane-border-radius) 0 0 0;
}

/*
 * Ribbon & note header
 */
.note-title.protected {
    text-shadow: unset !important;
}

body.mobile .note-title {
    background: transparent;
}

.ribbon-container {
    margin-bottom: 0 !important;
}

/*
 * Table of contents & Highlights list
 */

#right-pane {
    background: var(--main-background-color);
}

#right-pane .card-header-buttons {
    align-items: center;
}

#right-pane .toc li,
#right-pane .highlights-list li {
    padding: 2px 8px;
    border-radius: 4px;
    text-align: unset;
    transition:
        background-color 150ms ease-in,
        color 150ms ease-in;
}

#right-pane .highlights-list li {
    line-height: 1.2;
    padding: 8px;
}

#right-pane .toc li::marker,
#right-pane .highlights-list li::marker {
    color: var(--muted-text-color);
}

#right-pane .toc li:hover,
#right-pane .highlights-list li:hover {
    background: var(--right-pane-item-hover-background);
    color: var(--right-pane-item-hover-color);
    font-weight: normal;
    transition: background-color 300ms ease-out color 300ms ease-out;
}

#right-pane .toc li:active,
#right-pane .highlights-list li:active {
    background: transparent;
    transition: none;
}

/*
 * Menus
 *
 * Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not
 * supported when this class is used.
 */

.dropdown-menu:not(.static) {
    border-radius: var(--dropdown-border-radius);
    padding: var(--menu-padding-size) !important;
    font-size: 0.9rem !important;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: var(--menu-background-color);
}

body.mobile .dropdown-menu {
    backdrop-filter: var(--dropdown-backdrop-filter);
    border-radius: var(--dropdown-border-radius);
    position: relative;
}

body.mobile .dropdown-menu .dropdown-menu {
    backdrop-filter: unset !important;
    border-radius: unset !important;
}

body.desktop .dropdown-menu::before {
    content: "";
    backdrop-filter: var(--dropdown-backdrop-filter);
    border-radius: var(--dropdown-border-radius);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

body.desktop .dropdown-menu.tn-dropdown-list {
    backdrop-filter: var(--dropdown-backdrop-filter);
}

body.desktop .dropdown-menu.tn-dropdown-list::before {
    display: none;
}

body.desktop .dropdown-submenu .dropdown-menu::before {
    content: unset;
}

body.mobile .dropdown-submenu .dropdown-menu {
    background: transparent !important;
}

body.desktop .dropdown-submenu .dropdown-menu {
    backdrop-filter: var(--dropdown-backdrop-filter);
    background: transparent;
}

.dropdown-item,
body.mobile .dropdown-submenu .dropdown-toggle {
    padding: 2px 16px 2px 8px !important;
    /* Note: the right padding should also accommodate the submenu arrow. */
    border-radius: 6px;
    cursor: default !important;
}

body.mobile .dropdown-submenu {
    padding: 0 !important;
}

body.mobile .dropdown-item:not(:last-of-type) {
    margin-bottom: 0.5em;
}

body.mobile .dropdown-submenu:hover {
    background: transparent !important;
}

html body .dropdown-item.disabled,
html body .dropdown-item[disabled] {
    color: var(--menu-text-color) !important;
    opacity: var(--menu-item-disabled-opacity);
}

/* Menu item icon */
.dropdown-item .bx {
    transform: translateY(var(--menu-item-icon-vert-offset));
    color: var(--menu-item-icon-color) !important;
    font-size: 1.1em;
}

/* Menu item keyboard shortcut */
.dropdown-item kbd {
    margin-left: 16px;
    font-family: unset !important;
    font-size: unset !important;
    color: var(--menu-item-keyboard-shortcut-color) !important;
    padding-top: 0;
}

.dropdown-divider {
    position: relative;
    border-color: transparent !important;
    overflow: visible;
}

.dropdown-divider::after {
    position: absolute;
    content: "";
    top: -1px;
    left: calc(0px - var(--menu-padding-size));
    right: calc(0px - var(--menu-padding-size));
    border-top: 1px solid var(--menu-item-delimiter-color);
}

/* Menu item arrow */
.dropdown-menu .dropdown-toggle::after {
    content: "\ed3b" !important;
    position: absolute;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    margin: unset !important;
    border: unset !important;
    padding: 0 4px;
    font-family: boxicons;
    font-size: 1.2em;
    color: var(--menu-item-arrow-color) !important;
}

/* Menu item group heading */

/* The heading body */
.dropdown-menu h6 {
    position: relative;
    background: transparent;
    padding: 1em 8px 14px 8px;
    text-transform: uppercase;
    font-size: .8em;
    letter-spacing: 1pt;
    color: var(--menu-item-group-header-color) !important;
}

/* The delimiter line */
.dropdown-menu h6::before {
    content: "";
    position: absolute;
    bottom: 8px;
    left: calc(0px - var(--menu-padding-size));
    right: calc(0px - var(--menu-padding-size));
    border-top: 1px solid var(--menu-item-delimiter-color);
}

/* Static menus (used as a list, such as on the note revisions dialog) */
body.desktop .dropdown-menu.static {
    box-shadow: unset;
    border-radius: 4px;
    border: unset;
    background-color: var(--card-background-color) !important;
    padding: var(--menu-padding-size) !important;
    user-select: none;
}

body.desktop .dropdown-menu.static .dropdown-item.active {
    --active-item-text-color: var(--menu-text-color);
}

body.desktop .dropdown-menu .dropdown-toggle::after {
    height: 100%;
}

body.mobile .dropdown-menu .dropdown-toggle::after {
    transform: rotate(90deg);
}

body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
    transform: rotate(270deg);
}

/*
 * Calendar
 */

.calendar-dropdown-widget {
    width: unset !important;
    padding: 12px;
    color: var(--calendar-color);
    user-select: none;
}

.calendar-dropdown-widget .calendar-header {
    padding: 8px 0 20px 0;
    gap: 10px;
}

.calendar-dropdown-widget .calendar-header input,
.calendar-dropdown-widget .calendar-header [data-calendar-input="month"] {
    --input-background-color: transparent;
    --menu-background-color: transparent;

    text-align: center;
    font-size: 1.4em;
    font-weight: 300;
}

.calendar-dropdown-widget .calendar-header input:not(:focus) {
    outline: 3px solid transparent;
}

.calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button {
    --select-arrow-svg: ""; /* Disable the dropdown arrow */    
}

@media (max-width: 992px) {
    .calendar-dropdown-widget .calendar-header button {
        margin: 0 !important;
        padding: 0;
    }

    .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button {
        padding: 0 8px;
        flex-grow: 1;
    }
}

@media (min-width: 992px) {
    .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button {
        min-width: 120px;
        padding: 0 10px;
    }
}

.calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
    content: unset !important;
}

.calendar-dropdown-widget .calendar-week span {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--calendar-weekday-labels-color);
}

.calendar-dropdown-widget .calendar-body {
    font-size: 0.9em;
}

.calendar-dropdown-widget .calendar-body a {
    background: transparent;
    color: var(--calendar-color);
}

.calendar-dropdown-widget .calendar-body a.calendar-date-exists {
    position: relative;
    text-decoration: none !important;
}

.calendar-dropdown-widget .calendar-body a.calendar-date-exists:not(:hover)::before {
    --vertical-margin: 13%;
    --horiz-margin: 18%;
    content: "";
    position: absolute;
    top: var(--vertical-margin);
    right: var(--horiz-margin);
    bottom: var(--vertical-margin);
    left: var(--horiz-margin);
    border-radius: 6px;
    background: var(--calendar-day-highlight-background);
    z-index: -1;
}

body .calendar-dropdown-widget .calendar-body a:hover {
    border-radius: 6px;
    background: var(--calendar-day-hover-background);
    color: var(--calendar-day-hover-color) !important;
    text-decoration: unset;
}

/*
 * Note tooltip
 */

.tooltip .tooltip-inner:has(.note-tooltip-content) {
    border-radius: 8px;
}

.note-tooltip-content {
    padding: 8px;
    min-height: 56px;
}

.note-tooltip-title .note-title-with-path {
    display: flex;
    flex-direction: column-reverse;
}

.note-tooltip-title a {
    color: inherit !important;
}

.note-tooltip-title.note-no-content {
    margin: 0;
}

.note-tooltip-title:not(.note-no-content) .note-title-with-path {
    padding-bottom: 6px;
    border-bottom: 2px solid currentColor;
}

.note-tooltip-content .note-path {
    display: block;
    color: var(--muted-text-color);
    font-size: 0.75em;
}

.note-tooltip-content .note-tooltip-attributes {
    margin-top: -4px;
    font-size: 0.75em;
}

.note-tooltip-content .rendered-content {
    padding-top: 12px;
}

/*
 * Jump to note
 */

.jump-to-note-dialog .modal-dialog {
    --modal-background-color: var(--menu-background-color);
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 0;
    --bs-modal-footer-gap: 0;

    backdrop-filter: var(--dropdown-backdrop-filter);
}

.jump-to-note-dialog .modal-content {
    box-shadow: 0 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
    border: 1px solid var(--dropdown-border-color);
    padding: 32px;
    border-radius: 8px;
}

.jump-to-note-dialog .modal-header {
    padding: unset !important;
}

.jump-to-note-dialog .modal-body {
    padding: 26px 0 !important;
}

/* Search box wrapper */
.jump-to-note-dialog .input-group {
    margin-right: 16px;
}

.jump-to-note-dialog .input-group:hover {
    background: var(--quick-search-hover-background);
}

/* Focused search box */
.jump-to-note-dialog .input-group:focus-within {
    border-color: var(--quick-search-focus-border);
    background: var(--quick-search-focus-background);
    color: var(--quick-search-focus-color);
}

.jump-to-note-dialog .input-clearer-button {
    background: transparent !important;
}

/*
 * Recent changes list
 */

.recent-changes-dialog .modal-body {
    padding: 0;
}

.recent-changes-content {
    margin: var(--bs-modal-padding);
}

/* Date headings */
.recent-changes-content > div > b {
    position: sticky;
    display: block;
    top: 0;
    background: var(--modal-background-color);
    padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
    font-size: 1.25em;
    font-weight: 300;
    z-index: 10;
}

.recent-changes-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Timeline items */
.recent-changes-content ul li {
    display: flex;
    position: relative;
    margin: 0;
    border: unset;
    padding-top: var(--timeline-item-top-padding);
    padding-bottom: var(--timeline-item-bottom-padding);
    padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
    padding-right: var(--timeline-left-gap);
    color: var(--active-item-text-color);
}

.recent-changes-content li > span:first-child::after {
    /* Remove the dash between time and note title */
    content: "" !important;
}

.recent-changes-content ul li:not(.deleted-note):hover {
    border-radius: 8px;
    background: var(--hover-item-background-color);
    color: var(--hover-item-text-color);
}

.recent-changes-content ul li .note-path {
    color: var(--muted-text-color);
    font-size: 0.75em;
}

/* Item time */
.recent-changes-content ul li > span:first-child {
    display: inline-block;
    min-width: 80px;
    vertical-align: top;
    color: var(--muted-text-color);
}

/* Item title & path container */
.recent-changes-content ul li > span:nth-child(2) {
    display: inline-block;
}

/* Item title link */

.recent-changes-content ul li .note-title a {
    color: currentColor;
}

.recent-changes-content ul li .note-title a:hover {
    text-decoration: underline;
}

/* Item title for deleted notes */
.recent-changes-content ul li.deleted-note .note-title > .note-title {
    text-decoration: line-through;
}

/* Item path */
.recent-changes-content ul li > span:nth-child(2) small {
    display: block;
    line-height: 1;
    opacity: 0.75;
}

/* Timeline connector */
.recent-changes-content ul li::before,
.recent-changes-content > div > b::before {
    position: absolute;
    content: "";
    top: var(--connector-top, 0);
    left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
    bottom: var(--connector-bottom, 0);
    width: var(--timeline-connector-size);
    border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
    background: var(--timeline-connector-color);
    transition: background-color 400ms ease-in-out;
}

.recent-changes-content ul li:hover:before {
    mix-blend-mode: var(--timeline-connector-hover-blend-mode);
}

.recent-changes-content > div:hover {
    --timeline-connector-color: var(--timeline-connector-active-color);
}

/* The first item of the timeline */
.recent-changes-content > div:first-child > *:first-child {
    --connector-top: 50%;
    --connector-radius: calc(var(--timeline-connector-size) / 2);
}

/* The last item of the timeline */
.recent-changes-content > div:last-child li:last-child {
    --connector-bottom: 50%;
}

/* Timeline bullet */
.recent-changes-content ul li::after {
    position: absolute;
    content: "";
    top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
    left: var(--timeline-left-gap);
    width: var(--timeline-bullet-size);
    height: var(--timeline-bullet-size);
    border-radius: 50%;
    background: var(--timeline-bullet-color);
    transform: translateY(-50%);
}

/* Hovered timeline bullet */
.recent-changes-content ul li:hover::after {
    background: var(--timeline-bullet-hover-color);
}

/*
 * Bookmarks folder popup
 */

div.bookmark-folder-widget {
    min-width: auto;
    max-width: 40vw;
    padding: 0;
    font-size: 1.1em;
}

div.bookmark-folder-widget .children-notes {
    margin: 0;
}

/* Item */
div.bookmark-folder-widget span.note-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 6px;
    padding: 6px 25px;
}

/* Item: the parent note */
div.bookmark-folder-widget .parent-note .note-link {
    padding: 6px 8px;
    font-weight: bold;
}

div.bookmark-folder-widget .note-link:hover {
    background: var(--hover-item-background-color);
}

div.bookmark-folder-widget .note-link a {
    padding-left: 8px;
    color: var(--menu-text-color);
    cursor: default;
}

div.bookmark-folder-widget .note-link:hover a {
    color: var(--hover-item-text-color);
}

/* The item's icon */
div.bookmark-folder-widget .note-link .bx {
    color: var(--menu-item-icon-color);
    font-size: 1.2em;
}

/*
 * Note list
 */
.note-list .note-book-card {
    --note-list-horizontal-padding: 22px;
    --note-list-vertical-padding: 15px;
    background-color: var(--card-background-color);
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 2px 3px 4px var(--card-shadow-color);
    border-radius: 12px;
    user-select: none;
    padding: 0;
    margin: 5px 10px 5px 0;
}

.note-list.list-view .note-book-card {
    box-shadow: 0 0 3px var(--card-shadow-color);
}

.note-list.list-view .note-book-card .note-book-header .note-icon {
    vertical-align: middle;
}

.note-list-wrapper .note-book-card:active {
    background-color: var(--card-background-press-color);
}

.note-list-wrapper .note-book-card a {
    color: inherit !important;
}

.note-list-wrapper .note-book-card .note-book-header {
    font-size: 1em;
    font-weight: bold;
    padding: 0.5em 1rem;
    border-bottom-color: var(--card-border-color);
}

.note-list-wrapper .note-book-card .note-book-header .note-icon {
    font-size: 17px;
    vertical-align: text-bottom;
}

.note-list-wrapper .note-book-card .note-book-header .note-book-title {
    font-size: 1em;
    color: var(--active-item-text-color);
    vertical-align: middle;
}

.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes {
    font-size: 0.7em;
    font-weight: normal;
    margin-bottom: 0;
}

.note-list-wrapper .note-book-card .note-book-header:last-child {
    border-bottom: 0;
}

.note-list-wrapper .note-book-card .note-book-content {
    padding: 0 !important;
    font-size: 0.8rem;
}

.note-list-wrapper .note-book-card .note-book-content .rendered-content {
    padding: 1rem;
}

.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
    padding: 1rem !important;
}

.note-list-wrapper .note-book-card .note-book-content h1,
.note-list-wrapper .note-book-card .note-book-content h2,
.note-list-wrapper .note-book-card .note-book-content h3,
.note-list-wrapper .note-book-card .note-book-content h4,
.note-list-wrapper .note-book-card .note-book-content h5,
.note-list-wrapper .note-book-card .note-book-content h6 {
    font-size: 1rem;
    color: var(--active-item-text-color);
}

.note-list-wrapper .note-book-card .note-book-content p:last-child {
    margin-bottom: 0;
}

.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content {
    padding: 0;
}

.note-list-wrapper .note-book-card .note-book-content.type-code pre {
    height: 100%;
    padding: 1em;
}

.note-list-wrapper .note-book-card .bx {
    color: var(--left-pane-icon-color) !important;
}

.note-list.grid-view .note-book-card:hover {
    background: var(--card-background-color) !important;
    filter: contrast(105%);
}

.note-list.grid-view .note-book-card img {
    object-fit: cover !important;
    width: 100%;
}

.note-list.grid-view .ck-content {
    line-height: 1.3;
}

.note-list.grid-view .ck-content p {
    margin-bottom: 0.5em;
}

.note-list.grid-view .ck-content figure.image {
    width: 25%;
}

/* Note paths */

.note-path .path-bracket {
    /* Hide the leading and trailing bracket from the path */
    display: none;
}

.note-path .path-delimiter {
    /* Hide the path delimiters (slashes) */
    display: none;
}

.note-path .path-delimiter + span::before {
    /* Replace the path delimiters with arrows */
    display: inline-block;
    content: "\ed3b";
    padding: 0 0.25em;
    font-family: boxicons;
    opacity: 0.75;
    transform: translateY(4%);
}

/* Search */

.search-result-widget-content .note-path .path-bracket {
    display: inline;
}

.search-result-widget-content .note-path {
    opacity: 0.75;
    font-weight: normal;
}

/* Help */

.help-dialog .modal-content {
    --modal-background-color: var(--help-background-color);
    backdrop-filter: blur(var(--help-backdrop-blur));
}

.help-dialog .help-cards {
    display: block;
    columns: 3;
    column-gap: 20px;
}

.help-dialog .card {
    margin: 0;
    width: auto;
    border: none;
    background: unset;
    padding: 16px 8px;
    break-inside: avoid-column;
}

.help-dialog .card-body {
    box-shadow: var(--help-card-shadow);
    border-radius: 6px;
    background: var(--help-card-background);
}

.help-dialog .card-body h5,
.help-dialog .card-body h6 {
    color: var(--help-card-heading-color);
    font-weight: 600;
}

.help-dialog .card-body h5 {
    font-size: 20px;
}

.help-dialog .card-body h6 {
    font-size: 15px;
    padding-bottom: 0.5em;
}

/* Help card item */
.help-dialog .help-cards ul {
    list-style-type: none;
    padding: 0;
}

.help-dialog .help-cards li + li {
    margin-top: 0.4em;
}

/* Keyboard shortcut */
.help-dialog .help-cards kbd {
    box-shadow: var(--help-kbd-shortcut-shadow);
    margin: 0 4px;
    border: none;
    border-radius: 4px;
    padding: 2px 10px;
    background: var(--help-kbd-shortcut-background);
    color: var(--help-kbd-shortcut-color);
    font-weight: 500;
    letter-spacing: 0.5pt;
}

.help-dialog .help-cards kbd:first-child {
    margin-left: 0;
}

/* Inline code - used for Markdown samples */
.help-dialog .help-cards code {
    border-radius: 4px;
    background: var(--help-code-background);
    padding: 0 8px;
    color: var(--help-code-color);
}

/* Note area */

.title-row > *:first-child {
    margin-right: 0;
}

.title-row > *:nth-child(2) {
    margin-left: 0;
}

.title-row {
    /* Aligns the "Create new split" button with the note menu button (the three dots button) */
    padding-right: 3px;
}

.note-title-widget input {
    --input-background-color: transparent;
    
    border-radius: 8px;
    padding-left: 12px;
}

.note-actions {
    --menu-item-icon-vert-offset: -2.5px;
}

/* Promoted attributes */
.promoted-attribute-cell div.input-group {
    margin: 1px 0;    
}

/* Delete notes preview dialog */

.delete-notes-list .note-path {
    padding-left: 8px;
}

/* The "Change note icon" button */

.note-icon-widget .note-icon {
    border: none;
    border-radius: 8px;
}

.note-icon-widget .note-icon:hover {
    background: var(--icon-button-hover-background);
    color: var(--icon-button-hover-color);
}

/* Note icon popup */

.note-icon-widget .icon-list span {
    border-radius: 8px;
}

.note-icon-widget .icon-list span:hover {
    background: var(--hover-item-background-color);
    color: var(--hover-item-text-color);
}

body.background-effects.zen #root-widget {
    --main-background-color: transparent;
    --root-background: transparent;
}


/* Alert bar */

@keyframes alert-show {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

#center-pane div.alert {
    position: relative;
    margin: 8px 0 0 0;
    border: unset;
    border-radius: 0;
    padding: 8px 16px;
    background: var(--alert-bar-background) !important;
    font-size: .9em;
    font-weight: normal;
    animation: alert-show 300ms ease-in;
    border-bottom: 2px solid #0000001c !important;
}

/* Promoted attributes */

div.promoted-attributes-container {
    display: flex;
    padding: 6px 0;
    gap: 8px;
    font-size: .85em;
    align-items: stretch;
}

div.promoted-attribute-cell {
    --input-background-color: transparent;

    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    display: inline-flex;
    margin: 0;
    border-radius: 8px;
    padding: 4px 16px;
    background: var(--card-background-color);
    overflow-y: visible;
}

div.promoted-attribute-cell > * {
    display: inline-block;
}

div.promoted-attribute-cell label {
    font-weight: normal;
    white-space: nowrap;
    opacity: .75;
}

div.promoted-attribute-cell div.input-group {
    min-height: auto;
}

div.promoted-attribute-cell input {
    padding: 2px 8px;
    font-weight: 500;
}