:root,
html[data-timeours-theme="default"] {
	color-scheme: dark;
	--primary-color: #f4f6fa;
	--secondary-color: #aeb7cb;
	--highlight-color: #ffffff;
	--banner-bg: #262e46;
	--bg-color: #1c2134;
	--window-bg: #303a58;
	--talk-bubble-bg: #3a4668;
	--logo-color: #e64c65;
	--theme-accent: #e64c65;
	--theme-header: #262e46;
	--theme-page: #1c2134;
	--theme-panel: #303a58;
	--theme-menu: #454f6f;
	--theme-surface: #303a58;
	--theme-elevated: #3a4668;
	--theme-input: #454f6f;
	--theme-text: #f4f6fa;
	--theme-strong: #ffffff;
	--theme-muted: #aeb7cb;
	--theme-border: #56617f;
	--theme-hover: #56617f;
	--theme-selected: #486ca8;
	--theme-selected-text: #ffffff;
	--message-received: #3a4668;
	--message-self: #1c2134;
	--message-self-border: #667291;
}

html[data-timeours-theme="dark"] {
	color-scheme: dark;
	--primary-color: #f3f3f3;
	--secondary-color: #9a9a9a;
	--highlight-color: #ffffff;
	--banner-bg: #000000;
	--bg-color: #101010;
	--window-bg: #212121;
	--talk-bubble-bg: #292929;
	--logo-color: #eb4964;
	--theme-accent: #eb4964;
	--theme-header: #000000;
	--theme-page: #101010;
	--theme-panel: #111111;
	--theme-menu: #212121;
	--theme-surface: #212121;
	--theme-elevated: #2b2b2b;
	--theme-input: #2b2b2b;
	--theme-text: #f3f3f3;
	--theme-strong: #ffffff;
	--theme-muted: #9b9b9b;
	--theme-border: #343434;
	--theme-hover: #303030;
	--theme-selected: #eb4964;
	--theme-selected-text: #ffffff;
	--message-received: #242424;
	--message-self: #090909;
	--message-self-border: #464646;
}

html[data-timeours-theme="light"] {
	color-scheme: light;
	--primary-color: #1a1a1a;
	--secondary-color: #6f7378;
	--highlight-color: #000000;
	--banner-bg: #ffffff;
	--bg-color: #f2f3f5;
	--window-bg: #ffffff;
	--talk-bubble-bg: #e9eaec;
	--logo-color: #d74455;
	--theme-accent: #d74455;
	--theme-header: #ffffff;
	--theme-page: #f2f3f5;
	--theme-panel: #ffffff;
	--theme-menu: #f7f7f8;
	--theme-surface: #ffffff;
	--theme-elevated: #f7f7f8;
	--theme-input: #eceeef;
	--theme-text: #202124;
	--theme-strong: #000000;
	--theme-muted: #767a80;
	--theme-border: #d9dce0;
	--theme-hover: #eceeef;
	--theme-selected: #f4dce2;
	--theme-selected-text: #111111;
	--message-received: #e9eaec;
	--message-self: #ffffff;
	--message-self-border: #d4d7da;
}

html,
body {
	background-color: var(--theme-page);
	color: var(--theme-text);
}

body,
input,
textarea,
select,
button {
	color-scheme: inherit;
}

html[data-timeours-theme="light"] body {
	background: var(--theme-page) !important;
	color: var(--theme-text) !important;
}

html[data-timeours-theme="dark"] body {
	background: var(--theme-page) !important;
	color: var(--theme-text) !important;
}

html[data-timeours-theme="dark"] .bg-black,
html[data-timeours-theme="dark"] .navbar.bg-dark,
html[data-timeours-theme="dark"] .offcanvas-header.bg-dark {
	background-color: var(--theme-header) !important;
}

html[data-timeours-theme="dark"] .bg-dark,
html[data-timeours-theme="dark"] .card.bg-dark,
html[data-timeours-theme="dark"] .list-group-item.bg-dark,
html[data-timeours-theme="dark"] .modal-content.bg-dark,
html[data-timeours-theme="dark"] .offcanvas-body.bg-dark {
	background-color: var(--theme-surface) !important;
}

html[data-timeours-theme="dark"] .bg-secondary {
	background-color: var(--theme-input) !important;
}

html[data-timeours-theme="dark"] .text-white,
html[data-timeours-theme="dark"] .text-light {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="dark"] .text-muted {
	color: var(--theme-muted) !important;
}

