/* Theme semantic color variables
 * Light defaults on :root, dark overrides under .dark
 */

:root {
	--color-surface: 255 255 255;            /* white - for components */
	--color-surface-muted: 241 245 249;      /* slate-100 */
	--color-text: 15 23 42;                  /* slate-900 */
	--color-text-muted: 100 116 139;         /* slate-500 */
	--color-border: 231 229 228;             /* warm stone-200 */
	--color-primary: 30 213 198;             /* secondary/#1ED5C6 */
	--color-secondary: 0 170 255;            /* link-blue */
	--color-accent: 2 132 199;               /* sky-600 */
	--color-page-bg: 255 255 255;            /* white - for page background */
}

.dark {
	--color-surface: 58 58 58;               /* #3a3a3a - for components/tables */
	--color-surface-muted: 68 68 68;         /* #444444 - for hover states */
	--color-border: 68 68 68;                /* #444444 */
	--color-text: 250 250 250;               /* zinc-50 */
	--color-text-muted: 156 163 175;         /* gray-400 */
	--color-primary: 30 213 198;             /* keep brand consistent */
	--color-secondary: 0 170 255;            /* keep brand consistent */
	--color-accent: 56 189 248;              /* sky-400 */
	--color-page-bg: 25 25 25;               /* #191919 - for page background */
}

/* Optional: align native form controls */
:root {
	color-scheme: light;
}
.dark {
	color-scheme: dark;
}

/* Ensure page background/text follow theme tokens (overrides legacy dark base) */
html, body {
	background-color: rgb(var(--color-page-bg));
	color: rgb(var(--color-text));
}

/* Body should use page background, not component surface */
.dark body.bg-surface {
	background-color: rgb(var(--color-page-bg)) !important;
}

/* Custom Navigation Theme Colors - only apply background, not text color to prevent inheritance */
.custom-nav-primary {
	background-color: var(--color-nav-primary-hex, rgb(var(--color-surface-muted)));
}

.custom-nav-secondary {
	background-color: var(--color-nav-secondary-hex, rgb(var(--color-surface-muted)));
}

/* Navigation theme colors moved to input.css */

/* Navigation borders - 1px for uniformity */
.custom-nav-primary,
nav.custom-nav-primary {
	border-bottom: 1px solid var(--color-border-hex, rgb(var(--color-border))) !important;
}

/* Sidebar navigation should maintain its existing border behavior */
.custom-nav-secondary,
nav.custom-nav-secondary {
	/* Keep existing border behavior for sidebar - will be overridden in dark mode */
}

/* Dark mode: Use production navigation background color */
.dark .custom-nav-primary {
	/* Use production navigation background color */
	background-color: #50505080 !important;
	color: rgb(var(--color-text)) !important;
	border-bottom: 1px solid white !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	/* Remove filters that were causing poor appearance */
}

.dark .custom-nav-secondary {
	/* Sidebar navigation - solid background, no border */
	background-color: #2f2f2f !important;
	color: rgb(var(--color-text)) !important;
	border: none !important;
	/* Remove filters that were causing poor appearance */
}

/* Dark mode navbar border override */
.dark nav.custom-nav-primary {
	border-bottom: 1px solid white !important;
}

.dark nav.custom-nav-secondary {
	border: none !important;
}

/* Ensure text uses system default colors in dark mode - target specific text elements only */
.dark .custom-nav-primary #user-dropdown-menu p,
.dark .custom-nav-primary #user-dropdown-menu span,
.dark .custom-nav-primary #user-dropdown-menu button span {
	color: rgb(var(--color-text)) !important;
}

.dark .custom-nav-secondary p,
.dark .custom-nav-secondary button span,
.dark .custom-nav-secondary a span,
.dark .custom-nav-secondary .text-text-muted {
	color: rgb(var(--color-text)) !important;
}

/* Navigation icon styles moved to input.css */

