diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 39fd64cb4..2c0b089c7 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -1,3 +1,7 @@
+@import url(./theme-next/shell.css);
+@import url(./theme-next/settings.css);
+@import url(./theme-next/notes/text.css);
+
 @font-face {
     font-family: "Noto Sans";
     src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
@@ -374,1364 +378,4 @@
     .btn-close {
         filter: invert(1);
     }
-}
-
-/*
- * USER INTERFACE
- */
-
- @keyframes fade-in {
-    from {
-        opacity: 0;
-    } to {
-        opacity: 1;
-    }
-}
-
-#root-widget {
-    background-color: var(--root-background);
-}
-
-body {
-    --native-titlebar-darwin-x-offset: 10;
-    --native-titlebar-darwin-y-offset: 17 !important;
-}
-
-body.layout-vertical {
-    --native-titlebar-background: var(--root-background);
-}
-
-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;
-}
-
-/* #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);
-    --native-titlebar-background: #00000000;
-    --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;
-    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 {
-    background: var(--launcher-pane-button-hover-background);
-    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;
-}
-
-/* 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;
-}
-
-.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::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(.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: .5;
-    font-size: .75em;
-    overflow: hidden;
-}
-
-/* The "Show in full search" button */
-.quick-search .dropdown-menu button {
-    padding: 0;
-    color: var(--menu-text-color) !important;
-}
-
-/*
- * Left pane
- */
-
-/* Tree */
-
-#left-pane .tree-actions {
-    /* TODO: relocate instead of hiding */
-    display: none;
-}
-
-#left-pane div.tree {
-    padding: 3px 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%;
-}
-
-#left-pane .fancytree-expander {
-    opacity: .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: .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: 1.5px;
-}
-
-/*
- * 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;
-}
-
-#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(.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) * .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(.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;
-}
-
-.ribbon-container {
-    margin-bottom: 0 !important;
-}
-
-/*
- * Table of contents & Highlights list
- */
-
-#right-pane {
-    background: var(--main-background-color);
-}
-
-#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
- */
-
-.dropdown-menu {
-    border-radius: 10px;
-    backdrop-filter: blur(10px) saturate(6);
-    padding: var(--menu-padding-size) !important;
-    font-size: .90rem !important;
-}
-
-.dropdown-item {
-    padding: 2px 16px 2px 8px !important;
-    /* Note: the right padding should also accommodate the submenu arrow. */
-    border-radius: 6px;
-    cursor: default !important;
-}
-
-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;
-}
-
-.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;
-    height: 100%;
-    margin: unset !important;
-    border: unset !important;
-    padding: 0 4px;
-    font-family: boxicons;
-    font-size: 1.2em;
-    color: var(--menu-item-arrow-color) !important;
-}
-
-/*
- * Calendar
- */
-
-.calendar-dropdown-widget {
-    padding: 12px;
-    color: var(--calendar-color);
-}
-
-.calendar-dropdown-widget .calendar-header {
-    padding: 8px 0 20px 0;
-}
-
-.calendar-dropdown-widget .calendar-header input[type="number"] {
-    appearance: textfield !important;
-}
-
-.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
-.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.calendar-dropdown-widget .calendar-header input,
-.calendar-dropdown-widget .calendar-header select {
-    /* TODO: Provide styling for background and states */
-    border: unset;
-    text-align: center;
-    font-size: 1.4em;
-    font-weight: 300;
-}
-
-.calendar-dropdown-widget .calendar-week span {
-    font-size: .85em;
-    font-weight: 500;
-    color: var(--calendar-weekday-labels-color);
-}
-
-.calendar-dropdown-widget .calendar-body {
-    font-size: .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;
-}
-
-/*
- * Note tooltip
- */
-
-.tooltip .tooltip-inner:has(.note-tooltip-content) {
-    border-radius: 8px;
-}
-
-.note-tooltip-content {
-    padding: 8px;
- }
-
-.note-tooltip-content .note-title-with-path {
-    display: flex;
-    flex-direction: column-reverse;
-    border-bottom: 2px solid currentColor;
-    padding-bottom: 6px;
-
-}
-
-.note-tooltip-content .note-title-with-path .path-bracket {
-    /* Hide the leading and trailing bracket from the path */
-    display: none;
-}
-
-.note-tooltip-content .note-title-with-path .path-delimiter {
-    /* Hide the path delimiters (slashes) */
-    display: none;
-}
-
-.note-tooltip-content .note-title-with-path .path-delimiter + span::before {
-    /* Replace the path delimiters with arrows */
-    display: inline-block;
-    content: "\ebe6";
-    padding: 0 4px;
-    line-height: 1;
-    vertical-align: bottom;
-    font-family: boxicons;
-    opacity: .75;
-}
-
-.note-tooltip-content .note-path {
-    display: block;
-    color: var(--muted-text-color);
-    font-size: .75em;
-}
-
-.note-tooltip-content .note-tooltip-attributes {
-    margin-top: -4px;
-    font-size: .75em;
-}
-
-.note-tooltip-content .rendered-content {
-    padding-top: 12px;
-}
-
-/*
- * Recent changes list
- */
-
-.recent-changes-dialog .modal-body {
-    padding: 0;
-}
-
-.recent-changes-content {
-    margin: var(--bs-modal-padding);
-}
-
-.recent-changes-content small {
-    color: var(--muted-text-color);
-}
-
-.recent-changes-content > div {
-    padding-left: var(--timeline-left-gap);
-}
-
-/* Date headings */
-.recent-changes-content > div > b {
-    position: sticky;
-    display: block;
-    top: 0;
-    background: var(--modal-background-color);
-    padding: 10px 0;
-    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,
-.recent-changes-content > div > b {
-    margin: 0;
-    padding-left: var(--timeline-right-gap);
-}
-
-.recent-changes-content ul li {
-    position: relative;
-}
-
-/* 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-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 > 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: var(--timeline-bullet-vertical-pos);
-    left: 0;
-    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);
-}
-
-/*
- * TEXT NOTES
- */
-
-/*
- * Code Blocks 
- */
-
-.ck-content pre {
-    border: 0;
-    border-radius: 6px;
-    box-shadow: var(--code-block-box-shadow);
-    padding: 0 !important;
-    margin-top: 2px !important;
-    overflow: unset;
-}
-
-html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
-    /* Create some space for the top-side shadow */
-    margin-top: 1px !important;
-}
-
-.ck.ck-editor__editable pre[data-language]::after {
-    --ck-color-code-block-label-background: rgba(128, 128, 128, .5);
-    border-radius: 0 0 5px 5px;
-    padding: 0px 10px;
-    letter-spacing: .5px;
-    font-weight: bold;
-}
-
-.ck-content pre code {
-    display: block;
-    padding: 1em;
-    overflow: auto;
-}
-
-.ck-content pre code::-webkit-scrollbar {
-    height: 6px;
-}
-
-.ck-content pre code::-webkit-scrollbar-thumb {
-    height: 4px;
-    border: none !important;
-    background: gray !important;
-}
-
-.ck-content pre code::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    cursor: default;
-}
-
-.ck-content blockquote {
-    background: var(--card-background-color);
-    border: 1px solid var(--card-border-color) !important;
-    box-shadow: var(--card-box-shadow);
-    border-radius: 10px;
-    padding: 1em 2.5em;
-    position: relative;
-    font-style: unset !important;
-}
-
-.ck-content blockquote p:last-of-type {
-    margin-bottom: 0 !important;
-}
-
-.ck-content blockquote:before,
-.ck-content blockquote:after {
-    position: absolute;
-    top: 0;
-    font-size: 48px;
-    opacity: 0.1;
-}
-
-.ck-content blockquote:before {
-    content: "“";
-    left: 0.2em;
-}
-
-.ck-content blockquote:after {
-    content: "”";
-    right: 0.35em;            
-}
-
-.ck-content hr {
-    margin: 5px 0;
-    height: 1px;
-    background-color: var(--main-border-color);
-    opacity: 1;
-}
-
-.ck-content p code {
-    border: 1px solid var(--card-border-color);
-    box-shadow: var(--card-box-shadow);
-    border-radius: 6px;
-    background-color: var(--card-background-color);
-}
-
-.note-detail-printable:not(.word-wrap) pre code {
-    white-space: pre;
-    margin-right: 1em;
-}
-
-.code-sample-wrapper .hljs {
-    transition: background-color linear 100ms;
-}
-
-/*
- * Settings
- */
-:root {
-    --options-card-padding: 17px;
-    --options-title-font-size: 1rem;
-    --options-title-offset: 13px;
-}
-
-.options-section {    
-    border-radius: 12px;
-    border: 1px solid var(--card-border-color) !important;
-    box-shadow: var(--card-box-shadow);
-    background: var(--card-background-color);
-    padding: var(--options-card-padding);
-    margin-bottom: calc(var(--options-title-offset) + 26px) !important;
-}
-
-.note-detail-content-widget-content.options {
-    --default-padding: 15px;
-    padding-top: calc(var(--default-padding) + var(--options-title-offset) + var(--options-title-font-size));
-    padding-bottom: var(--default-padding);
-}
-
-.options-section h4 {
-    font-size: var(--options-title-font-size);
-    font-weight: bold;
-    color: var(--launcher-pane-text-color);
-    margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
-    margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
-    margin-left: calc(-1 * var(--options-card-padding));
-}
-
-.options-section h5 {
-    font-size: var(--options-title-font-size);
-    font-weight: bold;
-    margin-top: 1em !important;
-    margin-bottom: unset !important;
-}
-
-.options-section h5:first-of-type {
-    margin-top: unset !important;
-}
-
-.options-section hr {
-    margin-left: calc(var(--options-card-padding) * -1);
-    margin-right: calc(var(--options-card-padding) * -1);
-}
-
-.options-section p:last-of-type:not(:first-of-type),
-.options-section h4 + p:last-child,
-.options-section .existing-anonymized-databases {
-    margin-bottom: 0;
-}
-
-.options-section .options-mime-types {
-    padding: 0;
-    margin: 0;
-}
-
-/*
- * 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%;
-}
-
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css
new file mode 100644
index 000000000..aa85dace5
--- /dev/null
+++ b/src/public/stylesheets/theme-next/notes/text.css
@@ -0,0 +1,104 @@
+/*
+ * TEXT NOTES
+ */
+
+/*
+ * Code Blocks 
+ */
+
+ .ck-content pre {
+    border: 0;
+    border-radius: 6px;
+    box-shadow: var(--code-block-box-shadow);
+    padding: 0 !important;
+    margin-top: 2px !important;
+    overflow: unset;
+}
+
+html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
+    /* Create some space for the top-side shadow */
+    margin-top: 1px !important;
+}
+
+.ck.ck-editor__editable pre[data-language]::after {
+    --ck-color-code-block-label-background: rgba(128, 128, 128, .5);
+    border-radius: 0 0 5px 5px;
+    padding: 0px 10px;
+    letter-spacing: .5px;
+    font-weight: bold;
+}
+
+.ck-content pre code {
+    display: block;
+    padding: 1em;
+    overflow: auto;
+}
+
+.ck-content pre code::-webkit-scrollbar {
+    height: 6px;
+}
+
+.ck-content pre code::-webkit-scrollbar-thumb {
+    height: 4px;
+    border: none !important;
+    background: gray !important;
+}
+
+.ck-content pre code::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+    cursor: default;
+}
+
+.ck-content blockquote {
+    background: var(--card-background-color);
+    border: 1px solid var(--card-border-color) !important;
+    box-shadow: var(--card-box-shadow);
+    border-radius: 10px;
+    padding: 1em 2.5em;
+    position: relative;
+    font-style: unset !important;
+}
+
+.ck-content blockquote p:last-of-type {
+    margin-bottom: 0 !important;
+}
+
+.ck-content blockquote:before,
+.ck-content blockquote:after {
+    position: absolute;
+    top: 0;
+    font-size: 48px;
+    opacity: 0.1;
+}
+
+.ck-content blockquote:before {
+    content: "“";
+    left: 0.2em;
+}
+
+.ck-content blockquote:after {
+    content: "”";
+    right: 0.35em;            
+}
+
+.ck-content hr {
+    margin: 5px 0;
+    height: 1px;
+    background-color: var(--main-border-color);
+    opacity: 1;
+}
+
+.ck-content p code {
+    border: 1px solid var(--card-border-color);
+    box-shadow: var(--card-box-shadow);
+    border-radius: 6px;
+    background-color: var(--card-background-color);
+}
+
+.note-detail-printable:not(.word-wrap) pre code {
+    white-space: pre;
+    margin-right: 1em;
+}
+
+.code-sample-wrapper .hljs {
+    transition: background-color linear 100ms;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/settings.css b/src/public/stylesheets/theme-next/settings.css
new file mode 100644
index 000000000..62ea241f6
--- /dev/null
+++ b/src/public/stylesheets/theme-next/settings.css
@@ -0,0 +1,59 @@
+/*
+ * Settings
+ */
+ :root {
+    --options-card-padding: 17px;
+    --options-title-font-size: 1rem;
+    --options-title-offset: 13px;
+}
+
+.options-section {    
+    border-radius: 12px;
+    border: 1px solid var(--card-border-color) !important;
+    box-shadow: var(--card-box-shadow);
+    background: var(--card-background-color);
+    padding: var(--options-card-padding);
+    margin-bottom: calc(var(--options-title-offset) + 26px) !important;
+}
+
+.note-detail-content-widget-content.options {
+    --default-padding: 15px;
+    padding-top: calc(var(--default-padding) + var(--options-title-offset) + var(--options-title-font-size));
+    padding-bottom: var(--default-padding);
+}
+
+.options-section h4 {
+    font-size: var(--options-title-font-size);
+    font-weight: bold;
+    color: var(--launcher-pane-text-color);
+    margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
+    margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
+    margin-left: calc(-1 * var(--options-card-padding));
+}
+
+.options-section h5 {
+    font-size: var(--options-title-font-size);
+    font-weight: bold;
+    margin-top: 1em !important;
+    margin-bottom: unset !important;
+}
+
+.options-section h5:first-of-type {
+    margin-top: unset !important;
+}
+
+.options-section hr {
+    margin-left: calc(var(--options-card-padding) * -1);
+    margin-right: calc(var(--options-card-padding) * -1);
+}
+
+.options-section p:last-of-type:not(:first-of-type),
+.options-section h4 + p:last-child,
+.options-section .existing-anonymized-databases {
+    margin-bottom: 0;
+}
+
+.options-section .options-mime-types {
+    padding: 0;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
new file mode 100644
index 000000000..2ddfebc8c
--- /dev/null
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -0,0 +1,1193 @@
+/*
+ * USER INTERFACE
+ */
+
+ @keyframes fade-in {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}
+
+#root-widget {
+    background-color: var(--root-background);
+}
+
+body {
+    --native-titlebar-darwin-x-offset: 10;
+    --native-titlebar-darwin-y-offset: 17 !important;
+}
+
+body.layout-vertical {
+    --native-titlebar-background: var(--root-background);
+}
+
+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;
+}
+
+/* #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);
+    --native-titlebar-background: #00000000;
+    --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;
+    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 {
+    background: var(--launcher-pane-button-hover-background);
+    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;
+}
+
+/* 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;
+}
+
+.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::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(.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: .5;
+    font-size: .75em;
+    overflow: hidden;
+}
+
+/* The "Show in full search" button */
+.quick-search .dropdown-menu button {
+    padding: 0;
+    color: var(--menu-text-color) !important;
+}
+
+/*
+ * Left pane
+ */
+
+/* Tree */
+
+#left-pane .tree-actions {
+    /* TODO: relocate instead of hiding */
+    display: none;
+}
+
+#left-pane div.tree {
+    padding: 3px 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%;
+}
+
+#left-pane .fancytree-expander {
+    opacity: .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: .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: 1.5px;
+}
+
+/*
+ * 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;
+}
+
+#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(.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) * .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(.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;
+}
+
+.ribbon-container {
+    margin-bottom: 0 !important;
+}
+
+/*
+ * Table of contents & Highlights list
+ */
+
+#right-pane {
+    background: var(--main-background-color);
+}
+
+#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
+ */
+
+.dropdown-menu {
+    border-radius: 10px;
+    backdrop-filter: blur(10px) saturate(6);
+    padding: var(--menu-padding-size) !important;
+    font-size: .90rem !important;
+}
+
+.dropdown-item {
+    padding: 2px 16px 2px 8px !important;
+    /* Note: the right padding should also accommodate the submenu arrow. */
+    border-radius: 6px;
+    cursor: default !important;
+}
+
+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;
+}
+
+.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;
+    height: 100%;
+    margin: unset !important;
+    border: unset !important;
+    padding: 0 4px;
+    font-family: boxicons;
+    font-size: 1.2em;
+    color: var(--menu-item-arrow-color) !important;
+}
+
+/*
+ * Calendar
+ */
+
+.calendar-dropdown-widget {
+    padding: 12px;
+    color: var(--calendar-color);
+}
+
+.calendar-dropdown-widget .calendar-header {
+    padding: 8px 0 20px 0;
+}
+
+.calendar-dropdown-widget .calendar-header input[type="number"] {
+    appearance: textfield !important;
+}
+
+.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
+.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.calendar-dropdown-widget .calendar-header input,
+.calendar-dropdown-widget .calendar-header select {
+    /* TODO: Provide styling for background and states */
+    border: unset;
+    text-align: center;
+    font-size: 1.4em;
+    font-weight: 300;
+}
+
+.calendar-dropdown-widget .calendar-week span {
+    font-size: .85em;
+    font-weight: 500;
+    color: var(--calendar-weekday-labels-color);
+}
+
+.calendar-dropdown-widget .calendar-body {
+    font-size: .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;
+}
+
+/*
+ * Note tooltip
+ */
+
+.tooltip .tooltip-inner:has(.note-tooltip-content) {
+    border-radius: 8px;
+}
+
+.note-tooltip-content {
+    padding: 8px;
+ }
+
+.note-tooltip-content .note-title-with-path {
+    display: flex;
+    flex-direction: column-reverse;
+    border-bottom: 2px solid currentColor;
+    padding-bottom: 6px;
+
+}
+
+.note-tooltip-content .note-title-with-path .path-bracket {
+    /* Hide the leading and trailing bracket from the path */
+    display: none;
+}
+
+.note-tooltip-content .note-title-with-path .path-delimiter {
+    /* Hide the path delimiters (slashes) */
+    display: none;
+}
+
+.note-tooltip-content .note-title-with-path .path-delimiter + span::before {
+    /* Replace the path delimiters with arrows */
+    display: inline-block;
+    content: "\ebe6";
+    padding: 0 4px;
+    line-height: 1;
+    vertical-align: bottom;
+    font-family: boxicons;
+    opacity: .75;
+}
+
+.note-tooltip-content .note-path {
+    display: block;
+    color: var(--muted-text-color);
+    font-size: .75em;
+}
+
+.note-tooltip-content .note-tooltip-attributes {
+    margin-top: -4px;
+    font-size: .75em;
+}
+
+.note-tooltip-content .rendered-content {
+    padding-top: 12px;
+}
+
+/*
+ * Recent changes list
+ */
+
+.recent-changes-dialog .modal-body {
+    padding: 0;
+}
+
+.recent-changes-content {
+    margin: var(--bs-modal-padding);
+}
+
+.recent-changes-content small {
+    color: var(--muted-text-color);
+}
+
+.recent-changes-content > div {
+    padding-left: var(--timeline-left-gap);
+}
+
+/* Date headings */
+.recent-changes-content > div > b {
+    position: sticky;
+    display: block;
+    top: 0;
+    background: var(--modal-background-color);
+    padding: 10px 0;
+    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,
+.recent-changes-content > div > b {
+    margin: 0;
+    padding-left: var(--timeline-right-gap);
+}
+
+.recent-changes-content ul li {
+    position: relative;
+}
+
+/* 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-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 > 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: var(--timeline-bullet-vertical-pos);
+    left: 0;
+    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);
+}
+
+/*
+ * 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%;
+}
\ No newline at end of file