html[data-timeours-theme="dark"] .border-secondary {
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="default"] body {
	background: var(--theme-page) !important;
	color: var(--theme-text) !important;
}

html[data-timeours-theme="default"] .bg-black,
html[data-timeours-theme="default"] .navbar.bg-dark,
html[data-timeours-theme="default"] .offcanvas-header.bg-dark {
	background-color: var(--theme-header) !important;
}

html[data-timeours-theme="default"] .bg-dark,
html[data-timeours-theme="default"] .card.bg-dark,
html[data-timeours-theme="default"] .list-group-item.bg-dark,
html[data-timeours-theme="default"] .modal-content.bg-dark,
html[data-timeours-theme="default"] .offcanvas-body.bg-dark {
	background-color: var(--theme-surface) !important;
}

html[data-timeours-theme="default"] .bg-secondary {
	background-color: var(--theme-input) !important;
}

html[data-timeours-theme="default"] .text-white,
html[data-timeours-theme="default"] .text-light {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="default"] .text-muted {
	color: var(--theme-muted) !important;
}

html[data-timeours-theme="default"] .border-secondary {
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="light"] .bg-black,
html[data-timeours-theme="light"] .navbar.bg-dark,
html[data-timeours-theme="light"] .offcanvas-header.bg-dark {
	background-color: var(--theme-panel) !important;
}

html[data-timeours-theme="light"] .bg-dark,
html[data-timeours-theme="light"] .card.bg-dark,
html[data-timeours-theme="light"] .list-group-item.bg-dark,
html[data-timeours-theme="light"] .modal-content.bg-dark,
html[data-timeours-theme="light"] .offcanvas-body.bg-dark {
	background-color: var(--theme-surface) !important;
}

html[data-timeours-theme="light"] .bg-secondary {
	background-color: var(--theme-input) !important;
}

html[data-timeours-theme="light"] .text-white,
html[data-timeours-theme="light"] .text-light {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="light"] .text-muted {
	color: var(--theme-muted) !important;
}

html[data-timeours-theme="light"] .border-secondary {
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="light"] .form-control,
html[data-timeours-theme="light"] .form-select,
html[data-timeours-theme="light"] input,
html[data-timeours-theme="light"] textarea,
html[data-timeours-theme="light"] select {
	background-color: var(--theme-input);
	color: var(--theme-text);
}

html[data-timeours-theme="default"] .form-control,
html[data-timeours-theme="default"] .form-select,
html[data-timeours-theme="default"] input,
html[data-timeours-theme="default"] textarea,
html[data-timeours-theme="default"] select {
	background-color: var(--theme-input);
	color: var(--theme-text);
}

html[data-timeours-theme="default"] .form-control::placeholder,
html[data-timeours-theme="default"] textarea::placeholder,
html[data-timeours-theme="default"] input::placeholder {
	color: var(--theme-muted);
	opacity: 1;
}

html[data-timeours-theme="light"] .form-control::placeholder,
html[data-timeours-theme="light"] textarea::placeholder,
html[data-timeours-theme="light"] input::placeholder {
	color: #85898e;
	opacity: 1;
}

html[data-timeours-theme="light"] input:-webkit-autofill,
html[data-timeours-theme="light"] input:-webkit-autofill:hover,
html[data-timeours-theme="light"] input:-webkit-autofill:focus {
	-webkit-text-fill-color: #151515 !important;
	-webkit-box-shadow: 0 0 0 1000px #eeeeef inset !important;
}

html[data-timeours-theme="light"] .btn-outline-light {
	--bs-btn-color: #202124;
	--bs-btn-border-color: #777b80;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #202124;
	--bs-btn-hover-border-color: #202124;
}

html[data-timeours-theme="light"] .btn-close-white {
	filter: none;
}

html[data-timeours-theme="light"] .TopAppBarDark {
	background: var(--theme-panel) !important;
	color: var(--theme-strong) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="light"] .dropdown-menu-dark {
	--bs-dropdown-color: var(--theme-text);
	--bs-dropdown-bg: var(--theme-elevated);
	--bs-dropdown-border-color: var(--theme-border);
	--bs-dropdown-link-color: var(--theme-text);
	--bs-dropdown-link-hover-color: var(--theme-strong);
	--bs-dropdown-link-hover-bg: var(--theme-hover);
}