/* Ensure hover states work properly in dark mode */
.dark .custom-nav-primary button:hover,
.dark .custom-nav-primary a:hover,
.dark .custom-nav-secondary button:hover,
.dark .custom-nav-secondary a:hover {
	color: rgb(var(--color-text)) !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Remove hover effect from hamburger icon */
.dark .custom-nav-primary a.navbar-burger:hover {
	background-color: transparent !important;
}

/* Override any specific color styles that might interfere in dark mode */
.dark .custom-nav-primary .text-text,
.dark .custom-nav-secondary .text-text {
	color: rgb(var(--color-text)) !important;
}

/* Make sure logo and brand elements are visible in dark mode */
.dark .custom-nav-primary .logo-contrast,
.dark .custom-nav-secondary .logo-contrast {
	filter: invert(0) brightness(1) !important;
}

/* Removed universal selectors that were causing icons to inherit theme colors */

/* Navigation text color styles moved to input.css */

/* Removed SVG color override that was applying theme colors to icons */

/* Custom Modal Theme Colors */
.custom-modal {
	background-color: var(--color-modal-bg-hex, rgb(var(--color-surface-muted)));
}

/* Dark mode modal adaptations: Use production modal background */
.dark .custom-modal {
	/* Use production modal background color */
	background-color: #414142 !important;
	border: 1px solid white !important;
	border-color: white !important;
	/* Remove filters that were causing poor appearance */
}

/* Global modal container white border in dark mode */
.dark [id*="modal"] .bg-white,
.dark [id*="modal"] .bg-surface,
.dark [id*="modal"] .bg-surface-muted,
.dark [class*="modal"] .bg-white,
.dark [class*="modal"] .bg-surface,
.dark [class*="modal"] .bg-surface-muted,
.dark .modal-content,
.dark .modal-dialog,
.dark .modal-container {
	border: 1px solid white !important;
}

/* Dark mode modal input fields - match production styling */
.dark .custom-modal input,
.dark .custom-modal textarea,
.dark .custom-modal select,
.dark .custom-modal .input-field {
	background-color: #222222 !important;
	color: white !important;
	border: none !important;
}

/* Dark mode modal input focus states - remove all borders and outlines */
.dark .custom-modal input:focus,
.dark .custom-modal textarea:focus,
.dark .custom-modal select:focus,
.dark .custom-modal .input-field:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	ring: none !important;
}

/* Dark mode modal section borders - for grouped content areas with toggles/selectors */
.dark .custom-modal .bg-dark-gray,
.dark .custom-modal .border.w-full.rounded-lg.p-2.p-5,
.dark .custom-modal .border.w-full.rounded-lg:has(.toggle),
.dark .custom-modal .border:has(.toggle),
.dark .custom-modal .border:has(input[type="radio"]),
.dark .custom-modal .border:has(input[type="file"]),
.dark .custom-modal .border:has(.slider),
.dark .custom-modal [id*="popular-questions"].border,
.dark .custom-modal [class*="agent-mode"].border,
.dark .custom-modal [class*="mode-selection"].border,
.dark .custom-modal .overflow-y-auto.border.rounded-lg,
.dark .custom-modal .border.rounded-lg:has(.folder-item),
.dark .custom-modal .border.rounded-lg:has(.folder-checkbox),
.dark .custom-modal .border.rounded-lg:has(.file-checkbox) {
	border: 1px solid rgb(156 163 175) !important;
	border-radius: .5rem !important;
}

/* Dark mode modal CANCEL buttons - white border with transparent background */
.dark .custom-modal button[type="button"]:not([aria-label="Toggle password visibility"]):not(.label-button),
.dark .custom-modal button:not([type="submit"]):not(.bg-secondary):not(.bg-blue-500):not(.bg-blue-600):not([aria-label="Toggle password visibility"]):not(.label-button) {
	color: white !important;
	border: 1px solid white !important;
	background-color: transparent !important;
}

