@font-face { font-family: Roboto-Light; src: url(fonts/Roboto-Light.ttf); }
html, body { margin: 0; height: 100%; font-family: Roboto-Light; }
iframe { border: none; padding: 0px; }
.addThing { width: 100%; height: 50px; text-align: center; font-size: 30pt; }
.column.expanded { width: 900px; }
.thingFlex { display: flex; flex-direction: column; }
.description { padding: 3px; }
.flag { float: right; }
small { float: right; font-size: x-small; }
.Thing { padding: 8px; position: relative; font-size: 10pt; cursor: pointer; }
.column { 
	border-right: 1px solid; 
	width: 150px; 
	height: 100%; 
	overflow: auto; 
	flex-shrink: 0; /* Don't shrink columns */
	/* -webkit-transition: width 1s;  Safari 
		transition: width 1s;*/
	vertical-align: top; /* here */ 
	padding-bottom: 150px; 
	height: -webkit-fill-available; 
}
.editor-preview-full{
	max-width: 1200px;
}
/* Hide CodeMirror components when noteEditor is hidden or user not authenticated */
#noteEditor.hidden .CodeMirror,
#noteEditor.hidden .CodeMirror-scroll,
#noteEditor.hidden .EasyMDEContainer,
#noteEditor.hidden .editor-toolbar {
	display: none !important;
}

/* Default CodeMirror scroll styling with proper containment */
.CodeMirror-scroll {
	max-width: 1200px;
}

/* Ensure CodeMirror components are contained within noteEditor */
.CodeMirror,
.CodeMirror-scroll,
.EasyMDEContainer {
	visibility: hidden;
}

/* Only show CodeMirror when noteEditor is visible and not hidden */
#noteEditor:not(.hidden) .CodeMirror,
#noteEditor:not(.hidden) .CodeMirror-scroll,
#noteEditor:not(.hidden) .EasyMDEContainer {
	visibility: visible;
}