html[data-timeours-theme="dark"] .dropdown-menu-dark {
	--bs-dropdown-color: var(--theme-text);
	--bs-dropdown-bg: var(--theme-elevated);
	--bs-dropdown-border-color: var(--theme-border);
	--bs-dropdown-link-color: var(--theme-text);
	--bs-dropdown-link-hover-color: var(--theme-strong);
	--bs-dropdown-link-hover-bg: var(--theme-hover);
}

html[data-timeours-theme="default"] .TopAppBarDark {
	background: var(--theme-panel) !important;
	color: var(--theme-strong) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="default"] .dropdown-menu-dark {
	--bs-dropdown-color: var(--theme-text);
	--bs-dropdown-bg: var(--theme-elevated);
	--bs-dropdown-border-color: var(--theme-border);
	--bs-dropdown-link-color: var(--theme-text);
	--bs-dropdown-link-hover-color: var(--theme-strong);
	--bs-dropdown-link-hover-bg: var(--theme-hover);
}

/* Login and registration */
html[data-timeours-theme="light"] .login,
html[data-timeours-theme="light"] .login .group-9 {
	background: var(--theme-page) !important;
}

html[data-timeours-theme="light"] .login .time-ours,
html[data-timeours-theme="light"] .login .or,
html[data-timeours-theme="light"] .login .t,
html[data-timeours-theme="light"] .login .registration-terms {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="light"] .login .text_label,
html[data-timeours-theme="light"] .login .text_label-4 {
	color: var(--theme-muted) !important;
}

html[data-timeours-theme="light"] .login .overlap-group8,
html[data-timeours-theme="light"] .login .group-4 {
	background: var(--theme-panel) !important;
	border: 1px solid var(--theme-border);
}

html[data-timeours-theme="light"] .login input {
	background: transparent !important;
	color: var(--theme-text) !important;
}

html[data-timeours-theme="default"] .login,
html[data-timeours-theme="default"] .login .group-9 {
	background: var(--theme-page) !important;
}

html[data-timeours-theme="default"] .login .time-ours,
html[data-timeours-theme="default"] .login .or,
html[data-timeours-theme="default"] .login .t,
html[data-timeours-theme="default"] .login .registration-terms {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="default"] .login .text_label,
html[data-timeours-theme="default"] .login .text_label-4 {
	color: var(--theme-muted) !important;
}

html[data-timeours-theme="default"] .login .overlap-group8,
html[data-timeours-theme="default"] .login .group-4 {
	background: var(--theme-panel) !important;
	border: 1px solid var(--theme-border);
}

html[data-timeours-theme="default"] .login input {
	background: transparent !important;
	color: var(--theme-text) !important;
}

.theme-menu-control {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--theme-border);
	background: var(--theme-menu);
}

.theme-menu-control-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: var(--theme-muted);
	font-size: 13px;
}

.timeours-theme-segmented {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--theme-border);
	border-radius: 4px;
	background: var(--theme-page);
}

.timeours-theme-choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	height: 36px;
	padding: 0 6px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--theme-muted);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.timeours-theme-choice:hover,
.timeours-theme-choice:focus-visible {
	background: var(--theme-hover);
	color: var(--theme-strong);
}

.timeours-theme-choice.is-active {
	background: var(--theme-elevated);
	color: var(--theme-strong);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
}

.timeours-theme-choice.is-active i {
	color: var(--theme-accent);
}

.timeours-theme-choice:focus-visible {
	outline: 2px solid var(--theme-accent);
	outline-offset: 1px;
}

/* Story navigation */
#menuMainmenu,
#menuMainmenu .offcanvas-header,
#menuMainmenu .offcanvas-body {
	background: var(--theme-menu) !important;
	color: var(--theme-text) !important;
}

#menuMainmenu .menu-main-profile {
	background: var(--theme-panel) !important;
	border-color: var(--theme-border) !important;
}

#menuMainmenu .menu-main-profile-details,
#menuMainmenu .menu-main-stats strong {
	color: var(--theme-strong) !important;
}

#menuMainmenu .menu-main-stats,
#menuMainmenu .menu-main-profile-details > i {
	color: var(--theme-muted) !important;
}

#menuMainmenu .list-group-item {
	background: transparent !important;
	color: var(--theme-muted) !important;
	border-color: transparent !important;
}

#menuMainmenu .list-group-item:hover,
#menuMainmenu .list-group-item:focus-visible,
#menuMainmenu .list-group-item.desktop-menu-active {
	background: var(--theme-hover) !important;
	color: var(--theme-strong) !important;
}