.dark .custom-modal button[type="button"]:not([aria-label="Toggle password visibility"]):not(.label-button):hover,
.dark .custom-modal button:not([type="submit"]):not(.bg-secondary):not(.bg-blue-500):not(.bg-blue-600):not([aria-label="Toggle password visibility"]):not(.label-button):hover {
	background-color: rgba(31, 41, 55, 1) !important;
}

/* Ensure modal text uses system default colors in dark mode */
.dark .custom-modal * {
	color: rgb(var(--color-text)) !important;
}

/* Keep label button text black in both light and dark modes */
.custom-modal .label-button,
.dark .custom-modal .label-button {
	color: black !important;
}

/* Apply theme colors to modal elements */
.custom-modal * {
	color: rgb(var(--color-text));
}

/* Preserve button styling in modals but allow theme background */
.custom-modal .bg-surface-muted {
	background-color: var(--color-modal-bg-hex, rgb(var(--color-surface-muted)));
}

.custom-modal .bg-surface {
	background-color: var(--color-modal-bg-hex, rgb(var(--color-surface)));
}

/* Ensure modal buttons work with theme colors */
.custom-modal button,
.custom-modal input,
.custom-modal select,
.custom-modal textarea {
	color: rgb(var(--color-text));
}

/* Mobile-only: Add horizontal padding to all modals except personal settings */
@media (max-width: 768px) {
	.custom-modal,
	#create-topic-modal .custom-modal,
	[id*="modal"] .bg-white,
	[id*="modal"] .bg-surface,
	[id*="modal"] .bg-surface-muted,
	[class*="modal"] .bg-white,
	[class*="modal"] .bg-surface,
	[class*="modal"] .bg-surface-muted {
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}

	/* Override for personal settings modal - specific class with !important and higher specificity */
	.personal-settings-modal-card.bg-surface-muted,
	.custom-modal.personal-settings-modal-card.bg-surface-muted {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Override for all elements inside personal settings modal */
	.personal-settings-modal-card .bg-white,
	.personal-settings-modal-card .bg-surface,
	.personal-settings-modal-card .bg-surface-muted {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Custom Container Theme Colors (Light Mode Only) */
.custom-container {
	background-color: var(--color-container-bg-hex, rgb(var(--color-surface-muted)));
}

/* Only override bg-surface when a custom container color is explicitly set and different from defaults */
/* We'll handle this through a more targeted approach to avoid breaking default dark mode */

/* Apply to common container classes */
.custom-container .bg-surface-muted,
.custom-container .bg-surface {
	background-color: var(--color-container-bg-hex, rgb(var(--color-surface)));
}

/* Dark mode: containers use production background color - only bg-surface-muted */
.dark .custom-container {
	background-color: #363636 !important;
}

.dark .custom-container .bg-surface-muted,
.dark .bg-surface-muted {
	background-color: #363636 !important;
}

/* Exception for table headers - use #444444 */
.dark thead tr.bg-surface-muted {
	background-color: #444444 !important;
}

.dark .custom-container .bg-surface,
.dark .bg-surface {
	background-color: rgb(var(--color-page-bg)) !important;
}

/* Body and its direct child divs should use page background for auth pages - more specific */
.dark body.bg-surface.text-text,
.dark body.bg-surface > div.bg-surface.text-text {
	background-color: #191919 !important;
}

/* Ensure navigation and dropdown elements use system defaults in dark mode */
.dark nav .bg-surface-muted,
.dark #user-dropdown-menu,
.dark #navbar-menu .bg-surface-muted,
.dark #navbar-menu button {
	background-color: rgb(var(--color-surface-muted)) !important;
}

/* Custom Border Theme Colors (Light Mode Only) */
body:not(.dark) .border,
body:not(.dark) .border-border,
body:not(.dark) .border-gray-200,
body:not(.dark) .border-gray-300 {
	border-color: var(--color-border-hex, rgb(var(--color-border)));
}

/* Apply to buttons with borders */
body:not(.dark) button.border,
body:not(.dark) input.border,
body:not(.dark) select.border,
body:not(.dark) textarea.border {
	border-color: var(--color-border-hex, rgb(var(--color-border)));
}

/* Apply to common border classes */
body:not(.dark) .border-t,
body:not(.dark) .border-b,
body:not(.dark) .border-l,
body:not(.dark) .border-r {
	border-color: var(--color-border-hex, rgb(var(--color-border)));
}

/* Dark mode: borders use default theme colors */
.dark .border,
.dark .border-border,
.dark button.border,
.dark input.border {
	border-color: rgb(var(--color-border)) !important;
}

/* Dark mode: dashed and dotted borders should be gray */
.dark .border-dashed,
.dark .border-dotted,
.dark .border-2.border-dotted,
.dark .border-2.border-dashed {
	border-color: #9ca3af !important;
}

/* Dark mode: workspace module draggable items should be black with spacing */
.dark .draggable-item {
	background-color: black !important;
	margin-bottom: 16px !important;
	border-radius: 8px !important;
}

/* Dark mode: workspace users section styling */
/* User item backgrounds should be black */
.dark li.bg-surface {
	background-color: black !important;
}

/* Search input field should be black */
.dark input.search,
.dark input[type="search"] {
	background-color: black !important;
	color: white !important;
	border-color: rgba(156, 163, 175, 1) !important;
}

/* Global blue button styling - comprehensive coverage for all pages */
/* Light mode - Apply 4px border-radius to all blue button variants */
button.bg-blue-500.hover\:bg-blue-700.text-white.font-bold,
.bg-blue-500.hover\:bg-blue-700.text-white.font-bold,
button.bg-blue-500.hover\:bg-blue-600.text-white.font-bold,
.bg-blue-500.hover\:bg-blue-600.text-white.font-bold,
button.bg-blue-600.hover\:bg-blue-700.text-white,
.bg-blue-600.hover\:bg-blue-700.text-white,
/* Workflow page button variants */
button.bg-blue-500.hover\:bg-blue-600.text-white,
.bg-blue-500.hover\:bg-blue-600.text-white,
button.bg-blue-500.hover\:bg-sky-700,
.bg-blue-500.hover\:bg-sky-700 {
	border-radius: 4px !important;
}

/* Dark mode - Apply teal background and 4px border-radius to all blue button variants */
.dark button.bg-blue-500.hover\:bg-blue-700.text-white.font-bold,
.dark .bg-blue-500.hover\:bg-blue-700.text-white.font-bold,
.dark button.bg-blue-500.hover\:bg-blue-600.text-white.font-bold,
.dark .bg-blue-500.hover\:bg-blue-600.text-white.font-bold,
.dark button.bg-blue-600.hover\:bg-blue-700.text-white,
.dark .bg-blue-600.hover\:bg-blue-700.text-white,
/* Workflow page button variants */
.dark button.bg-blue-500.hover\:bg-blue-600.text-white,
.dark .bg-blue-500.hover\:bg-blue-600.text-white,
.dark button.bg-blue-500.hover\:bg-sky-700,
.dark .bg-blue-500.hover\:bg-sky-700 {
	background: rgb(30, 213, 198) !important;
	background-color: rgb(30, 213, 198) !important;
	background-image: none !important;
	color: black !important;
	border: none !important;
	border-radius: 4px !important;
}

.dark button.bg-blue-500.hover\:bg-blue-700.text-white.font-bold:hover,
.dark .bg-blue-500.hover\:bg-blue-700.text-white.font-bold:hover,
.dark button.bg-blue-500.hover\:bg-blue-600.text-white.font-bold:hover,
.dark .bg-blue-500.hover\:bg-blue-600.text-white.font-bold:hover,
.dark button.bg-blue-600.hover\:bg-blue-700.text-white:hover,
.dark .bg-blue-600.hover\:bg-blue-700.text-white:hover,
/* Workflow page button variants hover states */
.dark button.bg-blue-500.hover\:bg-blue-600.text-white:hover,
.dark .bg-blue-500.hover\:bg-blue-600.text-white:hover,
.dark button.bg-blue-500.hover\:bg-sky-700:hover,
.dark .bg-blue-500.hover\:bg-sky-700:hover {
	background: rgba(30, 213, 198, 0.9) !important;
	background-color: rgba(30, 213, 198, 0.9) !important;
	background-image: none !important;
	color: black !important;
}

/* Sidebar navigation buttons - remove borders in dark mode */
.dark #navbar-menu button.border.border-border,
.dark #navbar-menu button.dropdown-button.border {
	border: none !important;
}

/* Workspace modules rows - white background in light mode */
:root:not(.dark) #module-list .draggable-item {
	background-color: #ffffff !important;
	margin-bottom: 16px !important;
}