@media screen and (max-width: 800px), screen and (max-device-width: 800px) {
	/* Mobile layout: prevent horizontal overflow */
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}
	
	#layout { 
		display: flex !important; 
		flex-direction: column !important; 
		height: 100vh !important; 
		width: 100vw !important; 
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}
	
	#itemBox {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		/* max-height: 60vh !important; */
		overflow-y: auto !important;
		overflow-x: hidden !important;
		flex-shrink: 0 !important;
		box-sizing: border-box !important;
		vertical-align: unset !important;
	}
	
	#Items { 
		display: block !important; 
		width: 100% !important; 
		height: auto !important;
		overflow: visible !important;
		padding: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	
	/* Columns stack vertically in a single flow */
	.column { 
		display: block !important; 
		width: 100% !important; 
		height: auto !important; 
		min-height: 0 !important; 
		border-right: none !important; 
		border-bottom: 1px solid #444 !important; 
		margin: 0 !important; 
		padding: 0 !important; 
		overflow: visible !important;
		vertical-align: unset !important;
		position: relative !important;
		box-sizing: border-box !important;
		float: none !important;
	}
	
	.column:last-child { 
		border-bottom: none; 
	}
	
	/* Hide empty columns */
	.column.hidden { 
		display: none !important; 
	}
	
	/* Hierarchical indentation based on column depth */
	.column:nth-child(1) .Thing, .column:nth-child(1) .File { margin-left: 0; }
	.column:nth-child(2) .Thing, .column:nth-child(2) .File { margin-left: 20px; }
	.column:nth-child(3) .Thing, .column:nth-child(3) .File { margin-left: 40px; }
	.column:nth-child(4) .Thing, .column:nth-child(4) .File { margin-left: 60px; }
	.column:nth-child(5) .Thing, .column:nth-child(5) .File { margin-left: 80px; }
	.column:nth-child(n+6) .Thing, .column:nth-child(n+6) .File { margin-left: 100px; }
	
	/* Mobile nested children styling - match desktop look */
	.mobile-nested-child {
		margin-top: 2px !important;
		margin-bottom: 2px !important;
	}
	
	.mobile-nested-file {
		font-style: italic !important;
		margin-top: 2px !important;
		margin-bottom: 2px !important;
		opacity: 0.8 !important;
	}
	
	/* Mobile nested containers for proper hierarchy */
	.mobile-nested-container {
		border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
		padding-left: 10px !important;
		margin-top: 5px !important;
	}
	
	/* Mobile-friendly touch targets */
	.Thing { 
		padding: 15px; 
		margin: 0; 
		border-bottom: 1px solid #444; 
		font-size: 16pt; 
		cursor: pointer; 
		display: block;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		clear: both;
	}
	
	.File { 
		padding: 15px; 
		margin: 0; 
		border-bottom: 1px solid #444; 
		font-size: 14pt; 
		cursor: pointer; 
		display: block;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		clear: both;
	}
	
	.thingFlex {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	
	/* Hide complex editor components on mobile */
	#noteEditor, .EasyMDEContainer, .CodeMirror, .editor-toolbar {
		display: none !important;
	}
	
	/* Create simple mobile content display */
	#mobileContent {
		width: 100% !important;
		max-width: 100vw !important;
		height: 100vh !important; 
		/* max-height: 40vh !important;  */
		margin: 0 !important; 
		padding: 0 !important; /* Remove padding from container */
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		position: relative !important;
		display: flex !important; /* Use flexbox */
		flex-direction: column !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		background-color: inherit !important;
		border-top: 2px solid #444 !important;
		-webkit-overflow-scrolling: touch !important;
		/* Use desktop text styling */
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}
	
	/* Apply EasyMDE editor-preview styles to mobile content */
	#mobileContentBody {
		/* Use same base styles as .editor-preview */
		padding: 10px !important;
		padding-top: 60px !important; /* Add extra padding to account for sticky button */
		/* Background will be overridden by theme-specific CSS */
		background: #fafafa !important;
		/* Ensure proper table containment */
		overflow-x: auto !important;
		overflow-y: visible !important;
		word-wrap: break-word !important;
		box-sizing: border-box !important;
	}
	
	/* Apply EasyMDE header sizing to mobile content */
	#mobileContentBody h1 {
		font-size: 200% !important;
		line-height: 200% !important;
		color: #00f !important;
		font-weight: bold !important;
	}
	
	#mobileContentBody h2 {
		font-size: 160% !important;
		line-height: 160% !important;
		color: #00f !important;
		font-weight: bold !important;
	}
	
	#mobileContentBody h3 {
		font-size: 125% !important;
		line-height: 125% !important;
		color: #00f !important;
		font-weight: bold !important;
	}
	
	#mobileContentBody h4 {
		font-size: 110% !important;
		line-height: 110% !important;
		color: #00f !important;
		font-weight: bold !important;
	}
	
	/* Match EasyMDE preview paragraph styling */
	#mobileContentBody > p {
		margin-top: 0 !important;
	}
	
	/* Match EasyMDE preview pre/code styling */
	#mobileContentBody pre {
		background: #eee !important;
		margin-bottom: 10px !important;
	}
	
	/* Match EasyMDE table styling */
	#mobileContentBody table td,
	#mobileContentBody table th {
		border: 1px solid #ddd !important;
		padding: 8px !important;
		text-align: left !important;
		vertical-align: top !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		max-width: 0 !important; /* Forces table-layout: fixed to work */
	}
	
	#fileView { 
		width: 100% !important;
		max-width: 100vw !important;
		height: 40vh !important; 
		max-height: 40vh !important; 
		margin: 0 !important; 
		padding: 15px !important;
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		position: relative !important;
		display: block !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		background-color: inherit !important;
		border-top: 2px solid #444 !important;
		-webkit-overflow-scrolling: touch !important;
	}
	
	/* Hide login and desktop-only elements */
	.login-button, 
	.auth-controls, 
	.desktop-only,
	.no-mobile { 
		display: none !important; 
	}
	
	/* Simplified top navigation */
	.addThing { 
		width: 100%; 
		height: 40px; 
		font-size: 18pt; 
		text-align: center; 
		padding: 10px; 
		box-sizing: border-box; 
		position: sticky; 
		top: 0; 
		z-index: 100; 
	}
	
	/* Adjust selection indicators for mobile - match desktop styling */
	.lastClicked { 
		border-bottom: 2px solid !important; 
	}
	
	/* Better mobile scrolling */
	.thingFlex { 
		display: block; 
		width: 100%; 
	}
	
	/* Compact menu for mobile */
	#menu { 
		max-width: 90vw; 
		font-size: 16pt; 
	}
	
	.menu-option { 
		padding: 15px 20px; 
		font-size: 16pt; 
	}
	
	/* Mobile active menu option styling */
	.menu-option-active { 
		background: rgba(100, 150, 255, 0.4) !important; 
		font-weight: bold !important; 
		border-left: 4px solid #6496ff !important;
		padding-left: 16px !important; /* Adjust for border */
	}
	.menu-option-active:hover { 
		background: rgba(100, 150, 255, 0.5) !important; 
	}
	
	/* Mobile touch improvements - no hover effects on touch devices */
	.Thing:active, .File:active {
		background-color: rgba(255, 255, 255, 0.1);
	}
	
	/* Prevent text selection on touch */
	.Thing, .File {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	/* Smooth scrolling for mobile */
	#Items {
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}
	
	/* Mobile-specific column animations */
	.column {
		transition: all 0.3s ease;
	}
	
	/* Better mobile scrolling */
	#mobileContent {
		-webkit-overflow-scrolling: touch;
	}
	
	#fileView {
		-webkit-overflow-scrolling: touch;
		display: block !important;
		width: 100% !important;
	}
	
	/* Mobile keyboard adjustments */
	.CodeMirror {
		font-size: 16px; /* Prevents zoom on iOS */
	}
	
	/* Mobile-optimized scrollbars */
	::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
	
	::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 2px;
	}
	
	/* Editor components are hidden on mobile - no need for complex overrides */
	
	/* Fix image sizing on mobile */
	img {
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	
	/* Prevent horizontal overflow from any element */
	*, *::before, *::after {
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}
	
	/* Simple mobile layout overrides */
	#itemBox {
		display: block !important;
		width: 100% !important;
		vertical-align: unset !important;
	}
	
	/* Mobile content container */
	#mobileContent.hidden {
		display: none !important;
	}
	
	#fileView.hidden {
		display: none !important;
	}
	
	/* Mobile scroll-up button */
	#mobileScrollUpBtn {
		display: block !important;
		width: 100% !important;
		height: 50px !important;
		font-size: 16pt !important;
		background-color: #444 !important;
		color: #fff !important;
		border: none !important;
		border-bottom: 2px solid #666 !important;
		cursor: pointer !important;
		margin: 0 !important;
		padding: 15px !important;
		box-sizing: border-box !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		text-align: center !important;
		font-family: inherit !important;
		font-weight: bold !important;
		-webkit-tap-highlight-color: transparent !important;
		-webkit-touch-callout: none !important;
		-webkit-user-select: none !important;
		user-select: none !important;
		/* Ensure button creates proper space */
		flex-shrink: 0 !important;
	}
	
	#mobileScrollUpBtn:active {
		background-color: #555 !important;
		transform: translateY(1px) !important;
	}
	
	/* Ensure tables in mobile content are properly contained */
	#mobileContentBody table {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
		border-collapse: collapse !important;
		margin: 10px 0 !important;
		font-size: 14px !important;
		overflow-wrap: break-word !important;
		word-wrap: break-word !important;
	}
	
	#mobileContentBody table td,
	#mobileContentBody table th {
		border: 1px solid #ddd !important;
		padding: 8px !important;
		text-align: left !important;
		vertical-align: top !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		max-width: 0 !important; /* Forces table-layout: fixed to work */
	}
	

}
.showTags .publicThing { border-left: 2px solid #2121a3; }
.showTags .privateThing { border-left: 2px solid #602121; }
.File { overflow: hidden; padding: 8px; position: relative; border-bottom: 1px solid; font-size: 10pt; cursor: pointer; }

/*.HomeThing{
	 padding: 8px; 
	 position: fixed;
	 bottom: 0px;
	 left:0px;
	background: #2c3033;
	border-bottom: 1px solid;
	color: #939395;
	border-color: #444;
	font-size: 10pt;
	cursor: pointer;
}*/

.lastClicked { border-bottom-color: whitesmoke; border-bottom: 2px solid; }
iframe { padding-left: 20px; }
textarea { font-size: 13pt; }
.Selected {/*  background-color: #3a404c;
			color: #ddd;*/ }
	.hidden { display: none !important; }
	ul { margin-block-start: 0em; margin-block-end: 0em; }
	.menu {	/*width: 200px;*/
	/*display: none;*/ }
	#menu { --mouse-x: 0; --mouse-y: 0; position: absolute; margin: 0; left: 0; top: 0;/* The following line is responsible for all the magic */ transform: translateX(min(var(--mouse-x), calc(100vw - 100%)))
	translateY(min(var(--mouse-y), calc(100vh - 100%))); }
	.menu-options { list-style: none; padding: 0;}
	.menu-option { font-weight: 500; 
		font-size: 14px; 
		padding: 10px 40px 10px 20px; 
		cursor: pointer; 
		border-bottom: #57585a 1px solid;
	}
	.menu-option:hover { background: rgba(0, 0, 0, 0.2); }
	.menu-option-active { 
		background: rgba(0, 100, 200, 0.3) !important; 
		font-weight: bold !important; 
		border-left: 3px solid #0064c8 !important;
	}
	.menu-option-active:hover { 
		background: rgba(0, 100, 200, 0.4) !important; 
	}
	.input-option { font-weight: 500; font-size: 14px; padding: 10px 40px 10px 20px; }
	.title { padding-left: 20px; font-style: bold; font-size: 20px; }
	.description { order: 1000; }
	.input-editing { width: 100%; height: 500px; }

	thead { padding-top: 24px; padding-bottom: 20px; }
	.complete { text-decoration: line-through; }
	table.minimalistBlack { position: absolute; top: 10px; width: 750px; height: 750px; border-collapse: collapse; text-align: center; }
	table.minimalistBlack td, table.minimalistBlack th { border: 1px solid #ffffff1c; padding: 5px 4px; }
	table.minimalistBlack tr { height: 33%; }
	table.minimalistBlack td { width: 33%; }
	#Items {
		height: 100%; 
		overflow: hidden;
		display: flex; /* Make columns flex horizontally */
	}
	a:visited {/*color: #2bac8f;*/ }
	a {/*color: #2bac8f;*/
	text-decoration: none; padding: 5px; border-radius: 5px; margin: -5px; -webkit-transition: 0.1s; -moz-transition: 0.1s; -o-transition: 0.1s; -ms-transition: 0.1s; transition: 0.1s; cursor: pointer; }


	#itemBox { 
		height: 100%; 
		flex-shrink: 0; /* Don't shrink the navigation columns */
		overflow: hidden;
	}
	#fileView { 
		width: 1000px; 
		height: 85%; 
		flex-shrink: 0; /* Don't shrink the file view */
	}
	.CodeMirror-cursor { border-left: 1px solid #f7f7f7; }
	#noteEditor { 
		width: calc(100vw - 300px - 15px); /* Fixed width as requested */
		flex-shrink: 0; /* Don't shrink */
		height: calc(100vh - 20px); 
		overflow: auto; 
		margin-left: 15px; 
		margin-bottom: 0px; 
		caret-color: auto; 
	}
	img { max-width: 99%;	/*width: 99%;*/	/*padding-left: 20px;*/ }
	.disabled-for-preview .CodeMirror-sizer { display: none; }
	.editButton { color: #bbb; }
	#layout { 
		height: 100%; 
		/* width: fit-content; Allow layout to expand with content */
		width: 10000px;
		min-width: 100vw; /* Ensure it's at least full viewport width */
		display: flex; 
	}
	.editor-toolbar { border: none !important;/*background-color:#1f2021 !important;*/ }

	.EasyMDEContainer { height: inherit; border: none; }
	.CodeMirror { height: inherit !important;	/*background-color: #2c3033 !important;*/	/*color: #f9f9f9;*/
	
		/* border: 1px solid #444 !important;*/
	border: none !important; }
	.CodeMirror-fullscreen {	/*background-color: #2c3033;*/ }
	.colDiv { min-width: 50px; }
	#favMenu { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .8); z-index: 10; padding: 20%; cursor: pointer; }

	/* Settings Modal Styles */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(2px);
	}

	.modal-content {
		background-color: #2c3033;
		border-radius: 8px;
		width: 90%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
		border: 1px solid #444;
	}

	.modal-header {
		padding: 20px;
		border-bottom: 1px solid #444;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-header h2 {
		margin: 0;
		color: #ddd;
		font-size: 24px;
	}

	.close {
		color: #aaa;
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
		line-height: 1;
		padding: 0 5px;
		border-radius: 4px;
	}

	.close:hover,
	.close:focus {
		color: #fff;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.modal-body {
		padding: 20px;
		color: #ddd;
	}

	.settings-section {
		margin-bottom: 30px;
	}

	.settings-section:last-child {
		margin-bottom: 0;
	}

	.settings-section h3 {
		margin: 0 0 15px 0;
		color: #fff;
		font-size: 18px;
		border-bottom: 1px solid #444;
		padding-bottom: 8px;
	}

	.auth-section {
		margin-bottom: 15px;
	}

	.auth-section p {
		margin: 0 0 15px 0;
		color: #bbb;
		font-size: 14px;
	}

	.auth-section button {
		background-color: #4285f4;
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
		transition: background-color 0.2s;
	}

	.auth-section button:hover {
		background-color: #357ae8;
	}

	.auth-section button:active {
		transform: translateY(1px);
	}

	.search-container {
		position: relative;
	}

	#searchInput {
		width: 100%;
		padding: 12px;
		background-color: #3a404c;
		border: 1px solid #555;
		border-radius: 4px;
		color: #ddd;
		font-size: 14px;
		box-sizing: border-box;
	}

	#searchInput:focus {
		outline: none;
		border-color: #4285f4;
		box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
	}

	.search-results {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #3a404c;
		border: 1px solid #555;
		border-top: none;
		border-radius: 0 0 4px 4px;
		max-height: 200px;
		overflow-y: auto;
		z-index: 1001;
	}

	.search-result-item {
		padding: 12px;
		cursor: pointer;
		border-bottom: 1px solid #555;
		color: #ddd;
		font-size: 14px;
		transition: background-color 0.2s;
	}

	.search-result-item:last-child {
		border-bottom: none;
	}

	.search-result-item:hover {
		background-color: #4a5058;
	}

	.search-result-item.selected {
		background-color: #4285f4;
		color: white;
	}

	.theme-buttons {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.theme-buttons button {
		background-color: #444;
		color: #ddd;
		border: 1px solid #666;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		transition: all 0.2s;
	}

	.theme-buttons button:hover {
		background-color: #555;
		border-color: #777;
	}

	.theme-buttons button:active {
		transform: translateY(1px);
	}

	/* Mobile responsive modal */
	@media screen and (max-width: 600px) {
		.modal-content {
			width: 95%;
			margin: 10px;
		}
		
		.modal-header,
		.modal-body {
			padding: 15px;
		}
		
		.theme-buttons {
			flex-direction: column;
		}
		
		.theme-buttons button {
			width: 100%;
		}
	}

	/* Apply EasyMDE header sizing to mobile content */

/* Favorites Section */
.favorites-container {
	margin-top: 10px;
}

.favorites-list {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 10px;
	background-color: var(--background-color);
}

.favorites-loading {
	text-align: center;
	color: var(--muted-text-color);
	font-style: italic;
	margin: 20px 0;
}

.favorite-item {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	margin: 4px 0;
	background-color: var(--item-background-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.favorite-item:hover {
	background-color: var(--item-hover-color);
}

.favorite-item.selected {
	background-color: var(--item-selected-color);
	border-color: var(--accent-color);
}

.favorite-item .fa-star {
	color: var(--star-color);
	margin-right: 8px;
	font-size: 14px;
}

.favorite-item .favorite-title {
	flex: 1;
	font-weight: 500;
	color: var(--text-color);
}

.favorite-item .favorite-description {
	font-size: 12px;
	color: var(--muted-text-color);
	margin-left: 8px;
}

.favorites-empty {
	text-align: center;
	color: var(--muted-text-color);
	font-style: italic;
	margin: 20px 0;
}

.favorites-empty i {
	display: block;
	font-size: 48px;
	margin-bottom: 10px;
	opacity: 0.5;
}

/* Home scroll button - sticky at bottom left */
.home-scroll-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 100px;
	height: 40px;
	background-color: #393939;
	color: #ddd;
	border: 1px solid #666;
	/* border-radius: 4px; */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1000;
	font-size: 30px;
	transition: all 0.3s ease;
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.home-scroll-btn:hover {
	background-color: #454545;
	border-color: #6f6f6f;
	transform: scale(1.02);
	/* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); */
}

.home-scroll-btn:active {
	transform: scale(0.95);
	background-color: #333;
}

.home-scroll-btn i {
	pointer-events: none;
}

/* Hide on very small screens to avoid interference */
@media screen and (max-width: 800px) {
	.home-scroll-btn {
		display: none;
	}
}

/* Drag and Drop Visual Feedback */
.drag-over {
	background-color: var(--item-hover-color) !important;
	border-top: 3px solid var(--accent-color) !important;
}

.drag-above {
	border-top: 3px solid var(--accent-color) !important;
}

.drag-below {
	border-bottom: 3px solid var(--accent-color) !important;
}

.being-dragged {
	opacity: 0.5;
	transform: scale(0.95);
}