#menuMainmenu .list-group-item.desktop-menu-active {
	background: var(--theme-selected) !important;
	color: var(--theme-selected-text) !important;
	box-shadow: none;
}

html[data-timeours-theme="light"] #menuMainmenu .list-group-item.desktop-menu-active,
html[data-timeours-theme="light"] #left_section .left-item.active {
	background: var(--theme-selected) !important;
	color: var(--theme-selected-text) !important;
}

html[data-timeours-theme="dark"] #menuMainmenu .list-group-item img,
html[data-timeours-theme="dark"] #left_section .left-item .left-icon,
html[data-timeours-theme="default"] #menuMainmenu .list-group-item img,
html[data-timeours-theme="default"] #left_section .left-item .left-icon {
	filter: brightness(0) invert(1);
	opacity: .52;
}

html[data-timeours-theme="light"] #menuMainmenu .list-group-item img,
html[data-timeours-theme="light"] #left_section .left-item .left-icon {
	filter: brightness(0);
	opacity: .48;
}

#menuMainmenu .list-group-item:hover img,
#menuMainmenu .list-group-item:focus-visible img,
#menuMainmenu .list-group-item.desktop-menu-active img,
#left_section .left-item:hover .left-icon,
#left_section .left-item.active .left-icon {
	opacity: 1 !important;
}

#left_section {
	background: var(--theme-menu) !important;
	color: var(--theme-text) !important;
}

#right_section {
	background: var(--theme-panel) !important;
	color: var(--theme-text) !important;
}

#left_section .left-item {
	background: transparent;
	color: var(--theme-muted);
}

#left_section .left-item:hover,
#left_section .left-item:focus-visible,
#left_section .left-item.active {
	background: var(--theme-selected);
	color: var(--theme-selected-text);
	box-shadow: none;
}

html[data-timeours-theme] #titlebar {
	background: var(--theme-header) !important;
	border-bottom-color: var(--theme-border) !important;
}

html[data-timeours-theme] #storyAddBar {
	background: var(--theme-panel) !important;
	/* border-bottom: 1px solid var(--theme-border); */
}

html[data-timeours-theme] #storyAddBar .story-add-composer {
	background: var(--theme-surface) !important;
	border: 1px solid var(--theme-border);
}

html[data-timeours-theme] #story_workspace,
html[data-timeours-theme] #story_workspace .tabs,
html[data-timeours-theme] #mainContent,
html[data-timeours-theme] #mainContent .tab-pane {
	background: var(--theme-page) !important;
}

html[data-timeours-theme] #right_section {
	background: var(--theme-panel) !important;
}

html[data-timeours-theme] #titlebar .story-header-search {
	background: var(--theme-input) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme] #titlebar .story-header-search input {
	background: transparent !important;
	color: var(--theme-text) !important;
}

html[data-timeours-theme] #titlebar .story-header-search button {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme] #titlebar .story-header-icon,
html[data-timeours-theme] #titlebar .story-header-profile,
html[data-timeours-theme] #desktopMainmenuToggle {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="light"] #titlebar .story-brand-word,
html[data-timeours-theme="light"] #titlebar .story-header-icon img,
html[data-timeours-theme="light"] #titlebar .story-header-profile > i {
	filter: brightness(0);
}

html[data-timeours-theme="dark"] #titlebar .story-brand-word {
	filter: brightness(0) invert(1);
}

html[data-timeours-theme="default"] #storyAddBar {
	background: var(--theme-page) !important;
}

html[data-timeours-theme="default"] #menuMainmenu .menu-main-profile {
	background: var(--theme-menu) !important;
}

html[data-timeours-theme] #tab_bar {
	background: var(--theme-panel) !important;
	border-bottom: 1px solid var(--theme-border) !important;
}

html[data-timeours-theme] #tab_bar .nav-link {
	border: 0 !important;
	background: transparent !important;
	color: var(--theme-muted) !important;
}

html[data-timeours-theme] #tab_bar .nav-link:hover,
html[data-timeours-theme] #tab_bar .nav-link:focus-visible,
html[data-timeours-theme] #tab_bar .nav-link.active {
	/* background: var(--theme-hover) !important; */
	color: var(--theme-strong) !important;
}

html[data-timeours-theme] #tab_bar .nav-link.active {
	box-shadow: inset 0 -2px 0 var(--theme-accent);
}