/* Workflow table alternating row backgrounds in dark mode - more specific selectors */
/* Table header color variables */
:root:not(.dark) {
	--table-header-bg: rgba(168, 162, 158, 0.15);
}

.dark {
	--table-header-bg: #3f3f3f;
}

/* Table header - use even row color - ultra specific selector */
.dark #main-table thead.dark-table-header tr.bg-surface-muted,
.dark #question-number-table thead.dark-table-header tr.bg-surface-muted,
.dark #actions-table thead.dark-table-header tr.bg-surface-muted {
	background-color: #3f3f3f !important;
}

/* Target all workflow table rows with more specificity */
.dark #questions-table tr.bg-surface,
.dark #questions-table tr.bg-surface\/50,
.dark #actions-table tr.bg-surface,
.dark #actions-table tr.bg-surface\/50 {
	background-color: #3a3a3a !important;
}

.dark #questions-table tr.even\:bg-surface-muted:nth-child(even),
.dark #questions-table tr.even\:bg-surface-muted\/50:nth-child(even),
.dark #actions-table tr.even\:bg-surface-muted:nth-child(even),
.dark #actions-table tr.even\:bg-surface-muted\/50:nth-child(even) {
	background-color: #3f3f3f !important;
}

/* Workflow list table rows - light mode hover */
#workflow-table tbody tr.bg-surface:hover {
	background-color: rgb(241, 245, 249) !important; /* slate-100 */
}

/* Workflow list table rows - dark mode background */
.dark #workflow-table tbody tr.bg-surface:nth-child(odd) {
	background-color: #3a3a3a !important;
}

.dark #workflow-table tbody tr.bg-surface:nth-child(even) {
	background-color: #333333 !important;
}

.dark #workflow-table tbody tr.bg-surface:hover {
	background-color: #444444 !important;
}

/* Remove hover effects from user table badges (roles and workspaces columns) */
#workflow-table tbody tr[id^="user-"] td span.bg-blue-500.rounded-full {
	pointer-events: none;
}

/* Data table (folder-table) - light mode hover */
#folder-table tbody tr.bg-surface:hover {
	background-color: rgb(241, 245, 249) !important; /* slate-100 */
}

/* Data table (folder-table) - dark mode styling */
.dark #folder-table thead tr.bg-surface-muted {
	background-color: #444444 !important;
}

.dark #folder-table tbody tr.bg-surface:nth-child(odd) {
	background-color: #3a3a3a !important;
}

.dark #folder-table tbody tr.bg-surface:nth-child(even) {
	background-color: #333333 !important;
}

.dark #folder-table tbody tr.bg-surface:hover {
	background-color: #444444 !important;
}

/* API warning section gray border in dark mode */
.dark #instructions-workflow-modal .border.rounded-lg.p-4.mt-2.mx-2 {
	border: 1px solid rgb(156 163 175) !important;
	border-radius: .5rem !important;
}

/* Workflow settings modal dropdown backgrounds - more specific selectors */
/* Light mode - light gray background for better visibility */
body:not(.dark) #workflow-graph-switcher-modal select,
body:not(.dark) #workflow-graph-switcher-modal select.w-full,
body:not(.dark) div[id*="workflow-graph-switcher-modal"] select {
	background-color: #f5f5f5 !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
}