html[data-timeours-theme="dark"] #tab_bar img {
	filter: brightness(0) invert(1);
}

html[data-timeours-theme="default"] #tab_bar img {
	filter: brightness(0) invert(1);
}

html[data-timeours-theme="light"] #tab_bar img {
	filter: brightness(0);
}

html[data-timeours-theme] #storyFilterPanel {
	background: var(--theme-elevated) !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme] .timeline_container,
html[data-timeours-theme] .event_container,
html[data-timeours-theme] .cross_timeline_container {
	background: var(--theme-surface) !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme] .timeline_container .detail_head,
html[data-timeours-theme] .timeline_container .card-title,
html[data-timeours-theme] .timeline_container .card-author-name,
html[data-timeours-theme] .timeline_container .card-text,
html[data-timeours-theme] .timeline_container .timeperiod_text,
html[data-timeours-theme] .timeline_container .timeperiod_status {
	color: var(--theme-strong) !important;
}

html[data-timeours-theme] #right_section .list-group-item,
html[data-timeours-theme] #right_section .recommend-item {
	background: transparent !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

html[data-timeours-theme="dark"] #menuMainmenu .list-group-item.desktop-menu-active,
html[data-timeours-theme="dark"] #left_section .left-item.active,
html[data-timeours-theme="default"] #menuMainmenu .list-group-item.desktop-menu-active,
html[data-timeours-theme="default"] #left_section .left-item.active {
	background: var(--theme-selected) !important;
	color: var(--theme-selected-text) !important;
	box-shadow: none !important;
}

/* Search, notification and message windows */
.nav-feature-modal .modal-content,
.nav-result-item,
.notification-item,
.message-thread-item,
.message-forward-dialog,
.message-share-panel,
.message-image-attachment,
.message-link-card,
.message-file-card {
	background: var(--theme-panel) !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

.nav-feature-toolbar,
.message-sidebar,
.message-pinned-bar,
.message-forward-thread,
.message-share-result {
	border-color: var(--theme-border) !important;
}

.nav-result-item:hover,
.notification-item:hover,
.message-thread-item:hover,
.message-thread-item.active,
.message-forward-thread:hover,
.message-share-result:hover {
	background: var(--theme-hover) !important;
}

.message-bubble {
	background: var(--message-received) !important;
	color: var(--theme-text) !important;
}

.message-bubble.self {
	background: var(--message-self) !important;
	color: var(--theme-strong) !important;
	border: 1px solid var(--message-self-border);
}

.message-bubble.self .message-body a {
	color: var(--theme-strong) !important;
}

.message-menu-trigger {
	color: var(--theme-muted) !important;
}

.message-menu-trigger:hover,
.message-menu-trigger:focus-visible,
.message-menu-trigger[aria-expanded="true"] {
	background: var(--theme-hover) !important;
	color: var(--theme-strong) !important;
}

.message-action-menu {
	background: var(--theme-elevated) !important;
	border-color: var(--theme-border) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .32) !important;
}

.message-action-menu button,
.message-forward-thread,
.message-share-result,
.message-link-card,
.message-file-card {
	color: var(--theme-text) !important;
}

.message-action-menu button:hover,
.message-action-menu button:focus-visible,
.message-action-menu button.active {
	background: var(--theme-hover) !important;
}

.message-pinned-bar,
.selected-message-user {
	background: var(--theme-surface) !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

.message-composer-shell {
	background: var(--theme-panel) !important;
	border-color: var(--theme-border) !important;
}

.message-composer-tool {
	color: var(--theme-muted) !important;
}

.message-composer-tool:hover,
.message-composer-tool:focus-visible,
.message-composer-tool.active {
	background: var(--theme-hover) !important;
	color: var(--theme-strong) !important;
}

html[data-timeours-theme="light"] .message-image-attachment img,
html[data-timeours-theme="light"] .message-link-card img {
	background: #eef0f2;
}

/* AI generation page */
#loggedInUser {
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

#genPromptBar,
#timeline_list_bar,
.new_item {
	background: var(--theme-surface) !important;
	color: var(--theme-text) !important;
	border-color: var(--theme-border) !important;
}

#genPromptBar #pp {
	background: var(--theme-input) !important;
	color: var(--theme-text) !important;
}

#timeinterval,
#navicanvas {
	background: var(--theme-elevated) !important;
	color: var(--theme-muted) !important;
}