/* Dark mode - keep the existing dark styling */
.dark #workflow-graph-switcher-modal select,
.dark #workflow-graph-switcher-modal select.w-full,
.dark div[id*="workflow-graph-switcher-modal"] select {
	background-color: rgba(var(--color-text), 0.1) !important;
	color: rgb(var(--color-text)) !important;
	border-color: rgba(var(--color-text), 0.3) !important;
}

/* Dark mode button overrides moved to input.css */

/* Reset password page theme-aware styles */
/* Dark mode overrides for reset password page */
.dark #reset-container {
	background-color: #262628 !important;
	border-color: #9ca3af !important;
	color: white !important;
}
.dark #reset-container .input-field {
	background-color: white !important;
	color: black !important;
	border: none !important;
}
.dark #reset-container .input-field:hover {
	background-color: white !important;
}
.dark #reset-container .input-field:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: white !important;
}
.dark #reset-container p,
.dark #reset-container label,
.dark #reset-container span,
.dark #reset-container li {
	color: white !important;
}
/* Light mode button styling - teal with black text, no hover animation */
#reset-container .bg-secondary {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#reset-container .bg-secondary:hover {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	transform: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
/* Dark mode button styling - no hover animation */
.dark #reset-container .bg-secondary {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
}
.dark #reset-container .bg-secondary:hover {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	transform: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Reset password request page theme-aware styles */
/* Dark mode overrides for forgot password page */
.dark #forgot-password-container {
	background-color: #262628 !important;
	border-color: #9ca3af !important;
	color: white !important;
}
.dark #forgot-password-container .input-field {
	background-color: white !important;
	color: black !important;
	border: none !important;
}
.dark #forgot-password-container .input-field:hover {
	background-color: white !important;
}
.dark #forgot-password-container .input-field:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: white !important;
}
.dark #forgot-password-container p,
.dark #forgot-password-container label,
.dark #forgot-password-container span {
	color: white !important;
}
/* Light mode button styling - teal with black text, no hover animation */
#forgot-password-container .bg-secondary {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#forgot-password-container .bg-secondary:hover {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	transform: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
/* Dark mode button styling - no hover animation */
.dark #forgot-password-container .bg-secondary {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
}
.dark #forgot-password-container .bg-secondary:hover {
	background: rgb(30 213 198 / 1) !important;
	border-color: rgb(30 213 198 / 1) !important;
	color: black !important;
	transform: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
/* CANCEL button in forgot password page */
#forgot-password-container .border:not(.bg-secondary):not(input):not(textarea) {
	color: rgb(var(--color-text));
	border-color: rgba(var(--color-text), 0.3);
	background-color: transparent;
}
#forgot-password-container .border:not(.bg-secondary):not(input):not(textarea):hover {
	background-color: rgba(var(--color-text), 0.1);
}
.dark #forgot-password-container .border:not(.bg-secondary):not(input):not(textarea) {
	color: white !important;
	border-color: white !important;
}
.dark #forgot-password-container .border:not(.bg-secondary):not(input):not(textarea):hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Workflow answer content list styling */
/* Override Tailwind's list-style reset for workflow explanations and sources */
.answer-content ul,
div[id^="explanation-content-"] ul,
div[id^="sources-content-"] ul {
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 1rem;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.answer-content ol,
div[id^="explanation-content-"] ol,
div[id^="sources-content-"] ol {
	list-style-type: decimal;
	list-style-position: inside;
	margin-left: 1rem;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.answer-content li,
div[id^="explanation-content-"] li,
div[id^="sources-content-"] li {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

/* Nested lists */
.answer-content ul ul,
div[id^="explanation-content-"] ul ul,
div[id^="sources-content-"] ul ul {
	list-style-type: circle;
	margin-left: 2rem;
}

.answer-content ol ol,
div[id^="explanation-content-"] ol ol,
div[id^="sources-content-"] ol ol {
	list-style-type: lower-alpha;
	margin-left: 2rem;
}