
/**
 * DeepSID / CSS
 */

/* ---- Custom color variables (default theme) ------------------------------- */

:root {

	--color-top:					#fff;				/* Full white for e.g. hovering on elements */
	--color-bottom:					#000;				/* Full black for e.g. bolded text in settings */

	--color-bg:						#e7e8e0;			/* Body background */
	--color-bg-box:					#f7f8f5;			/* General background color for various boxes and pages */
	--color-avatar-bg:				var(--color-top);	 /* Background color for all types of avatars */

	--color-logo:					#d3d4c6;			/* Color for e.g. top left logo and disabled song rows */
	--color-disabled:				var(--color-logo);
	--color-dot:					#8a8c7a;			/* Color for e.g. small split dots in text */
	--color-bg-sid-selected:		#ebebe5;			/* Background of e.g. a selected SID row in the browser */
	--color-bg-sid-hover:			#f1f1ed;			/* Background when hovering on a SID row in the browser */
	--color-bg-edit-area:			rgb(71, 73, 55, 0.08);
	--color-bg-scope:				var(--color-top);
	--color-bg-slider:				var(--color-top);	 /* Color of the dragging bar for changing the sundry box size */
	--color-bg-songs-buttons:		var(--color-top);	 /* The top container with the root/back buttons and path */
	--color-new-bg:					#ef0;				/* Color for small "NEW" labels on SID rows in the browser */
	--color-new-shadow:				var(--color-bottom);
	--color-bg-ptype:				var(--color-top);	 /* Color for the small "RSID" labels */
	--color-code-bg:				#f4f3ee;			/* Colors for <CODE> element */
	--color-code-border:			#ebeae1;
	--color-anchor:					#5a6701;			/* Standard hyperlink */
	--color-anchor-hover:			#e95927;
	--color-anchor-notable:			var(--color-anchor);
	--color-anchor-hover-notable:	var(--color-anchor-hover);
	--color-table:					#a8ad95;			/* Standard colors for <TABLE>, <TH> and <TD> elements */
	--color-outline:				rgba(168, 173, 149, 0.5);
	--color-table-th-bg:			#f5f6f2;
	--color-table-border:			#b0b29a;
	--color-table-border-thandle:	#d5d5c9;			/* Color of line below tiny handle in group table */
	--color-input-text:				#666;				/* When text is present in an edit box but not being edited */
	--color-input-text-focus:		#111;				/* When typing in an edit box */
	--color-selection-bg:			#d2d5cb;			/* When marking text to be copied */
	--color-selection-text:			#222;
	--color-notable:				#f8f848;			/* Color for notable achievements in composer profile */
	--color-oldest-in-top:			#c86d55;			/* Color for right corner line above CSDb comments table */
	--color-emphasize:				#ffff80;			/* Color for emphasizing handles or groups in CSDb releases */
	--color-empSec:					#cfc;
	--color-empThird:				#fdd;
	--color-bg-block-data:			var(--color-top);
	--color-text-block:				var(--color-bottom);
	--color-text-block-toggled:		#9a9a90;			/* #7c7e60 #929292 */
	--color-text-block-changed:		#c00;
	--color-text-spottext:			var(--color-top);
	--color-text-new-user:			#0a0;

	--color-text-tag:				var(--color-top);	 /* Default tag colors */
	--color-bg-tag:					#a8ad95;
	--color-bg-tag-hover:			#b6b9a5;
	--color-text-tag-event:			var(--color-text-tag);
	--color-bg-tag-event:			#8aad85;
	--color-text-tag-prod:			var(--color-text-tag);
	--color-bg-tag-prod:			#959aad;
	--color-text-tag-origin:		var(--color-text-tag);
	--color-bg-tag-origin:			#b09292;
	--color-text-tag-mixorigin:		var(--color-text-tag);
	--color-bg-tag-mixorigin:		linear-gradient(to right, #b09292 5%,#a8ad95 95%);
	--color-bg-tag-digi:			#6c6c6c;
	--color-text-tag-digi:			var(--color-text-tag);
	--color-bg-tag-r64start:		#6c7cc0;
	--color-bg-tag-remix64:			linear-gradient(to right, var(--color-bg-tag-r64start) 0%,#5458b0 100%);
	--color-bg-tag-gb64start:		#7b7363; /*#634e42;*/
	--color-bg-tag-gamebase64:		var(--color-bg-tag-gb64start);
	--color-text-tag-warning:		var(--color-text-tag);
	--color-bg-tag-warning:			#c33;

	--color-bg-cshelldb:			#d5dde9;
	--color-bg-stats-filterbg:		#f8f4e8;

	--color-border:					#ced0c0;			/* For borders and text labels where its container is disabled */
	--color-border-box:				#c8c8b9;			/* For borders around various boxes and input fields */
	--color-border-info:			#7a88c8;			/* Bottom border color for top info box */
	--color-border-comments:		var(--color-border);
	--color-border-scope:			var(--color-timebar-border);

	--color-button:					#474937;			/* Darkest green typically used on buttons */
	--color-button-border:			var(--color-button);
	--color-button-border-idle:		transparent;
	--color-button-border-select:	var(--color-button);
	--color-button-text:			var(--color-top);	
	--color-button-bg-select:		#f5f5f1;
	--color-button-text-select:		var(--color-button);
	--color-button-hover:			#62644c;			/* When hovering on an ACTIVE button */
	--color-button-bg-hovsel:		var(--color-button-text);
	--color-button-text-hovsel:		var(--color-button-hover);
	--color-button-border-hovsel:	var(--color-button-hover);
	--color-button-inverted:		#f5f5f1;			/* Almost white */
	--color-button-disabled:		#c8c9b9;			/* Disabled button */
	--color-button-disabled-text:	var(--color-button-inverted);
	--color-button-shadow:			#808270;			/* Button shadow */
	--color-button-logout:			var(--color-button-inverted);

	--border-button-select:			var(--color-button-border-select);
	--shadow-button-select:			0 0 0 transparent;

	--shadow-button-triangle:		#d2d2d2;

	--color-theme-selector-bg:		var(--color-button);
	--color-theme-selector-border:	var(--color-button-border);
	--color-theme-bg-hovtop:		var(--color-top);
	--color-theme-bg-hovbot:		var(--color-button-hover);
	--shadow-theme-selector:		1px 1px 2px var(--color-text-minor);

	--url-biglogo:					url(../images/biglogo.png);
	
	--color-link-hover:				#e95927;			/* Hovering on a link */

	--color-text-body:				#404040;			/* Default text color */
	--color-text-notable:			var(--color-text-body);
	--color-text-subtle:			#a1a294;			/* For e.g. top links */
	--color-text-fine:				#68695a;			/* For e.g. login user name */
	--color-text-dim:				#b0b29a;			/* For e.g. edit box border and small text on white background */
	--color-text-player:			#7c7e60;			/* For e.g. login response text and small text in players tab */
	--color-text-faint:				#a8ad95;			/* For e.g. HVSC version text in info box */
	--color-text-del:				var(--color-text-faint);
	--color-text-distinct:			#555;				/* For e.g. SID title and digi sample rates in info box */
	--color-text-ptype:				var(--color-text-distinct);
	--color-text-sid-selected:		var(--color-button);
	--color-text-minor:				#969787;			/* For e.g. small text lines in SID rows */
	--color-text-info-selected:		none;
	--color-text-c64font:			#555743;			/* Used for the C64 font in the CGSC folder */
	--color-text-label-disabled:	var(--color-border);
	--color-text-time:				#c6c6c6;
	--color-text-sundry-disabled:	#b2b3ad;
	--color-text-fa-common:			#c8c8c8;

	--color-tags-bracket:			#a1a294;			/* Used for horizontal tag start-to-end brackets */
	--color-tags-bracket-up:		#949494;

	--color-border-subtune:			#888;				/* Border for round sub tune indicators in playlists */
	--color-text-subtune:			#222;				/* Text color for sub tune indicators in playlists */
	--color-bg-subtune:				var(--color-top);

	--color-text-resp-good:			#494;				/* Good response text color in user form */
	--color-text-resp-bad:			#a44;				/* Bad response text color in user form */

	--color-bg-ffi:					var(--color-top);
	--color-text-ffi:				#181818;

	--color-text-sidsp-2sid:		#44b;
	--color-border-sidsp-2sid:		#44b;
	--color-bg-sidsp-2sid:			#f6f6fa;
	--color-text-sidsp-3sid:		#b44;
	--color-border-sidsp-3sid:		#b44;
	--color-bg-sidsp-3sid:			#faf6f6;

	--color-scrollbar-thumb:		#ccccbe;
	--color-scrollbar-thumb-hover:	#a5a59a;
	--color-scrollbar-thumb-active:	#606059;
	--color-scrollbar-track:		#ecece6;

	--color-settings-cog-icon:		var(--color-button-hover);
	--color-settings-bold:			var(--color-bottom);

	--color-bg-playerinfo:			var(--color-top);
	--color-player-package:			#f8f1f1;			/* Background colors for headers in player/editor table */
	--color-player-features:		#fafaee;
	--color-player-player:			#f1f1f8;
	--color-player-editor:			#f2f8f2;

	--color-forum-admin:			#b44;
	--color-forum-moderator:		#44b;
	--color-forum-trusted:			#1a1;

	--color-dialog-cover:			var(--color-bottom);
	--color-dialog-shadow:			#040404;
	--color-ctp-circle:				#111;

	--color-pwd-good:				#080;				/* When changing the password in settings */
	--color-pwd-bad:				#a00;

	--color-viz-msg-emu:			var(--color-pwd-bad);
	--color-viz-msg-buffer:			#00a;
	--color-viz-msg-enable:			var(--color-pwd-good);

	--color-sid-row-error-entry:	#a33;				/* Error colors for SID file row that can't be played */
	--color-sid-row-error-info:		#cc8282;
	--color-sid-row-error-bg:		#f5eaea;

	--color-graph-channel-text:		#777;
	--color-graph-channel-bg:		var(--color-top);
	--color-graph-border:			#aaa;
	--color-graph-bg:				var(--color-top);

	--url-vote:						url(../images/vote_bright.png);
	--bottom-connect-down:			-9px;

	/* SVG images */

	/* @link https://codepen.io/sosuke/pen/Pjoqqp - NOTE: The SVG must be black as default for this to work! */
	--svg-filter-white:				invert(100%) sepia(0%) saturate(7487%) hue-rotate(319deg) brightness(103%) contrast(104%);
	--svg-filter-button:			invert(26%) sepia(15%) saturate(581%) hue-rotate(27deg) brightness(96%) contrast(93%);
	--svg-filter-button-hover:		invert(36%) sepia(21%) saturate(406%) hue-rotate(26deg) brightness(99%) contrast(91%);
	--svg-filter-button-disabled:	invert(86%) sepia(12%) saturate(216%) hue-rotate(25deg) brightness(93%) contrast(89%);
	--svg-filter-text-player:		invert(50%) sepia(14%) saturate(593%) hue-rotate(25deg) brightness(94%) contrast(88%);

	--svg-filter-viz-msg-buffer:	none;
	--svg-filter-icon-bottom:		none;
	--svg-filter-loading-spinner:	var(--svg-filter-button);
	--svg-filter-row-spinner:		var(--svg-filter-button);
	--svg-filter-icon-flash:		invert(52%) sepia(69%) saturate(1670%) hue-rotate(8deg) brightness(95%) contrast(101%);
	--svg-filter-icon-plus:			invert(18%) sepia(67%) saturate(7064%) hue-rotate(93deg) brightness(103%) contrast(106%);
	--svg-filter-icon-office:		invert(23%) sepia(37%) saturate(2924%) hue-rotate(28deg) brightness(96%) contrast(101%);
	--svg-filter-icon-editor:		invert(26%) sepia(11%) saturate(0%) hue-rotate(244deg) brightness(90%) contrast(90%);
	--svg-filter-icon-cstar:		invert(8%) sepia(84%) saturate(5326%) hue-rotate(5deg) brightness(93%) contrast(114%);
	--svg-filter-icon-time:			invert(50%) sepia(0%) saturate(0%) hue-rotate(184deg) brightness(93%) contrast(91%);
	--svg-filter-icon-to-top:		var(--svg-filter-white);
	--svg-filter-icon-visuals:		var(--svg-filter-button);
	--svg-filter-icon-sticky:		var(--svg-filter-icon-editor);
	--svg-filter-icon-disabled:		var(--svg-filter-white);
	--svg-filter-edit-tags:			var(--svg-filter-white);
	--svg-filter-close:				var(--svg-filter-button);
	--svg-filter-money:				invert(59%) sepia(11%) saturate(1135%) hue-rotate(38deg) brightness(90%) contrast(84%);
	--svg-filter-tn-disabled:		var(--svg-filter-white);
	
	--svg-bg-star-orange:			url(../images/if_star_orange.svg) 0 0 / 18px 18px no-repeat;
	--svg-bg-star-empty-voted:		url(../images/if_star_empty_voted.svg) 0 0 / 18px 18px no-repeat;
	--svg-bg-star-empty-unvoted:	url(../images/if_star_empty_unvoted.svg) 0 0 / 18px 18px no-repeat;

	/* Custom context menu */

	--color-context-bg:				var(--color-top);
	--color-context-border:			var(--color-border-box);
	--color-context-shadow:			rgba(0, 0, 0, 0.2);
	--color-context-bg-hover:		#eeeee8;			/* Color when hovering on a line in a context menu */
	--color-context-text-hover:		var(--color-text-body);
	--color-context-divider:		var(--color-border-box);
	--color-context-triangle:		var(--color-button);
	--color-context-disabled:		var(--color-border);

	/* Tabs */

	--color-tab-bg:					#eff1eb;			/* Background color of a tab */
	--color-tab-border:				var(--color-border-box);
	--color-tab-text-color:			var(--color-button-shadow);
	--color-tab-selected-bg:		var(--color-bg-box);
	--color-tab-selected-text:		var(--color-text-fine);
	--color-tab-hover-bg:			var(--color-top);
	--color-tab-hover-text:			var(--color-button-hover);
	--color-tab-text-disabled:		#d7d7cb;			/* For when a tab is disabled */
	--color-tab-border-disabled:	#dadace;
	--color-tab-bg-disabled:		var(--color-context-item-hover);

	--color-notification-text:		var(--color-top);
	--color-notification-default:	#a00;				/* Background color of notifications in the corner of tabs */
	--color-notification-csdb:		#100098;			/* Original CSDb color */
	--color-notification-gb64:		#070;
	--color-notification-player:	#808;
	--color-notification-remix:		#777;
	--color-notification-stil:		#088;

	/* SOASC status in top */

	--color-soasc-status-bg:		var(--color-tab-border-disabled);
	--color-soasc-status-border:	var(--color-logo);
	--color-soasc-status-text:		var(--color-button-hover);
	--color-soasc-status-unknown:	#999;				/* SOASC status field in top */
	--color-soasc-status-up:		#0b0;
	--color-soasc-status-down:		#c22;
	--color-soasc-status-out:		#aa0;
	--color-soasc-handlers-down:	#d00;				/* Used in the drop-down box for SID handlers */

	/* Colors in root (front page) boxes */

	--color-root-good-bg:			#efe;				/* Colors for good front page news */
	--color-root-good-border:		#aca;
	--color-root-good-text:			#070;
	--color-root-bad-bg:			#fee;				/* Colors for bad front page news */
	--color-root-bad-border:		#caa;
	--color-root-bad-news-text:		var(--color-text-body);
	--color-root-bg-random:			#fafff8;			/* Color for root random folder box when hovering on it */
	--color-root-bg-rec:			#eeefe9;			/* Color for root recommended folder box when hovering on it */
	--color-root-random-text:		#5e6048;
	--color-root-random-bigfont:	#333;
	--color-root-random-shadow:		var(--color-bg-box);

	/* Corner flags in info box */

	--color-pal:					#669;				/* Color for PAL corner flag box */
	--color-pal-hover:				#77a;
	--color-ntsc:					#955;				/* Color for NTSC corner flag box */
	--color-ntsc-hover:				#b06c6c;
	--color-6581-bg:				var(--color-button);
	--color-6581-text:				var(--color-button-inverted);
	--color-6581-border:			var(--color-button);
	--color-6581-bg-hover:			var(--color-button-hover);
	--color-6581-text-hover:		var(--color-top);
	--color-6581-border-hover:		var(--color-button-hover);
	--color-8580-bg:				#fafafa;			/* Background color of 8580 corner flag box */
	--color-8580-text:				var(--color-text-body);
	--color-8580-bg-hover:			var(--color-top);
	--color-8580-text-hover:		var(--color-button-hover);

	/* Memory bar colors */

	--color-memory-bg:				#a4aeda;			/* Color of the inside of the memory bar */
	--color-memory-border-top:		#44529d;			/* Typical dark blue C64 color */
	--color-memory-chunk:			var(--color-memory-border-top);
	--color-memory-border-lr:		rgba(68, 82, 157, 0.3);
	--color-memory-lid-side:		rgba(68, 82, 157, 0);
	--color-memory-lid-middle:		rgba(68, 82, 157, 1);
	--color-memory-rom:				#cdd3eb;

	--shadow-memory:				none;
	--shadow-memory-chunk:			var(--shadow-memory);

	/* Time bar colors */

	--color-timebar-bg:				#fcfcfc;			/* Color of the inside of the time bar */
	--color-timebar-border:			#c4c5b3;			/* Color for border of e.g. time bar, permalinks, etc. */
	--color-timebar-resid:			#964;
	--color-timebar-jsidplay2:		#6f7608;
	--color-timebar-websid:			var(--color-memory-border-top);
	--color-timebar-hermit:			rgb(38, 99, 41);
	--color-timebar-asid:			#666;
	--color-timebar-lemon:			rgb(104, 44, 116);
	--color-timebar-youtube:		#a44;				/* This and above are time bar colors for various SID handlers */

	--color-slider-track:			#7e8260;			/* Color of the rail track of the volume slider */

	/* CSDb music competition folder icons */

	--color-compo-bg:				var(--color-root-bg-random);
	--color-compo-text:				var(--color-bottom);
	--color-compo-border:			var(--color-bottom);
	--color-compo-copy:				#900;
	--color-compo-demo:				#080;
	--color-compo-meeting:			#6c6c6c;
	--color-compo-internal:			#6f7608;
	--color-compo-c64:				#6c7bc2;
	--color-compo-8bit:				#000;
	--color-compo-standalone:		#00a;

	--shadow-compo:					1px 1.5px 3px var(--color-text-dim);

	/* Player type strips */

	--color-strip-pl-a:				#c0c0c0;
	--color-strip-pl-b:				#7b7;
	--color-strip-pl-c:				#7bb;
	--color-strip-pl-d:				#99b;
	--color-strip-pl-e:				#bb7;
	--color-strip-pl-f:				#b7b;

	/* Styled select colors */	

	--color-styled-select-text:		var(--color-button);
	--color-styled-select-border:	var(--color-border-box);
	--color-styled-select-bg:		var(--color-top);
	--color-styled-active-bg:		var(--color-button-inverted);
	--color-styled-arrow:			var(--color-button);
	--color-styled-disabled:		#777;
	--color-styled-arrow-disabled:	var(--color-styled-disabled);
	--color-styled-shadow:			rgba(0, 0, 0, 0.3);
	--color-styled-item-disabled:	#c8c8ba;
	--color-styled-dotted-line:		#a4a4a4;
	--color-styled-resetcolor:		#444;

	/* Piano synth box colors */

	/* NOTE: File 'viz.js' also contains direct color settings for both piano and graphs views.
	         The scope line color is set with a small array in the top of the 'viz.js' file. */

	--color-piano-inverted:			#ddd;				/* Bright gray */
	--color-piano-bg:				#444;				/* Background of synth box (overridden by a gradient) */
	--color-piano-bg-lg1:			#555;				/* Linear gradient colors for background of synth box */
	--color-piano-bg-lg2:			#080808;
	--color-piano-pv-wrap1:			#111;				/* The wrap box (border) gradient colors of a voice button */
	--color-piano-pv-wrap2:			#3c3c3c;
	--color-piano-vc-on:			#222;				/* Voice button (overridden by a gradient) */
	--color-piano-vc-on-rg1:		#f6fcf6;			/* Radial gradient colors for voice button */
	--color-piano-vc-on-rg2:		#2c2;
	--color-piano-vc-on-rg2-2sid:	#44d;
	--color-piano-vc-on-rg2-3sid:	#d44;
	--color-piano-vc-on-border:		#3c3c3c;
	--color-piano-vc-on-shadow:		#afa;
	--color-piano-vc-on-hover1:		#fff;				/* Radial gradient colors for hovering on a voice button */
	--color-piano-vc-on-hover2:		#4e4;
	--color-piano-vc-on-h2-2sid:	#66f;
	--color-piano-vc-on-h2-3sid:	#f66;
	--color-piano-vc-off-lg1:		#636363;			/* Colors for hovering on a voice button turned off */
	--color-piano-vc-off-lg2:		#171717;
	--color-piano-tr-border:		#888;				/* Bottom border of the flat pulsating info triangle */
	--color-piano-pmc-lg1:			#303030;			/* Linear gradient colors (border) for modulation arrows */
	--color-piano-pmc-lg2:			#434343;
	--color-piano-pr-on-lg1:		#faa;				/* Ring modulation arrow */
	--color-piano-pr-on-lg2:		#f44;
	--color-piano-pr-shadow:		#f66;
	--color-piano-ph-on-lg1:		#bbf;				/* Hard sync arrow */
	--color-piano-ph-on-lg2:		#66f;
	--color-piano-ph-shadow:		#7272ff;
	--color-piano-pm-off:			#232323;			/* Background color for when ring mod or hard sync is off */
	--color-piano-bar:				#333;				/* Background of pulse/filter bars (overridden by gradient) */
	--color-piano-bar-lg1:			#0c0c0c;			/* Linear gradient colors for background of pulse/filter bars */
	--color-piano-bar-lg2:			#3c3c3c;
	--color-piano-pb-lp-lg1:		#1e1e1e;			/* Filter passband colors (border) */
	--color-piano-pb-lp-lg2:		#464646;
	--color-piano-pb-bp-lg1:		#111;
	--color-piano-pb-bp-lg2:		#3c3c3c;
	--color-piano-pb-hp-lg1:		#0e0e0e;
	--color-piano-pb-hp-lg2:		#333;
	--color-piano-pb-on:			#f55;				/* Filter passband when on */
	--color-piano-pb-on-lg1:		#fdd;
	--color-piano-pb-on-lg2:		#f66;
	--color-piano-pb-on-border:		#e44;
	--color-piano-pb-on-shadow:		#f88;
	--color-piano-pb-off:			#1e1e1e;			/* Filter passband when off */
	--color-piano-pb-off-lg1:		#333;
	--color-piano-pb-off-lg2:		#1e1e1e;
	--color-piano-pb-off-border:	#111;

	/* Solo button */

	--height-button-solo:			17px;
	--top-button-solo:				1px;
}

/* ---- Custom color variables (dark theme) ---------------------------------- */

[data-theme="dark"] {

	--color-bg:						#181818;			/* Body background */
	--color-bg-box:					#242424;			/* General background color for various boxes and pages */
	--color-avatar-bg:				#393939;

	--color-logo:					#31362e;
	--color-disabled:				#444;
	--color-bg-sid-selected:		#343434;			/* Background of e.g. a selected SID row in the browser */
	--color-bg-sid-hover:			#2c2c2c;			/* Background when hovering on a SID row in the browser */
	--color-bg-edit-area:			var(--color-bg);
	--color-bg-scope:				#111;
	--color-bg-slider:				#5a5a5a;
	--color-bg-songs-buttons:		linear-gradient(to bottom, #343434 10%,#181818 100%);
	--color-new-bg:					#d9ce6f;
	--color-bg-ptype:				#888;
	--color-code-bg:				#383838;
	--color-code-border:			#484848;
	--color-anchor:					#e0d68a;
	--color-anchor-hover:			#f5f5f1;
	--color-anchor-notable:			#980000;
	--color-anchor-hover-notable:	#e80000;
	--color-table:					#606060;			/* Standard colors for <TABLE>, <TH> and <TD> elements */
	--color-outline:				rgba(96, 96, 96, 0.3);
	--color-table-th-bg:			transparent;
	--color-table-border:			#4c4c4c;
	--color-table-border-thandle:	#3c3c3c;
	--color-selection-bg:			#e0d68a;
	--color-selection-text:			#222;
	--color-notable:				#d9ce6f;
	--color-emphasize:				#449;
	--color-empSec:					#005000;
	--color-empThird:				#700000;
	--color-bg-block-data:			var(--color-bottom);
	--color-text-block:				#bcbebc;
	--color-text-block-toggled:		var(--color-top);
	--color-text-block-changed:		#e66;
	--color-text-spottext:			var(--color-bottom);
	--color-text-new-user:			#0f0;

	--color-text-tag:				var(--color-bottom);  /* Default tag colors */
	--color-bg-tag:					#b6b9a5;
	--color-bg-tag-hover:			#c8cbbb;
	--color-text-tag-event:			var(--color-text-tag);
	--color-bg-tag-event:			#a9c9a5;
	--color-text-tag-prod:			var(--color-text-tag);
	--color-bg-tag-prod:			#a5a9b9;
	--color-text-tag-origin:		var(--color-text-tag);
	--color-bg-tag-origin:			#bca3a2;
	--color-text-tag-mixorigin:		var(--color-text-tag);
	--color-bg-tag-mixorigin:		linear-gradient(to right, #bca3a2 25%,#b6b9a5 100%);
	--color-bg-tag-digi:			#fafafa;
	--color-text-tag-digi:			var(--color-text-tag);
	--color-bg-tag-r64start:		#6878b0;
	--color-bg-tag-remix64:			linear-gradient(to right, var(--color-bg-tag-r64start) 25%,#465692 100%);
	--color-bg-tag-gb64start:		#685246; /* #634e42; */
	--color-bg-tag-gamebase64:		var(--color-bg-tag-gb64start);
	--color-text-tag-warning:		var(--color-text-tag);
	--color-bg-tag-warning:			#f88;

	--color-bg-cshelldb:			#1b2433;
	--color-bg-stats-filterbg:		#2e2724;

	--color-border:					#0c0c0c;			/* For borders and text labels where its container is disabled */
	--color-border-box:				#2c2c2c;			/* For borders around various boxes and input fields */
	--color-border-info:			#303a70;			/* Bottom border color for top info box */
	--color-border-comments:		#4c4c4c;
	--color-border-scope:			#3e3e3e;

	--color-button:					linear-gradient(to bottom, #6e7965 0%,#4b5345 85%); /* #4e5648 #565f4f #4a5244 #5a6650 #415d43 */
	--color-button-border:			#555e4e;
	--color-button-border-idle:		var(--color-button-border);
	--color-button-border-select:	#f5f5f1;
	--color-button-bg-select:		linear-gradient(to bottom, #daddd7 0%,#a0a999 95%);
	--color-button-text-select:		#4b5345;
	--color-button-hover:			linear-gradient(to bottom, #828e78 0%,#5f6957 85%);
	--color-button-bg-hovsel:		linear-gradient(to bottom, #eeefed 0%,#b4bbaf 95%);
	--color-button-text-hovsel:		#565f4f;
	--color-button-border-hovsel:	#c8cdc3;
	--color-button-inverted:		#f5f5f1;			/* Almost white */
	--color-button-disabled:		#31362e;			/* Disabled button */
	--color-button-disabled-text:	#5a5f56;
	--color-button-shadow:			none;

	--border-button-select:			#b4bbad;
	--shadow-button-select:			none; /*inset 1px 1px 6px #111;*/

	--shadow-button-triangle:		#181818;

	--color-theme-selector-bg:		#242424;
	--color-theme-selector-border:	var(--color-theme-selector-bg);
	--color-theme-bg-hovtop:		#fff;
	--color-theme-bg-hovbot:		#000;
	--shadow-theme-selector:		0 0 4px #f5f5f1;

	--url-biglogo:					url(../images/biglogo_dark.png);

	--color-link-hover:				var(--color-anchor-hover);

	--color-text-body:				#bcbebc;			/* Default text color */ /* #bec0ba */
	--color-text-notable:			#404040;
	--color-text-subtle:			#666;				/* For e.g. top links */
	--color-text-fine:				#a8ada0;			/* For e.g. login user name*/
	--color-text-dim:				#777;
	--color-text-player:			#777;
	--color-text-faint:				#666;				/* For e.g. HVSC version text in info box */
	--color-text-del:				#6c631c;
	--color-text-distinct:			#cecece;
	--color-text-ptype:				#000;				/* For e.g. digi sample rates in info box */
	--color-text-sid-selected:		#fff;
	--color-text-minor:				#888;				/* For e.g. small text lines in SID rows */
	--color-text-info-selected:		#aaa;
	--color-text-c64font:			#a8a8a8;
	--color-text-label-disabled:	#555;
	--color-text-time:				#484848;
	--color-text-sundry-disabled:	#4a4a4a;
	--color-text-fa-common:			#464646;

	--color-tags-bracket:			#808080;			/* Used for horizontal tag start-to-end brackets */
	--color-tags-bracket-up:		#949494;

	--color-border-subtune:			#000;
	--color-bg-subtune:				#d4d4d4;

	--color-text-resp-good:			#6b6;
	--color-text-resp-bad:			#d77;

	--color-bg-ffi:					var(--color-bg);
	--color-text-ffi:				var(--color-text-body);

	--color-text-sidsp-2sid:		#bbe;
	--color-border-sidsp-2sid:		#bbe;
	--color-bg-sidsp-2sid:			#262e46;
	--color-text-sidsp-3sid:		#ebb;
	--color-border-sidsp-3sid:		#ebb;
	--color-bg-sidsp-3sid:			#361e24;

	--color-scrollbar-thumb:		#555;
	--color-scrollbar-thumb-hover:	#6a6a6a;
	--color-scrollbar-thumb-active:	#b7b7b7;
	--color-scrollbar-track:		#1c1c1c;

	--color-settings-cog-icon:		#6a6c68;
	--color-settings-bold:			var(--color-top);

	--color-bg-playerinfo:			#181818;
	--color-player-package:			linear-gradient(to bottom, #906868 0%,#704848 90%); /* #805858; */
	--color-player-features:		linear-gradient(to bottom, #808068 0%,#606048 90%); /* #707058; */
	--color-player-player:			linear-gradient(to bottom, #707090 0%,#505070 90%); /* #606080; */
	--color-player-editor:			linear-gradient(to bottom, #709070 0%,#507050 90%); /* #608060; */

	--color-forum-admin:			#ebb;
	--color-forum-moderator:		#bbe;
	--color-forum-trusted:			#beb;

	--color-dialog-cover:			#111;
	--color-dialog-shadow:			#000;
	--color-ctp-circle:				#0a0a0a;

	--color-pwd-good:				#0a0;
	--color-pwd-bad:				#c00;

	--color-viz-msg-emu:			#f44;
	--color-viz-msg-buffer:			#88f;
	--color-viz-msg-enable:			#2d2;

	--color-sid-row-error-entry:	#fdd;
	--color-sid-row-error-bg:		#382828;

	--color-graph-channel-text:		#181818;
	--color-graph-channel-bg:		#a4a4a4;
	--color-graph-border:			#373737;
	--color-graph-bg:				#181818;

	--url-vote:						url(../images/vote_dark.png);
	--bottom-connect-down:			-8px;

	/* SVG images */

	/* @link https://codepen.io/sosuke/pen/Pjoqqp - NOTE: The SVG must be black as default for this to work! */
	--svg-filter-viz-msg-buffer: 	var(--svg-filter-white);
	--svg-filter-icon-bottom:		invert(87%) sepia(6%) saturate(56%) hue-rotate(71deg) brightness(101%) contrast(90%);
	--svg-filter-loading-spinner:	var(--svg-filter-icon-time);
	--svg-filter-row-spinner:		var(--svg-filter-button-disabled);
	--svg-filter-icon-office:		var(--svg-filter-icon-flash);
	--svg-filter-icon-visuals:		invert(25%) sepia(10%) saturate(629%) hue-rotate(52deg) brightness(96%) contrast(87%);
	--svg-filter-icon-sticky:		var(--svg-filter-viz-msg-buffer);
	--svg-filter-icon-disabled:		var(--svg-filter-icon-visuals);
	--svg-filter-edit-tags:			none;
	--svg-filter-close:				var(--svg-filter-icon-bottom);
	--svg-filter-money:				invert(58%) sepia(12%) saturate(928%) hue-rotate(38deg) brightness(98%) contrast(94%);
	--svg-filter-tn-disabled:		invert(0%) sepia(9%) saturate(4037%) hue-rotate(328deg) brightness(104%) contrast(73%);

	--svg-bg-star-orange:			url(../images/if_star_orange_dark.svg) 0 0 / 18px 18px no-repeat;
	--svg-bg-star-empty-voted:		url(../images/if_star_empty_voted_dark.svg) 0 0 / 18px 18px no-repeat;
	--svg-bg-star-empty-unvoted:	url(../images/if_star_empty_unvoted_dark.svg) 0 0 / 18px 18px no-repeat;

	/* Custom context menu */

	--color-context-bg:				#383838;
	--color-context-border:			#666;
	--color-context-shadow:			rgba(0, 0, 0, 0.6);
	--color-context-bg-hover:		var(--color-context-border);
	--color-context-text-hover:		var(--color-button-inverted);
	--color-context-divider:		var(--color-context-border);
	--color-context-triangle:		#aaa;
	--color-context-disabled:		#555;

	/* Tabs */

	--color-tab-bg:					linear-gradient(to bottom, #303030 0%,var(--color-bg) 100%);
	--color-tab-border:				var(--color-border-box);
	--color-tab-text-color:			#6a6c68;
	--color-tab-selected-bg:		linear-gradient(to bottom, #4c4c4c 0%,var(--color-bg-box) 100%);
	--color-tab-selected-text:		var(--color-text-body);
	--color-tab-hover-bg:			linear-gradient(to bottom, var(--color-text-body) 0%,#484848 100%);
	--color-tab-hover-text:			var(--color-bottom);
	--color-tab-text-disabled:		#3c3c3c;
	--color-tab-border-disabled:	#202020;
	--color-tab-bg-disabled:		#202020;

	--color-notification-default:	#a33;
	--color-notification-csdb:		#404c92;
	--color-notification-gb64:		#474;
	--color-notification-player:	#848;
	--color-notification-remix:		#666;
	--color-notification-stil:		#077;

	/* SOASC status in top */

	--color-soasc-status-bg:		#2a2a2a;
	--color-soasc-status-border:	#383838;
	--color-soasc-status-text:		var(--color-text-minor);

	/* Colors in root (front page) boxes */

	--color-root-bg-random:			#333;
	--color-root-bg-rec:			#333;
	--color-root-bad-bg:			#281414;
	--color-root-bad-border:		#c00;
	--color-root-bad-news-text:		var(--color-text-body);
	--color-root-random-text:		#f5f5f1;
	--color-root-random-bigfont:	#e0d68a;
	--color-root-random-shadow:		#000;

	/* Corner flags in info box */

	--color-6581-bg:				var(--color-button); /* #585858 */
	--color-6581-text:				var(--color-button-inverted);
	--color-6581-border:			#4e5648;
	--color-6581-bg-hover:			var(--color-button-hover);
	--color-6581-text-hover:		var(--color-top);
	--color-6581-border-hover:		var(--color-6581-border);
	--color-8580-bg:				#f5f5f1;
	--color-8580-text:				#333;
	--color-8580-bg-hover:			#fff;
	--color-8580-text-hover:		var(--color-text-subtle);

	/* Memory bar colors */

	--color-memory-bg:				#8b97cf;
	--color-memory-border-top:		#000;
	--color-memory-chunk:			linear-gradient(to bottom, #5766b7 5%,#424f98 95%); /* #616fbb to #44529d */
	--color-memory-border-lr:		#303a70;
	--color-memory-lid-side:		transparent;
	--color-memory-lid-middle:		transparent;

	--shadow-memory:				inset 0 1px 1px #dee1f0; /* #28305c #dee1f0 */
	--shadow-memory-chunk:			inset 0 1px 1px #99a2d3;

	/* Time bar colors */

	--color-timebar-bg:				linear-gradient(to bottom, #1c1c1c 0%,#3a3a3a 75%);
	--color-timebar-border:			#555;
	--color-timebar-resid:			linear-gradient(to bottom, #a0604b 20%,#78402f 100%); 	/* #964; */
	--color-timebar-jsidplay2:		linear-gradient(to bottom, #969e0a 20%,#6f7608 100%); 	/* #6f7608 */
	--color-timebar-websid:			linear-gradient(to bottom, #616fbb 20%,#44529d 100%); 	/* #44529d */
	--color-timebar-hermit:			linear-gradient(to bottom, #368e39 20%,#266329 100%); 	/* #266329 */
	--color-timebar-asid:			linear-gradient(to bottom, #777 20%,#555 100%);			/* #666 */
	--color-timebar-lemon:			linear-gradient(to bottom, #a651bd 20%,#843a98 100%); 	/* #682c74 */
	--color-timebar-youtube:		linear-gradient(to bottom, #bd5b5b 20%,#9d3f3f 100%); 	/* #a44; */
	--color-slider-track:			#4a4a4a;

	/* CSDb music competition folder icons */

	--shadow-compo:					0 0 4px #f5f5f1;

	/* Player type strips */

	--color-strip-pl-a:				#606060;
	--color-strip-pl-b:				#373;
	--color-strip-pl-c:				#377;
	--color-strip-pl-d:				#555590;
	--color-strip-pl-e:				#773;
	--color-strip-pl-f:				#884888;

	/* Styled select colors */	

	--color-styled-select-text:		#404040;
	--color-styled-select-bg:		#f0f0f0;
	--color-styled-arrow:			var(--color-styled-select-text);
	--color-styled-shadow:			#000;
	--color-styled-item-disabled:	#bababa;

	/* Solo button */

	--height-button-solo:			16px;
	--top-button-solo:				1.5px;

}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	color: var(--color-text-notable);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"] {
	background: var(--color-styled-select-bg);
}

/*[data-theme="dark"] select option {
	background: var(--color-styled-select-bg);
}*/

[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
	color: var(--color-text-distinct);
}

[data-theme="dark"] [type="text"]:disabled {
	border-color: var(--color-disabled);
	background: var(--color-bg-sid-selected);
}

[data-theme="dark"] h2 { color: #fff; }
[data-theme="dark"] h3 { color: #d8dad8; }

[data-theme="dark"] #page .ext .name { color: #f5f5f1; }
[data-theme="dark"] #page .ext .name:hover { text-decoration: underline; }

[data-theme="dark"] #topic-player table {
	border-top-width: 1px !important;
}

[data-theme="dark"] #topic-player table,
[data-theme="dark"] #topic-player th,
[data-theme="dark"] #topic-player td {
	border-color: #363636 !important;
}
[data-theme="dark"] #topic-player td.corner {
	color: #ddd;
}

[data-theme="dark"] #page .ext table.tight th {
	color: #e4e4e4;
}

[data-theme="dark"] #songs .folder span.compo-year:before {
	border-color: #000;
}

[data-theme="dark"] #theme-selector:hover {
	box-shadow: 0 0 6px #f5f5f1;
}

[data-theme="dark"] #tabs .tab:not(.selected):hover.tab:not(.disabled):hover .g2 {
	fill: var(--color-tab-hover-text);
}

[data-theme="dark"] #tabs .selected .g2 {
	fill: var(--color-tab-selected-text);
}

[data-theme="dark"] #sticky-visuals .visuals-buttons {
	top: 13px;
}

[data-theme="dark"] #sticky-visuals .visuals-buttons > button,
[data-theme="dark"] #visuals-stats button.stats-solo {
	height: 25px;
	border: none;
}

[data-theme="dark"] .ct-label { color: #909090; fill: #909090; }
[data-theme="dark"] .ct-grid  { stroke: #505050; }

[data-theme="dark"] blockquote:before {
	background: url(../images/blockquote.png) no-repeat;
	opacity: 0.11;
}

/* ---- Overriding Olivi CSS ------------------------------------------------- */

body,
button,
input,
select,
textarea {
	color: var(--color-text-body);
}

/* Added July 2025 to ensure white background color (Firefox issue) */
select {
	background: #fff;
	border: 1px solid var(--color-border-box);
}

code {
	background: var(--color-code-bg);
	border-color: var(--color-code-border);
}

a {
	color: var(--color-anchor);
}

a:hover,
a:focus,
a:active {
	color: var(--color-anchor-hover);
}

table,
th,
td {
	border-color: var(--color-table);
}

th {
	background: var(--color-table-th-bg);
}

button,
input[type="submit"],
input[type="button"] {
	color: var(--color-button-text);
	background: var(--color-button);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background: var(--color-button-hover);
}

input[type="text"],
input[type="password"],
input[type="search"] {
	color: var(--color-input-text);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
	color: var(--color-input-text-focus);
}

::selection { background:var(--color-selection-bg); color:var(--color-selection-text); }
::-moz-selection { background:var(--color-selection-bg); color:var(--color-selection-text); }

/* ---- DeepSID -------------------------------------------------------------- */

body, html {
	overflow-y: hidden;
	height: 100%;
	margin: 0;
	background: var(--color-bg);
}

 /* Remove pointer events to simplify event handling in jQuery */
button svg,
button b,
td span.info,
td div,
.no-hover {
	pointer-events: none;
}

/* Add to elements you don't want to get marked when clicking fast */
.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Move sundry checkboxes slightly upwards */
#sundry input[type="checkbox"],
#sundry-tabs input[type="checkbox"] {
	position: relative;
	top: 0;
}

/* Hack for Firefox: Move the checkbox slightly upwards */
@-moz-document url-prefix() {

	#search input[type="checkbox"] {
		position: relative;
		top: -0.5px;
	}

	#sundry input[type="checkbox"],
	#sundry-tabs input[type="checkbox"] {
		position: relative;
		top: -1.5px;
	}

}

/* For the "? ? ?" unknown fields */
small.u1 { margin-right: 2px; }
small.u2 { margin-left: 2px; }

/* This should be a container ONLY around the text (not any images or other extra stuff) or some browsers might get confused */
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* @link http://style64.org/c64-truetype */
@font-face {
	font-family: 'Commodore 64';
	src: url('../fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
		 url('../fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
		 url('../fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Container for entire left side (top, info/memory/stil, controls, browser, search) */
#panel {
	display: flex;
	flex-flow: column;
	height: 100%;
	width: 430px;
	margin: 0 10px;
}

#credits {
	position: relative;
}

	#credits .c-left {
		display: inline-block;
		width: 170px;
		font-weight: bold;
		color: var(--color-button-hover);
	}

	#credits span {
		position: absolute;
		right: 0;
		font-size: 12px;
		line-height: 19px;
	}

#sites {
	position: absolute;
	top: 12px;
	right: 0;
	width: 100%;
	font: normal 10px/0 "Montserrat", sans-serif;
	text-transform: uppercase;
	color: var(--color-button-disabled);
	z-index: 100;
	text-align: right;
}

	#sites span {
		margin: 0 4px;
	}

	#sites a {
		text-decoration: none;
		color: var(--color-text-subtle);
	}

	#sites a:hover {
		color: var(--color-link-hover);
	}

	#click-to-play-cover {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle, var(--color-ctp-circle), 40%, transparent 100%);
		z-index: 9999;
		cursor: pointer;
		text-align: center;
	}

		/* Box in center with image and text */
		#click-to-play-cover .center {
			display: inline-block;
			position: relative;
			top: 50%; /* These three lines centers the DIV in the cover */
			transform: translateY(-50%);
			z-index: 9999;
		}

		/* The example play image */
		#click-to-play-cover .play {
			width: 154px;
			height: 154px;
			margin-bottom: 6px;
			background: url(../images/center_play.png) 0 0 / 200% 100% no-repeat;
			box-shadow: 0 0 12px #000;
			border: 2px solid #e7e8e0;
		}

			#click-to-play-cover .play:hover {
				background: url(../images/center_play.png) -150px 0 / 200% 100% no-repeat;
			}

		#click-to-play-cover .text-below {
			font: normal 21px "Montserrat", sans-serif;
			color: #e7e8e0;

		}

/* ---- Top (Login / Register) ----------------------------------------------- */

#top, #tabs {
	flex: 0 0 45px;
	/*overflow: hidden;*/
	position: relative;
	margin: 6px 0;
}

#logo {
	position: absolute;
	top: -25px;
	left: -7px;
	color:  var(--color-logo);
	font: bold 43px "Kanit", sans-serif;
}

#theme-selector {
	position: absolute;
	bottom: 6px;
	left: 143px;
	width: 14px;
	height: 14px;
	background: var(--color-button-inverted);
	border: 2px solid var(--color-theme-selector-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all .12s linear;
	box-shadow: var(--shadow-theme-selector);
	z-index: 2;
}

	#theme-selector div {
		float: right;
		height: 100%;
		width: 50%;
		background: var(--color-theme-selector-bg);
	}

	#theme-selector:hover {
		background: var(--color-theme-bg-hovtop);
		border-color: var(--color-theme-bg-hovbot);
	}

		#theme-selector:hover > div {
			background: var(--color-theme-bg-hovbot);
		}

	#theme-selector:active {
		box-shadow: none;
	}

#logged-in {
	position: absolute;
	bottom: 3px;
	right: 0;
}

	#logged-username {
		font: normal 15px "Montserrat", sans-serif;
		color: var(--color-text-fine);
	}

	/* Additional styling for the emulator drop-down box in top */
	#top .emulator {
		position: absolute;
		left: 0;
		bottom: 3px;
		width: 116px;
		z-index: 5;
		font-family: "Asap Condensed", sans-serif;
	}

	/* Additional styling for the emulator drop-down box in the settings */
	#topic-settings .emulator {
		position: relative;
		top: 3px;
		width: 136px;
		margin-left: 5px;
	}

	/* Additional styling for the MIDI selector drop-down box for ASID */
	/*#asid-midi .midi-outputs {
		margin-bottom: 10px;
		margin-right: 50px;
		width: 207px;
		float: right;
	}*/

		/* Version for unstyled drop-down box */
		#asid-midi-outputs {
			margin-bottom: 10px;
			margin-right: 50px;
			width: 207px;
			float: right;
		}

		#asid-midi label {
			font: normal 13px/0 "Montserrat", sans-serif;
			position: relative;
			left: 50px;
			/*top: -2px;*/
		}

#userform {
	display: inline-block;
}

#userform fieldset {
	position: absolute;
	bottom: 3px;
	right: 0;
	width: 310px;
	padding: 0;
	margin: 0;
	text-align: right;
	border: none;
}

#userform label,
#top label {
	font: normal 13px/0 "Montserrat", sans-serif;
}

#userform input[type="text"],
#userform input[type="password"],
#topic-settings input[type="text"],
#topic-settings input[type="password"] {
	font-size: 14px;
	padding: 4px;
	height: 20px;
	width: 82px;
	border: 1px solid var(--color-border-box);
	border-radius: 1px;
}

	#topic-settings input[type="text"],
	#topic-settings input[type="password"] {
		height: 21px;
		width: 130px;
		border-color: var(--color-text-dim);
	}

#userform button,
#logout {
	position: relative;
	top: 2.5px;
	height: 20px;
	line-height: 0;
	padding: 0 4px;
}

#logout svg,
#userform button svg {
	fill: var(--color-button-logout);
}

#response {
	font-size: 12px;
	color: var(--color-text-player);
}

	#userform .good	{ color: var(--color-text-resp-good); }
	#userform .bad	{ color: var(--color-text-resp-bad); }

/* ---- Controls Panel (Buttons) -------------------------------------------- */

#interactive {
	flex: 0 0 50px;
	margin-top: 9px;
}

#controls {
	height: 44px;
	margin-left: 10px; /* To line up with the folder controls further down */
}

	#controls button,
	#songs button,
	.edit button,
	#sundry button,
	#sticky-visuals button,
	#topic-remix .action button,
	.dialog-transfer button,
	.dialog-new button,
	#sticky-right-buttons button,
	.block-info button {
		transition: all .05s linear;
		box-shadow: 2px 2px 4px var(--color-button-shadow);
	}

		[data-theme="dark"] {
			button {
				transition: all .03s linear;
			}
		}

	#controls button:active,
	#songs button:active,
	.edit button:active,
	#sundry button:active,
	#faster.button-selected,
	#topic-remix .action button:active,
	.dialog-transfer button:active,
	.dialog-new button:active,
	#sticky-right-buttons button:active,
	.block-info button:active {
		box-shadow: var(--shadow-button-selected);
	}

		[data-theme="dark"] {
			button:active {
				transform: scale(0.935);
				transform-origin: center center;
			}

			button:disabled {
				transform: none;
			}
		}

	#controls button.disabled,
	#songs button.disabled,
	#userform button.disabled,
	.edit button.disabled,
	.dialog-new button.disabled,
	#sticky-right-buttons button.disabled,
	.block-info button.disabled,
	.dialog-box button.disabled,
	#filter-revisions button.disabled,
	#filter-6581 button.disabled,
	#sticky-visuals button.disabled,
	#csdb-sort button.disabled {
		cursor: default;
		background: var(--color-button-disabled);
		border-color: var(--color-button-disabled);
		box-shadow: 0 0 0 transparent;
		color: var(--color-button-disabled-text);
		fill: var(--color-button-disabled-text);
	}

		#sticky-visuals button.disabled:before {
			filter: var(--svg-filter-icon-disabled);
		}	

	#controls .divider,
	.edit .divider {
		display: inline-block;
		width: 7px;			/* 10px */
		height: 100%;
		margin-left: 4px;	/* 7px */
		border-left: 3px solid var(--color-button-disabled);
	}

.button-big, .button-lady, .button-tiny {
	width: 50px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
	fill: currentColor;
	vertical-align: top;
}

	#topic-remix .button-big {
		height: 44px !important;
		margin-bottom: 5px;
	}

.button-lady {
	width: 100%;
	height: 30px;
}

.button-tiny {
	width: 100%;
	height: 13px;
}

	.button-tiny svg {
		position: relative;
		top: -5px;
	}

.button-idle,
.button-off {
	color: var(--color-button-inverted);
	border: 2px solid var(--color-button-border-idle);
}

	.button-idle:hover,
	.button-off:hover {
		color: var(--color-button-text);
	}

.button-selected,
.button-on {
	border: 2px solid var(--border-button-select);
	padding: 0;
	color: var(--color-button-text-select);
	background: var(--color-button-bg-select);
	box-shadow: var(--shadow-button-select);
}

.button-on {
	box-shadow: none !important;
}

	.button-selected:hover,
	.button-on:hover {
		border-color: var(--color-button-border-hovsel);
		color: var(--color-button-text-hovsel);
		background: var(--color-button-bg-hovsel);
	}

.button-area {
	display: inline-block;
	position: relative;
	height: 100%;
	width: 42px;
	vertical-align: top;
}

	.button-area div.disabled {
		color: var(--color-button-disabled);
	}

/* Used in e.g. the piano view */
.edit {
	border: 1px solid var(--color-border);
	width: calc(100% - 5px); /* To match the width of the keyboards */
	padding: 8px;
	margin: 0 0 10px 2px;
	background: var(--color-bg-edit-area);
	border-radius: 3px;
}

	#tabs .g2 {
		fill: var(--color-settings-cog-icon);
	}

	#topic-settings .edit {
		padding: 20px 16px;
	}

		#topic-settings h3 {
			margin-top: 0;
		}

		#topic-settings h4 {
			font-size: 18.5px;
		}

		#topic-settings label b,
		#dialog-upload-wiz3 label b,
		#dialog-upload-wiz5 label b {
			color: var(--color-settings-bold);
		}

		#topic-settings .edit p {
			font-size: 14px;
			margin-bottom: 16px !important;
		}
	
	.waveform-colors {
		display: none;
		position: absolute;
		top: 16px;
		left: 704px; /* Don't use 'right' here or it might be pushed by the scrollbar */
	}

	/* Width of emulator button in visuals tab */
	.viz-emu {
		width: 55px !important;
		font-family: "Asap Condensed", sans-serif;
		font-size: 12px !important;
	}

	.viz-warning {
		display: none;
		position: relative;
		top: 1px;
		margin-left: 8px;
		font-size: 14px;
		font-family: "Asap Condensed", sans-serif;
	}

		.viz-warning img {
			filter: var(--svg-filter-viz-msg-buffer);
		}

		.viz-msg-emu {
			color: var(--color-viz-msg-emu);
		}

		.viz-msg-buffer	{
			color: var(--color-viz-msg-buffer);
			top: 0;
			left: 18px;
		}

		.viz-msg-enable {
			color: var(--color-viz-msg-enable);
		}

	.viz-buffer {
		float: right;
	}

		.viz-buffer label {
			margin-right: 4px !important;
		}

		.dropdown-buffer,
		.dropdown-unstyled {
			position: relative;
			top: 1px;
			font-size: 13px;
		}

	#piano-combine-area span {
		display: none;
		position: relative;
		top: 2px;
		font-weight: bold;
	}

		#piano-combine-area span.color-2sid { color: var(--color-viz-msg-buffer); }
		#piano-combine-area span.color-3sid { color: var(--color-text-resp-bad); }

	.piano-top-panel {
		position: relative;
		top: 2px;
		left: 2px;
		height: 50px;
		width: 834px;
		/*font: normal 13px/0 "Montserrat", sans-serif;*/
		color: var(--color-piano-inverted);
		background: var(--color-piano-bg);
		background: linear-gradient(to bottom, var(--color-piano-bg-lg1) 0%,var(--color-piano-bg-lg2) 100%);
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		/* border-bottom is set in main.js */
	}

		.pv-wrap {
			position: absolute;
			top: 11px;
			left: 12px;
			padding: 1px;
			background: linear-gradient(to bottom, var(--color-piano-pv-wrap1) 0%,var(--color-piano-pv-wrap2) 100%);
			border-radius: 4px;
		}

		/* Button 1, 2 or 3 on keyboard that toggles ON or OFF */
		.piano-voice {
			padding: 0;
			height: 25px !important;
			width: 30px;
			border-radius: 4px;
			vertical-align: top;
			font-size: 15px !important;
			font-weight: bold;
		}

			.voice-on {
				color: var(--color-piano-vc-on);
				background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2));
				background-repeat: no-repeat;				
				border: 2px solid var(--color-piano-vc-on-border);
				box-shadow: 0 0 2px var(--color-piano-vc-on-shadow);
			}

				.pv-c2sid .voice-on {
					background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2-2sid));
				}

				.pv-c3sid .voice-on {
					background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2-3sid));
				}

				.voice-on:hover {
					background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-hover2));
				}

				.pv-c2sid:hover .voice-on {
					background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-h2-2sid));
				}

				.pv-c3sid:hover .voice-on {
					background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-h2-3sid));
				}

				.voice-off {
				color: var(--color-piano-inverted);
				background: linear-gradient(to bottom, var(--color-piano-bg-lg1) 0%,var(--color-piano-bg-lg2) 100%);
			}

				.voice-off:hover {
					background: linear-gradient(to bottom, var(--color-piano-vc-off-lg1) 0%,var(--color-piano-vc-off-lg2) 100%);
				}

		/* The flat triangle above the pulse width bars */
		.flat-triangle {
			position: absolute;
			top: 20px;
			left: 81px;
			width: 0; 
			height: 0; 
			border-left: 100px solid transparent;	/* Each must be half width of pulse width bar  + 2px */
			border-right: 100px solid transparent;
			border-bottom: 7px solid var(--color-piano-tr-border);
		}

		.edges {
			position: absolute;
			top: 20px;
			width: 200px;							/* Width of pulse width bar */
			height: 7px;
			border-left: 1px solid var(--color-piano-inverted);
			border-right: 1px solid var(--color-piano-inverted);
		}

			.edges-pulse	{ left: 82px; }
			.edges-fc		{ right: 115px; }

		.edges-res {
			position: absolute;
			top: 10px;
			right: 78px;
			width: 3px;
			height: 30px;							/* Height of vertical resonance bar */
			border-top: 1px solid var(--color-piano-inverted);
			border-bottom: 1px solid var(--color-piano-inverted);
		}
		
		.bar-num {
			position: absolute;
			top: 12px;								/* Left is set in 'piano.php' */
			font: normal 10px/0 "Montserrat", sans-serif;
			line-height: 0;
		}

			.num-res {
				right: 83px;
				font-size: 9px;
			}

		/* RM / HS triangle arrows */
		.pm-carpet-left {
			position: absolute;
			top: 7px;
			height: 17px;
			width: 6px;
			transform: rotate(45deg);
			border-radius: 3px;
			background: linear-gradient(to bottom, var(--color-piano-pmc-lg1) 0%,var(--color-piano-pmc-lg2) 50%);
		}

			.pcl-ringmod	{ left: 376px; }
			.pcl-hardsync	{ left: 412px; }

		.pm-carpet-right {
			position: absolute;
			top: 7px;
			left: 338px;
			height: 17px;
			width: 6px;
			transform: rotate(-45deg);
			border-radius: 3px;
			background: linear-gradient(to bottom, var(--color-piano-pmc-lg1) 0%,var(--color-piano-pmc-lg2) 50%);
		}

			.pcr-ringmod  { left: 384px; }
			.pcr-hardsync { left: 420px; }

			.piano-ringmod-left,
			.piano-hardsync-left {
				position: absolute;
				top: 8.5px;
				height: 14px;
				width: 3px;
				transform: rotate(45deg);
			}

				.piano-ringmod-left   { left: 377.5px; }
				.piano-hardsync-left  { left: 413.5px; }

			.piano-ringmod-right,
			.piano-hardsync-right {
				position: absolute;
				top: 8.5px;
				height: 14px;
				width: 3px;
				transform: rotate(-45deg);
			}

				.piano-ringmod-right  { left: 385.5px; }
				.piano-hardsync-right { left: 421.5px; }

				.pr-on {
					background: linear-gradient(to bottom, var(--color-piano-pr-on-lg1) 0%,var(--color-piano-pr-on-lg2) 100%);
					box-shadow: 0 2px 11px var(--color-piano-pr-shadow);
				}
			
				.ph-on {
					background: linear-gradient(to bottom, var(--color-piano-ph-on-lg1) 0%,var(--color-piano-ph-on-lg2) 100%);
					box-shadow: 0 2px 11px var(--color-piano-ph-shadow);
				}
			
				.pr-off, .ph-off {
					background: var(--color-piano-pm-off);
				}

			.label-mod {
				top: 29px;
				font-size: 9px;
			}

		.piano-top-panel .bar {
			margin-top: 30px;
			margin-left: 80px;
			padding: 2px;
			border-radius: 4px;
			background: var(--color-piano-bar);
			background: linear-gradient(to bottom, var(--color-piano-bar-lg1) 0%,var(--color-piano-bar-lg2) 100%);
		}

		/* Area for showing SID chip address (2SID and 3SID modes only) */
		.piano-top-panel .chip-address {
			display: none;
			position: absolute;
			top: 17px;
			left: 309px;
			font: normal 10px/0 "Montserrat", sans-serif;
		}

			.piano-top-panel .chip-address span {
				position: relative;
				top: 7px;
				font: bold 14px "Courier New", serif;
				color: #ff0;
			}

		/* The brown filter cutoff bar */
		#piano-fc0, #piano-fc1, #piano-fc2 {
			float: right;
			margin-right: 112px;
		}

		/* The vertical resonance bar */
		#piano-res0, #piano-res1, #piano-res2 {
			position: absolute;
			top: 8px;
			right: 69px;
			margin: 0;
			border-radius: 1px;
		}

		.pb-wrap {
			position: absolute;
			right: 10px;
			padding: 2px;
		}

			.pb-lp {
				top: 8px;
				background: linear-gradient(to bottom, var(--color-piano-pb-lp-lg1) 0%,var(--color-piano-pb-lp-lg2) 100%);
			}
			.pb-bp {
				top: 20px;
				background: linear-gradient(to bottom, var(--color-piano-pb-bp-lg1) 0%,var(--color-piano-pb-bp-lg2) 100%);
			}
			.pb-hp {
				top: 32px;
				background: linear-gradient(to bottom, var(--color-piano-pb-hp-lg1) 0%,var(--color-piano-pb-hp-lg2) 100%);
			}

			.pb-wrap span {
				position: absolute;
				top: 5px;
				left: -29px;
				font: normal 9px/0 "Montserrat", sans-serif;
			}

			/* The small filter passband LED indicators */
			.piano-pb-led {
				width: 17px;
				height: 6px;
			}

				.pb-on {
					background: var(--color-piano-pb-on);
					background: linear-gradient(to bottom, var(--color-piano-pb-on-lg1) 0%,var(--color-piano-pb-on-lg2) 100%);
					border: 0.3px solid var(--color-piano-pb-on-border);
					box-shadow: 0 0 11px var(--color-piano-pb-on-shadow);
				}

				.pb-off {
					background: var(--color-piano-pb-off);
					background: linear-gradient(to bottom, var(--color-piano-pb-off-lg1) 0%,var(--color-piano-pb-off-lg2) 100%);
					border: 0.3px solid var(--color-piano-pb-off-border);
				}

	.button-edit,
	#sundry button {
		height: 25px !important;
		padding: 0;
		border-radius: 10px;
		vertical-align: top;
	}

		/* Used for "require" messages */
		#sundry button {
			position: relative;
			top: -4px;
			font-size: 11px;
			padding-left: 10px;
			padding-right: 10px;
			margin: 0 2px;
		}

	#slider-button {
		display: inline-block;
		position: absolute;
		top: -35px;
		right: 10px;
		padding: 4px 0 8px 8px;
		background: var(--color-bg-box);
		z-index: 2;
	}

		#slider-button button.rect {
			height: auto !important;
			padding-left: 6px;
			padding-right: 6px;
			border-radius: 0;
			font-size: 9px;
			line-height: 18px;
		}

	/* Radio-button style buttons where the text needs to stay the same and only one button may be active */
	.button-radio {
		width: 70px;
		margin-right: 2px;
	}

	/* Radio-button style buttons with an icon instead of text */
	.button-icon {
		width: 32px;
		margin-right: 0;
	}

		.button-left {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		.button-right {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

			.button-icon img {
				position: relative;
				top: 1.75px;
				left: 1px;
				height: 12px;
				pointer-events: none;
			}

			.button-right img {
				left: -1px;
			}

				.button-icon.button-off	img	{ filter: var(--svg-filter-white); }
				.button-icon.button-on img	{ filter: var(--svg-filter-icon-visuals); }

	/* Checkbox style toggle buttons that also toggles the text between ON and OFF */
	.button-toggle {
		width: 42px;
	}

	.edit label,
	#sticky-right-buttons label {
		font: normal 13px/0 "Montserrat", sans-serif;
		color: var(--color-text-fine);
		margin: 0 16px 0 1px;
	}

		#topic-settings .edit label {
			margin-left: 10px;
		}

	/* Space between settings */
	#topic-settings .space {
		height: 16px;
	}

		#topic-settings .splitline {
			border-bottom: 1px solid var(--color-button-disabled);
			margin-bottom: 16px;
		}

.button-tag {
	position: relative;
	top: 4px;
	width: 100%;
	text-align: center;
}

.button-tag, .tag {
	font: normal 13px/0 "Montserrat", sans-serif;
	color: var(--color-text-fine);
}

.tag {
	position: relative;
	top: -2px;
}

.button-counter {
	width: 100%;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}

#graph {
	overflow: hidden;
	position: relative;
	margin: 0 2px;
}

	/* A down-scrolling canvas area in the 'Graph' view */
	.graph-area {
		position: absolute;
		border: 0.5px solid var(--color-graph-border);
		background: var(--color-graph-bg);
	}

	/* Round voice numbers in bottom left corner of canvas areas */
	.graph-area div {
		position: absolute;
		bottom: 6px;
		left: 6px;
		width: 20px;
		height: 20px;
		font: bold 12px/19px "Montserrat", sans-serif;
		color: var(--color-graph-channel-text);
		background: var(--color-graph-channel-bg);
		border: 0.5px solid var(--color-graph-border);
		border-radius: 20px;
		text-align: center;
	}

.thinner {
	width: 32px;
}

	#faster, #skip-prev, #skip-next, #loop {
		position: absolute;
		bottom: 0;
	}

	#subtune-value {
		position: absolute;
		top: 13px;
	}

	#subtune-plus,
	#subtune-minus {
		outline: none;
	}

	#subtune-minus {
		position: absolute;
		left: 0;
		bottom: 0;
	}

/* Volume slider - @link https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
   NOTE: These can't be comma-huddled! */

input[type=range] {
	-webkit-appearance: none;
	height: 100%;
	background: transparent;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-thumb {	/* WebKit / Blink */
	-webkit-appearance: none;
	border: 2px solid var(--color-button-border);
	height: 16px;
	width: 6px;
	background: var(--color-button);
	cursor: pointer;
	box-shadow: -1.5px 1.5px 4px var(--color-button-shadow);
	border-radius: 12px;
	box-sizing: content-box;
	margin-top: -9px;
	transition: all .05s linear;
}

	input[type=range]::-webkit-slider-thumb:active {
		background: var(--color-button-text);
		box-shadow: none;
	}

	input[type=range]:disabled::-webkit-slider-thumb {
		background: var(--color-button-disabled);
		border-color: var(--color-button-disabled);
		box-shadow: 0 0 0 transparent;
		cursor: default;
	}

input[type=range]::-moz-range-thumb {		/* Firefox */
	border: 2px solid var(--color-button-border);
	height: 16px;
	width: 6px;
	background: var(--color-button);
	cursor: pointer;
	box-shadow: -1.5px 1.5px 4px var(--color-button-shadow);
	border-radius: 12px;
	box-sizing: content-box;
	transition: all .05s linear;
}

	input[type=range]::-moz-range-thumb:active {
		background: var(--color-button-text);
		box-shadow: none;
	}

	input[type=range]:disabled::-moz-range-thumb {
		background: var(--color-button-disabled);
		border-color: var(--color-button-disabled);
		box-shadow: 0 0 0 transparent;
		cursor: default;
	}

input[type=range]::-ms-thumb {				/* IE / Edge */
	border: 2px solid var(--color-button-border);
	height: 16px;
	width: 6px;
	background: var(--color-button);
	cursor: pointer;
	box-shadow: -1.5px 1.5px 4px var(--color-button-shadow);
	border-radius: 12px;
	box-sizing: content-box;
	margin-top: 0;
	transition: all .05s linear;
}

	input[type=range]::-ms-thumb:active {
		background: var(--color-button-text);
		box-shadow: none;
	}

	input[type=range]:disabled::-ms-thumb {
		background: var(--color-button-disabled);
		border-color: var(--color-button-disabled);
		box-shadow: 0 0 0 transparent;
		cursor: default;
	}
	
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 3px;
	background: var(--color-slider-track);
	border-radius: 1.3px;
	cursor: pointer;
}

	input[type=range]:disabled::-webkit-slider-runnable-track {
		background: var(--color-button-disabled);
		cursor: default;
	}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 3px;
	background: var(--color-slider-track);
	border-radius: 1.3px;
	cursor: pointer;
}

	input[type=range]:disabled::-moz-range-track {
		background: var(--color-button-disabled);
		cursor: default;
	}

input[type=range]::-ms-track {
	width: 100%;
	height: 3px;
	border-color: transparent;
	color: transparent;
	background: var(--color-slider-track);
	border-radius: 1.3px;
	cursor: pointer;
}

	input[type=range]:disabled::-ms-track {
		background: var(--color-button-disabled);
		cursor: default;
	}

#volume {
	position: absolute;
	right: -40px;
	top: -106px;
	width: 45px;
	transform-origin: 75px 75px;
	transform: rotate(-90deg);
}

#osc-zoom {
	width: 45px;
	margin: 0 2px;
}

	#osc-zoom::-webkit-slider-thumb	{ height: 12px; position: relative; top: 2px; }
	#osc-zoom::-moz-range-thumb		{ height: 12px; }
	#osc-zoom::-ms-thumb			{ height: 12px; }

/* ---- The Time/Length Bar ------------------------------------------------- */

#time {
	margin-top: 2px;
	text-align: center;
	font-size: 14px;
	color: var(--color-button);
}

	#time-bar {
		overflow: hidden;
		display: inline-block;
		position: relative;		/* Adding this gets rid of an invisible DIV subtune overlap */
		width: 346px;			/* Width also used in browser.js */
		height: 9px;
		border: 0.5px solid var(--color-timebar-border);
		border-radius: 3px;
		background: var(--color-timebar-bg);
	}

		#time-bar div {
			float: left;
			height: 100%;
			width: 0; /* Changed in jQuery */
			background: var(--color-bottom);
			transition: all 1s linear;
			pointer-events: none;
		}

		#time .resid div		{ background: var(--color-timebar-resid); }
		#time .jsidplay2 div	{ background: var(--color-timebar-jsidplay2); }
		#time .websid div,
		#time .legacy div		{ background: var(--color-timebar-websid); }
		#time .hermit div		{ background: var(--color-timebar-hermit); }
		#time .asid div			{ background: var(--color-timebar-asid); }
		#time .lemon div		{ background: var(--color-timebar-lemon); }
		#time .youtube div		{ background: var(--color-timebar-youtube); }

/* Small dot that indicates this time length has millseconds too */
#time-length div {
	position: absolute;
	top: 9px;
	right: -6px;
	font-size: 12px;
	line-height: 0;
	color: var(--color-text-minor);
}

/* ---- Info Box (Name, Author, Copyright) ---------------------------------- */

#info {
	position: relative;
	flex: 0 0 84px;
	border: 0.5px solid var(--color-border-box);
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	border-bottom-color: var(--color-border-info);
	background: var(--color-bg-box);
	font-size: 14px;
}

	/* A smaller version of the avatar image in the left side of the info box */
	#info-composer {
		display: none;
		float: left;
		width: 58px;
		height: 58px;
		margin: 8px -3px 0 8px;
		border: 1px solid var(--color-border);
		background: var(--color-avatar-bg);
	}

	/* The '#info-text' and '#youtube' boxes are mutually exclusive */
	#info-text {
		display: none;
		overflow: hidden;
		padding: 6px 10px;
		height: 70px;
		hyphens: auto;
	}

	/* The '#info-text' and '#youtube' boxes are mutually exclusive */
	#youtube {
		position: relative;
		display: none;
		height: 248px;
	}

		#youtube-loading {
			display: inline-block;
			position: absolute;
			top: 50%; /* These three lines centers the DIV in the cover */
			transform: translateY(-50%);
			text-align: center;
			font-size: 17px;
			width: 430px;
		}

	/* Black box for the MUS info text */
	.c64blackbg {
		position: relative;
		top: 3px;
		background: var(--color-bottom);
		color: var(--color-bottom);
		border: 1px solid var(--color-bottom);
		border-radius: 4px;
	}

		#info .c64blackbg {
			/*left: -2px;*/
			border-width: 5px;
			width: 330px; /* 320 + (BORDER * 2) */
		}

		#sundry .c64blackbg {
			border-top-width: 5px;
			border-bottom-width: 5px;
		}

		#topic-stil .c64blackbg {
			border-width: 5px;
		}

	/* C64 colors for MUS info text (supplied by Peter Weighill) - don't change these for other color schemes! */
	.c0 { color: #000000; }
	.c1 { color: #ffffff; }
	.c2 { color: #880000; }
	.c3 { color: #aaffee; }
	.c4 { color: #cc44cc; }
	.c5 { color: #00cc55; }
	.c6 { color: #0000aa; }
	.c7 { color: #eeee77; }
	.c8 { color: #dd8855; }
	.c9 { color: #664400; }
	.c10 { color: #ff7777; }
	.c11 { color: #333333; }
	.c12 { color: #777777; }
	.c13 { color: #aaff66; }
	.c14 { color: #0088ff; }
	.c15 { color: #bbbbbb; }
	
	.b0 { background-color: #000000; }
	.b1 { background-color: #ffffff; }
	.b2 { background-color: #880000; }
	.b3 { background-color: #aaffee; }
	.b4 { background-color: #cc44cc; }
	.b5 { background-color: #00cc55; }
	.b6 { background-color: #0000aa; }
	.b7 { background-color: #eeee77; }
	.b8 { background-color: #dd8855; }
	.b9 { background-color: #664400; }
	.b10 { background-color: #ff7777; }
	.b11 { background-color: #333333; }
	.b12 { background-color: #777777; }
	.b13 { background-color: #aaff66; }
	.b14 { background-color: #0088ff; }
	.b15 { background-color: #bbbbbb; }	

	/* A corner box to make sure text never appear below the small flag boxes */
	#corner {
		float: right;
		width: 80px;
		height: 22px;
	}

	#sid-model,
	#clockspeed {
		position: absolute;
		height: 16px;
		padding: 7px 4px 0;
		font-family: "Open Sans", helvetica, sans-serif;
		font-size: 11px;
		line-height: 0;
		border: 1px solid var(--color-dot);
		border-radius: 3px;
		text-align: center;
		vertical-align: top;
		cursor: pointer;
	}

		#sid-model {
			top: 9px;
			right: 9px;
		}

		#clockspeed {
			top: 9px;
			right: 47px;
		}

		#info .MOS6581 {
			background: var(--color-6581-bg);
			color: var(--color-6581-text);
			border-color: var(--color-6581-border);
		}

			#info .MOS6581:hover {
				background: var(--color-6581-bg-hover);
				color: var(--color-6581-text-hover);
				border-color: var(--color-6581-border-hover);
			}

		#info .MOS8580 {
			background: var(--color-8580-bg);
			color: var(--color-8580-text);
		}

			#info .MOS8580:hover {
				color: var(--color-8580-text-hover);
				background: var(--color-8580-bg-hover);
			}

		#info .PAL {
			background: var(--color-pal);
			color: var(--color-button-inverted);
			border-color: var(--color-pal);
		}

			#info .PAL:hover {
				background: var(--color-pal-hover);
				color: var(--color-top);
				border-color: var(--color-pal-hover);
			}

		#info .NTSC {
			background: var(--color-ntsc);
			color: var(--color-button-inverted);
			border-color: var(--color-ntsc);
		}

			#info .NTSC:hover {
				background: var(--color-ntsc-hover);
				color: var(--color-top);
				border-color: var(--color-ntsc-hover);
			}

	#hvsc-version,
	#pace {
		position: absolute;
		right: 0;
		bottom: 2px;
		font-family: "Open Sans", helvetica, sans-serif;
		font-size: 11px;
	}

	#hvsc-version	{ color: var(--color-text-faint); }
	#pace			{ right: 9px; bottom: 36px; }

	/* Encapsulates tags - they are allowed to line up through the next <TD> cell and to the edge of #songs */
	.tags-line {
		position: relative;
		display: table-cell;
		overflow: visible;
		max-height: 15px;
		max-width: 100px;
		z-index: 3;
	}

	/* For the bracket-style line below tags that connects two of the tags */
	.tags-bracket {
		position: absolute;
		height: 5px; /* Enough to allow vertical side lines */
		border-bottom: 1.5px solid var(--color-tags-bracket);
		border-left: 1.75px solid var(--color-tags-bracket-up);
		border-right: 1.75px solid var(--color-tags-bracket-up);
		border-radius: 1px;
		bottom: -5px;
		display: none; /* Hidden until JS sets position */
		/*z-index: 1;*/
	}

		.disabled .tags-bracket {
			border-color: var(--color-disabled);
		}

	.tag {
		pointer-events: auto;
	}

		/* Where the digi sample rate is displayed */
		#pace div,
		.ptype,
		.tag,
		.edit-tags {
			display: inline-block;
			width: 40px;
			padding: 0 3px;
			border: 0.5px solid var(--color-border-box);
			border-radius: 2px;
			color: var(--color-text-ptype);
			background: var(--color-top);
			text-align: right;
			line-height: 13.5px;
		}

		/* RSID and "Jazz" tags */
		.ptype,
		.tag,
		.edit-tags {
			width: auto;
			padding: 0.68em 2px;
			font-size: 9px;
			height: 13px;
			line-height: 0;
			margin-left: 5px;
			background: var(--color-bg-ptype);
		}

			#stopic-tags .tag {
				margin-left: 0;
				margin-right: 5px;
				cursor: pointer;
			}

			#stopic-tags .tag-transparent {
				margin-left: -5px;
			}

		.disabled .ptype {
			color: var(--color-disabled);
			border-color: var(--color-disabled);
			background: transparent;
		}

		/* Tags like "Jazz" in browser list */
		.tag,
		.edit-tags {
			position: relative;
			top: -0.5px;
			padding: 0 3px 0 0;
			border-radius: 1.75px;
			color: var(--color-text-tag);
			border: none;
			background: var(--color-bg-tag);
			line-height: 1.35em;
		}

			.tag-event {
				color: var(--color-text-tag-event);
				background: var(--color-bg-tag-event);
			}

				.tag-notes img {
					position: absolute;
					top: 2px;
					width: 9px;
					height: 9px;
					filter: var(--svg-filter-edit-tags);
					pointer-events: none;
				}

				.tag-notes span {
					padding-left: 12px;
					pointer-events: none;
				}

				/* Turn the "Winner" tag into gold */
				.tag-winner {
					position: relative;
					background: linear-gradient(180deg, #ffd700, #e6c200 40%, #bfa000 100%);
					color: #544200;
					font-weight: bold;
					text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6),
								0 -1px 1px rgba(0, 0, 0, 0.2);
				}

					.tag-winner:before {
						border-color: transparent #d8b800 transparent transparent !important;
					}

			.tag-production {
				color: var(--color-text-tag-prod);
				background: var(--color-bg-tag-prod);
			}

			.tag-origin,
			.tag-suborigin {
				color: var(--color-text-tag-origin);
				background: var(--color-bg-tag-origin);
			}

			.tag-mixorigin {
				color: var(--color-text-tag-mixorigin);
				background: var(--color-bg-tag-mixorigin);
			}

			.tag-digi,
			.tag-subdigi {
				color: var(--color-text-tag-digi);
				background: var(--color-bg-tag-digi);
			}

			.tag-warning {
				color: var(--color-text-tag-warning);
				background: var(--color-bg-tag-warning);
			}

			.tag-remix64 {
				width: 69px;
				background: url(../images/remix64.png) 11px 2.5px / 54px 7.5px no-repeat, var(--color-bg-tag-remix64);
			}

			.tag-gamebase64 {
				width: 81px;
				background: url(../images/gamebase64.png) 11px 3px / 66px 7.5px no-repeat, var(--color-bg-tag-gamebase64);
			}

			.tag-transparent {
				position: relative;
				top: 1px;
				left: 3px;
				padding: 0 1px 0 1.5px;
				margin: 0;
				color: var(--color-text-distinct);
				background: transparent;
				font-size: 12px;
				z-index: 1;
			}

		.edit-tags {
			display: none;
			padding: 0;
			pointer-events: auto;
		}

			.edit-tags:before {
				content: "";
				float: left;
				width: 11.5px;
				height: 10px;
				background: url(../images/composer_plus.svg) 2px 1px / 10px 11px no-repeat;
				filter: var(--svg-filter-edit-tags);
			}

			.edit-tags:hover {
				background: var(--color-bg-tag-hover);
			}

			/* The pointy triangle part of the tag */
			.tag:before {
				content: "";
				float: left;
				position: relative;
				left: -5px;
				padding: 0;
				margin-right: -3px;
				width: 0;
				height: 100%;
				border: 6px solid transparent;
				border-color: transparent var(--color-bg-tag) transparent transparent;
				background: var(--color-bg-box);
			}

				.tag-event:before {
					border-color: transparent var(--color-bg-tag-event) transparent transparent;
				}

				.tag-production:before {
					border-color: transparent var(--color-bg-tag-prod) transparent transparent;
				}

				.tag-origin:before,
				.tag-suborigin:before,
				.tag-mixorigin:before {
					border-color: transparent var(--color-bg-tag-origin) transparent transparent;
				}

				.tag-digi:before,
				.tag-subdigi:before {
					border-color: transparent var(--color-bg-tag-digi) transparent transparent;
				}

				.tag-warning:before {
					border-color: transparent var(--color-bg-tag-warning) transparent transparent;
				}

				.tag-remix64:before {
					border-color: transparent var(--color-bg-tag-r64start) transparent transparent;
				}

				.tag-gamebase64:before {
					border-color: transparent var(--color-bg-tag-gb64start) transparent transparent;
				}

				.tag-transparent:before {
					border: 0;
				}

				#songs tr.selected .tag:before,
				#songs tr.selected:hover .tag:before {
					background: var(--color-bg-sid-selected);
				}

				#songs tr:hover .tag:before {
					background: var(--color-bg-sid-hover);
				}

				.disabled .tag,
				.disabled .tag-winner {
					color: var(--color-text-tag);
					background: var(--color-disabled) !important;
					text-shadow: none;
					font-weight: normal;
				}

					.disabled .tag-notes img {
						filter: var(--svg-filter-tn-disabled);
					}

				.disabled .tag:before,
				.disabled .tag-winner:before {
					border-color: transparent var(--color-disabled) transparent transparent !important;
				}

				.disabled:hover .tag:before,
				.disabled:hover .tag-winner:before {
					background: var(--color-bg-box) !important;
				}
			
			/* The small "hole" in the triangle part of the tag */
			.tag:after {
				content: ".";
				float: left;
				position: relative;
				top: 2px;
				margin-left: -10px;
				padding: 0;
				width: 8px;
				height: 100%;
				font-size: 15px;
				color: var(--color-text-tag);
				line-height: 0;
			}

				.tag-event:after {
					color: var(--color-text-tag-event);
				}

				.tag-production:after {
					color: var(--color-text-tag-prod);
				}

				.tag-origin:after,
				.tag-suborigin:after {
					color: var(--color-text-tag-origin);
				}

				.tag-mixorigin:after {
					color: var(--color-text-tag-mixorigin);
				}

				.tag-transparent:after {
					color: transparent;
				}

	/* Light blue bar indicating all of 64 KB RAM */
	#memory-bar {
		overflow: hidden;
		display: inline-block;
		position: absolute;
		bottom: 0;
		width: 100%; /* Width also used in main.js */
		height: 8px;
		border-top: 1px solid var(--color-memory-border-top);
		border-left: 1px solid var(--color-memory-border-lr);
		border-right: 1px solid var(--color-memory-border-lr);
		background: var(--color-memory-bg);
		box-shadow: var(--shadow-memory);
	}

		#memory-lid {
			position: relative;
			top: 0;
			left: 0;
			height: 2px;
			width: 100%;
			background-image: linear-gradient(90deg, var(--color-memory-lid-side), var(--color-memory-lid-middle), var(--color-memory-lid-side));
			z-index: 4;
		}

		#memory-screen,
		#memory-basic,
		#memory-kernel {
			position: absolute;
			top: 0;
			left: 268.75px;
			height: 100%;
			width: 53.75px;
			background: #005;
			border-left: 1px solid #bbd;
			border-right: 1px solid #bbd;
			opacity: 0.25;
			z-index: 3;
			pointer-events: none;
			font: normal 7px arial, sans-serif;
			letter-spacing: 2px;
			color: #fff;
			text-align: center;
		}

		#memory-screen {
			left: 6.71px;
			width: 6.71px;
		}

		#memory-kernel {
			left: 376.25px;
		}

		/* Dark blue indicating the tune in memory */
		#memory-chunk {
			position: relative;
			top: -2px;
			left: 0; /* Changed in jQuery */
			height: 100%;
			width: 0; /* Changed in jQuery */
			background: var(--color-memory-chunk);
			box-shadow: var(--shadow-memory-chunk);
			z-index: 2;
			cursor: pointer;
		}

/* ---- Sundry Box ---------------------------------------------------------- */

/* See also #tabs below for styling shared for the actual tabs */
#sundry-tabs {
	flex: 0 0 13px;
	position: relative;
	margin: 2px 0 6px;
}

#sundry-ctrls {
	position: absolute;
	top: 6px;
	right: 0;
	height: 21px;
	width: 185px;			/* This leaves room for a maximum of four sundry tabs */ /* 177 px is too small for iOS */
	text-align: right;
}

	#sundry-ctrls label {
		position: relative;
		top: -6px;
		font: normal 13px/0 "Montserrat", sans-serif;
		color: var(--color-text-fine);
	}

#sundry {
	/* KCS overflow: hidden;*/
	overflow: auto;
	flex: 0 0 119px;
	padding: 6px 10px;
	border-top: 1px solid var(--color-border-box);
	border-left: 1px solid var(--color-border-box);
	border-right: 1px solid var(--color-border-box);
	border-bottom: 0.5px solid var(--color-border-box);
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
	font-size: 14px;
	background: var(--color-bg-box);
	z-index: 2;
}

	#sundry-news {
		position: relative;
		display: table;
		height: 100%;
		width: 96%;
		text-align: center;
		margin: 0 auto;
		font-size: 17px;
	}

		#sundry-news span {
			display: table-cell;
			vertical-align: middle;
			font-weight: bold;
		}

		#sundry-news pre {
			overflow: visible;
			font: normal 15px/21px "Montserrat", sans-serif;
  			white-space: pre-wrap;
  			word-wrap: break-word;
  			overflow-wrap: break-word;
			position: relative;
			top: 1px;
			left: -8px;
			width: 104.2%;
			height: 104px;
			color: #fff;
			padding: 0;
			margin: 0;
			background: none;
			border: 0;
			text-align: left;
			cursor: pointer;
		}

	#sundry .stopic {
		overflow: none; /* Scrollbar appears in #sundry instead to make sure it glues to the side of the box */
		height: 100%;
	}

	/*#stopic-stereo .stereo-scope { Used if drop-down box is styled
		position: relative;
	}*/

		#stopic-stereo .stereo-mode {
			width: 133px;
			z-index: 5;
		}

		#dropdown-stereo-mode,
		#stereo-jsidplay2 select {
			font-size: 13px;
		}

		#dropdown-jp2-fake-read {
			width: 104px;
		}

	#svg-headphones {
		position: relative;
		top: 3px;
		fill: var(--color-text-c64font);
	}		
	
	/* Canvas for an oscilloscope voice */
	#sundry .scope {
		position: relative;
		top: -0.3px;
		left: -4.5px;
		width: 417.5px;
		height: 70px;
		border: 0.5px solid var(--color-border-scope);
		background: var(--color-bg-scope);
		border-radius: 1px;
		cursor: pointer;
	}

		#stopic-stereo .scope {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 64px;
			padding: 0 22px;
			border: none;
			background: transparent;
			cursor: default;
			opacity: 0.5;
			z-index: -1;
		}

			#stopic-stereo tr:first-child .scope {
				top: -5px;
			}

		#sundry .sundry-control {
			position: relative;
			width: 100%;
			height: 38px;
		}

		#sundry label,
		#stopic-stereo .stereo-letter {
			position: relative;
			top: -2px;
			font: normal 13px/0 "Montserrat", sans-serif;
			color: var(--color-text-fine);
		}

			#sundry label.disabled,
			#stopic-stereo td.stereo-header > .disabled,
			#topic-visuals label.disabled,
			#page .dropdown-buffer-label.disabled,
			#csdb-emp-filter-label.disabled {
				color: var(--color-text-label-disabled);
			}

		#sundry input[type="text"] {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 14px;
			padding: 4px;
			height: 21px;
			width: 90px;
			border: 1px solid var(--color-border-box);
			border-radius: 1px;
		}

			#sundry input[type="text"].disabled {
				color: var(--color-text-label-disabled);
			}
	
			#stopic-filter input[type="text"] {
				text-align: right;
			}

		#sundry input[type="range"] {
			position: relative;
			top: -4px;
			width: 100%;
			height: 20px;
		}

		#stopic-filter {
			position: relative;
		}

			#filter-revisions {
				position: absolute;
				top: 165px;
				right: 0;
			}
		
		#filter-6581 {
			position: relative;
			top: -2px;
			right: 1px;
			font-size:11px;
		}

			#sundry-ctrls .disable-6581 {
				color: var(--color-text-sundry-disabled);
			}
		
			#filter-6581 button,
			#filter-6581 button:disabled {
				height: 17px;
				width: 33px;
				padding: 0 5px;
				font-size: 10px;
				border: none;
				line-height: 0.3em;
				margin: 0 1px;
			}

		#stopic-stereo table {
			margin-bottom: 0;
			border: none;
		}

			#stopic-stereo th {
				text-align: center;
				padding-top: 0;
			}

			#stopic-stereo td {
				position: relative;
				width: 12%;
				height: 10px;
				padding: 5px 0 0;
				border-right: none;
			}

			#stopic-stereo tr:first-child td {
				padding-top: 0;
			}

			#stopic-stereo td.stereo-header {
				vertical-align: middle;
				width: 3%;
			}

				#stopic-stereo td.stereo-header span {
					position:relative;
					top: 3px;
				}

				#stereo-jsidplay2 td.stereo-header {
					width: 1%;
				}

			#stopic-stereo .voice {
				display: inline-block;
				width: 100%;
				text-align: center;
			}

			#stopic-stereo input[type="range"] {
				pointer-events: auto !important;
				position: relative;
				top: -4px;
				width: 68%;
				height: 20px;
			}

				#stereo-jsidplay2 input[type="range"] {
					width: 48%;
				}

			#stereo-jsidplay2 .edit label {
				font-family: "Asap Condensed", sans-serif;
				font-size: 13px;
			}

			#stopic-stereo .stereo-cell {
				text-align: center;
			}

			#stopic-stereo .stereo-letter,
			#stopic-stereo .stereo-letter-indent {
				top: -10px;
				font-weight: bold;
			}

				#stereo-jsidplay2 .left {
					margin-left: 8px !important;
				}

				#stereo-jsidplay2 .left-dense {
					margin-left: -2px !important;
				}

			#stopic-stereo .stereo-letter-dense {
				top: -10px;
				font-family: "Asap Condensed", sans-serif;
			}

				#stopic-stereo .left {
					margin-left: 8px;
					margin-right: 4px;
				}

				#stopic-stereo .right {
					margin-left: 4px;
				}

	/* NOTE: This is also used for centered lines such as "No STIL information" or "No lyrics" etc. */
	#tips,			/* Deprecated ID from back when the STIL box was used for tips */
	.sundryMsg {
		position: relative;
		top: 50%; /* These three lines centers the DIV in the sundry box */
		transform: translateY(-50%);
		font-size: 12px;
		text-align: center;
	}

		#tips p,
		.sundryMsg p {
			margin: 0 0 6px 0;
		}

		#tips code,
		.sundryMsg code {
			font-size: 12px;
		}

		#stopic-stil .no-info,
		#stopic-tags .no-info {
			color: var(--color-text-subtle);
		}

	/* C64 font for INFO and STIL boxes when browsing CGSC */
	.c64font {
		font-family: "Commodore 64", sans-serif;
		font-size: 10px !important;
		line-height: 10px;
		color: var(--color-text-c64font);
	}

	#sundry .subtune,
	#topic-stil .subtune {
		display: inline-block;
		height: 16px;
		padding: 0 4px;
		font-size: 12px;
		line-height: 15px;
		font-weight: bold;
		color: var(--color-button-inverted);
		background: var(--color-button);
		border-radius: 3px;
		text-align: center;
		cursor: pointer;
	}

		#sundry .subtune:hover,
		#topic-stil .subtune:hover {
			background: var(--color-button-hover);
		}

	#sundry hr,
	#topic-stil hr {
		background: transparent;
		border-bottom: 1px dashed var(--color-text-faint);
		height: 1px;
		margin: 8px 0 9px;
	}

/* Line below STIL box for dragging it smaller or larger */
#slider {
	position: relative;
	flex: 0 0 3px;
	border-left: 1px solid var(--color-border-box);
	border-right: 1px solid var(--color-border-box);
	border-bottom: 0.5px solid var(--color-border-box);
	background: var(--color-bg-slider);
	text-align: center;
	cursor: n-resize;
}

/* ---- Browser List -------------------------------------------------------- */

#songs {
	flex: 1 1 auto;
	flex: 1; /* Chrome hack */
	position: relative;
	padding: 0;
	margin: 3.5px 0 10px;
	border: 1px solid var(--color-border-box);
	border-radius: 1px;
	color: var(--color-text-distinct);
	background: var(--color-bg-box);
}

	/* Container for GIF loading spinner IMG */
	#loading {
		position: absolute;
		top: 0; /* Changed in jQuery */
		left: 165px; /* (430 / 2) - 50 */
	}

		.loading-spinner {
			filter: var(--svg-filter-loading-spinner);
		}

	/* The top container with root/back buttons, path and sort drop-down box */
	#songs-buttons {
		height: 50px;
		padding: 10px;
		background: var(--color-bg-songs-buttons);
	}

	/* The root/back buttons */
	.browser-ctrls {
		width: 34px;
	}

		.browser-ctrls svg {
			position: relative;
			top: 2px;
		}

	#path {
		display: inline-block;
		position: relative;
		top: 5px;
		margin-left: 8px;
		font-size: 14px;
		width: 61%; /* If you change the panel box width you may have to finetune this */
		height: 34px;
		color: var(--color-button-shadow);
	}
	
		/* For the small HVSC or CGSC in the path line */
		#path .dim,
		#folders .dim,
		#page .dim {
			position: relative;
			top: -1px;
			color: var(--color-text-dim);
			font-size: 9px;
			margin-right: 1px;
		}

		#folders .dim,
		#page .dim {
			font-size: 11px;
			color: var(--color-text-minor);
		}

		#path .playlist {
			position: relative;
			top: -3px;
			font-weight: bold;
		}

		#path .maintainer,
		#path .counts {
			position: relative;
			top: -9px;
			font-size: 10px;
			color: var(--color-text-minor);
			font-style: italic;
		}

			#path .counts {
				top: -7px;
			}

		#upload-wizard {
			position: absolute;
			top: 0;
			left: 40px;
			height: 20px;
			line-height: 0;
			padding: 10px;
			font-size: 11px;
		}

	/* The drop-down box for how the list is sorted */
	#sort {
		position: absolute;
		top: 13px;
		right: 11px;
	}

		#sort label {
			font: normal 13px/0 "Montserrat", sans-serif;
			color: var(--color-text-fine);
		}

		#dropdown-sort {
			font-size: 13px;
		}

	#songs table {
		font-size: 14px;
		border: 0;
	}

	/* Scrollable box with folders and SID files */
	#folders {
		position: relative;
		height: calc(100% - 100px); /* Minus the height of #songs-buttons and #search */
		border-top: 1px solid var(--color-border-box);
		border-bottom: 1px solid var(--color-border-box);
	}
	
	@supports (-webkit-appearance:none) and (not (-moz-appearance:none)) {
		#folders {
			scroll-behavior: auto !important;
		}
	}

	#folders,
	#sundry,
	#page,
	#dialog-all-tags,
	#dialog-song-tags,
	#dialog-list-start-tag,
	#dialog-list-end-tag,
	#upload-stil-text,
	#annex-tips {
		overflow-y: auto;
		overflow-x: hidden !important;
		scrollbar-width: thin;
		scroll-behavior: smooth;
		scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
	}

	#folders:focus {
		outline: none;
	}

	/* Not visible in Firefox but has a subtle effect in Chrome */
	#folders:focus-visible {
		outline: 0.5px solid var(--color-outline);
		outline-offset: -1px;
	}

	::-webkit-scrollbar {
		width: 8px;
	}
	
	::-webkit-scrollbar-track {
		background: var(--color-scrollbar-track);
	}
	
	::-webkit-scrollbar-thumb {
		background-color: var(--color-scrollbar-thumb);
	}
	
		::-webkit-scrollbar-thumb:hover {
			background-color: var(--color-scrollbar-thumb-hover);
		}
	
		::-webkit-scrollbar-thumb:active {
			background-color: var(--color-scrollbar-thumb-active);
		}

	/* A clicked SID file for playing */
	#songs .selected {
		color: var(--color-text-sid-selected) !important;
		background: var(--color-bg-sid-selected);
		font-weight: bold;
	}

:root {
			--color-border-sid-kb: var(--color-bg-sid-selected); /* or #d5d5c9 and 1.5px border*/
			--color-border-sid-kb: #e4e4dc;

			--color-sid-kb-radius: -7px;
			--color-sid-kb-opacity: 0.4;
}

[data-theme="dark"] {
			--color-border-sid-kb: var(--color-bg-sid-selected); /* or #393939 and 1.5px border */
			--color-border-sid-kb: #3b3b3b;

			--color-sid-kb-radius: -6px;
			--color-sid-kb-opacity: 0.9;
}

	/* The selection for a keyboard-controlled SID row */
	#kb-marker {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		pointer-events: none;
		border-top: 1.5px solid var(--color-border-sid-kb);
		border-bottom: 1.5px solid var(--color-border-sid-kb);
		/*box-shadow:
			inset 0 6px 6px var(--color-sid-kb-radius) rgba(0, 0, 0, var(--color-sid-kb-opacity)),
			inset 0 -6px 6px var(--color-sid-kb-radius) rgba(0, 0, 0, var(--color-sid-kb-opacity));*/
		transition: top 0.1s ease;
		z-index: 0; /* Avoíds disturbing the text when smooth scrolling past a row */
	}

	#songs .selected .info,
	#songs .selected .factoid {
		font-weight: normal;
		color: var(--color-button-hover);
	}

	#songs td {
		border: 0;
		padding: 0 0 0 10px;
		cursor: pointer;
	}

		/* Loading spinner shown for slow-loading handlers like Lemon */
		#spinner {
			float: right;
			position: relative;
			top: -1px;
			right: 20px;
			width: 42px;
			height: 42px;
			background: url(../images/spinner.svg) no-repeat;
			filter: var(--svg-filter-row-spinner);
		}

		#songs td.stars {
			width: 101px;
			padding: 0;
		}

		/* Stars for SID files need to be aligned with the first line (the SID filename itself) */
		#songs td.filestars {
			vertical-align: top;
			padding-top: 6px;
		}

		#songs .rating,
		#info-rating,
		#topic-profile .folder-rating {
			position: relative;
			unicode-bidi: isolate; /*bidi-override;*/ /* @link https://css-tricks.com/star-ratings/ */
			direction: rtl;
		}

		#songs .rating {
			display: block;
		}

		#info-rating,
		#topic-profile .folder-rating {
			cursor: pointer;
		}

		#songs b.s,
		#songs b.sh,
		#info-rating b.s,
		#info-rating b.sh,
		#topic-profile b.s,
		#topic-profile b.sh { /* Star */
			display: inline-block;
			position: relative;
			top: 3px;
			width: 18px;
			height: 18px;
		}

		#info-rating {
			position: absolute;
			bottom: 13px;
			right: 7px;
		}

		/* Show filled stars when hovering on them (only when logged in) */
		#songs .rating > b.sh:hover:before,
		#songs .rating > b.sh:hover ~ b.sh:before,
		#info-rating > b.sh:hover:before,
		#info-rating > b.sh:hover ~ b.sh:before,
		#topic-profile .folder-rating > b.sh:hover:before,
		#topic-profile .folder-rating > b.sh:hover ~ b.sh:before {
			content: "";
			display: inline-block;
			position: relative;
			top: 0;
			width: 18px;
			height: 18px;
			background: var(--svg-bg-star-orange);
		}

		#songs b.xv,
		#info-rating b.xv,
		#topic-profile b.xv { /* User voted */
			background: var(--svg-bg-star-orange);
		}

		#songs b.ev,
		#info-rating b.ev,
		#topic-profile b.ev { /* Empty voted */
			background: var(--svg-bg-star-empty-voted);
		}

		#songs b.eu,
		#info-rating b.eu,
		#topic-profile b.eu { /* Empty unvoted */
			background: var(--svg-bg-star-empty-unvoted);
		}

		#songs .fdiv {
			position: relative;
		}

		#songs .factoid,
		#songs .uploaded-time {
			float: right;
			position: relative;
			top: 2px;
			right: 13px;
			font-size: 11px;
			line-height: 11px;
			/*color: var(--color-text-minor);*/
			color: var(--color-text-player);
			z-index: 2;
		}

			/* Static width factoid field */
			#songs .factoid span {
				display: inline-block;
				width: 22px;
				text-align: right;
			}

				/* Wider static field for e.g. ID type values */
				#songs .factoid span.id {
					width: 32px;
				}

				/* Even wider */
				#songs .factoid span.big {
					width: 38px;
				}

			/* Faded factoid field for a very common value */
			#songs .factoid div {
				color: var(--color-text-fa-common);
			}

:root {
			--color-fbar1: #c8c9b9ff 0%;
			--color-fbar2: #c8c9b9c0 70%;
			--color-fbar3: #c8c9b900 100%;
}

[data-theme="dark"] {
			--color-fbar1: #6e7965ff 0%;
			--color-fbar2: #6e796570 70%;
			--color-fbar3: #6e796500 100%;
}

		/* Horizontal bar below factoid value */
		#songs .fbar {
			position: absolute;
			top: 1.5px;
			right: 12px;
			height: 13.5px;
			width: 0; /* Set in browser.js */
			max-width: 200px;
			border-radius: 1px;
			/*background: #d4d4ff;*/
			/*background: linear-gradient(to right, #acbb78ff 0%, #acbb7800 100%);*/
			background: linear-gradient(to right, var(--color-fbar1), var(--color-fbar2), var(--color-fbar3));
			background-size: 200px 100%;        /* Anchor scale */
			background-repeat: no-repeat;
			background-position: right center;  /* Gradient anchored at right edge */
			z-index: 1;
		}

		/* Container for the two corner buttons in the bottom */
		#corner-buttons {
			overflow: hidden;
			position: absolute;
			bottom: 50px;
			width: 100%;
			height: 60px;
			z-index: 4;
			pointer-events: none;
		}

:root {
			--color-border-message: #444;
}

[data-theme="dark"] {
			--color-border-message: transparent;
}

			#corner-buttons .message {
				display: none;
				position: relative;
				left: 50%;
				margin-top: 10px;
				padding: 4px 8px;
				transform: translateX(-50%);				
				font: normal 14px "Montserrat", sans-serif;				
				color: #000;
				background: #fff;
				box-shadow: 2px 2px 4px var(--color-button-shadow);
				border-radius: 5px;
				border: 1px solid var(--color-border-message);
				z-index: 4;
			}

			/* Base triangle button look (shared) */
			#corner-buttons .corner-svg {
				position: absolute;
				width: 38px;
				height: 38px;
				background: var(--color-button);
				display: inline-flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding: 6px;
				border: 0;
				box-shadow: none;
				cursor: pointer;
				color: var(--color-button-text);
				pointer-events: auto;
			}

				/* Right corner button */
				#corner-buttons .corner-right {
					clip-path: url(#cb-corner-clip-right);
					right: -14px;	/* Collapsed */
					bottom: -13px;
					transition: right 100ms linear, bottom 100ms linear;
				}

					/* Reveal button on corner buttons AND search containers */
					#songs.cb-prox .corner-right {
						right: 0;
						bottom: 1px;
					}

					/* Currently selected factoid number */
					#songs .corner-right div {
						position: relative;
						font: bold 13px "Open Sans", sans-serif;
						opacity: 0;
						pointer-events: none;
					}

				/* Shadow borders for the triangle towards the corner of the container */
				#corner-buttons .corner-shadow-right {
					position: absolute;
					right: 0;
					bottom: 1px;
					width: 0;
					height: 0;
					border-bottom: 2px solid var(--shadow-button-triangle);
					border-right: 2px solid var(--shadow-button-triangle);
					z-index: -1;
					transition: all 100ms linear;
				}

					#songs.cb-prox .corner-shadow-right {
						width: 34px;
						height: 34px;
					}

				/* Left corner button */
				#corner-buttons .corner-left {
					clip-path: url(#cb-corner-clip-left);
					left: -14px;	/* Collapsed */
					bottom: -13px;
					transition: left 100ms linear, bottom 100ms linear;
				}

					/* Reveal button on corner buttons AND search containers */
					#songs.cb-prox  .corner-left {
						left: 0;
						bottom: 1px;
					}

				/* Shadow borders for the triangle towards the corner of the container */
				#corner-buttons .corner-shadow-left {
					position: absolute;
					left: 0;
					bottom: 1px;
					width: 0;
					height: 0;
					border-bottom: 2px solid var(--shadow-button-triangle);
					border-left: 2px solid var(--shadow-button-triangle);
					z-index: -1;
					transition: all 100ms linear;
				}

					#songs.cb-prox  .corner-shadow-left {
						width: 34px;
						height: 34px;
					}

			#corner-buttons .corner-svg:hover {
				background: var(--color-button-hover);
			}

			#corner-buttons .corner-svg:active {
				transform: scale(0.935);
				transform-origin: center center;
			}

			#corner-buttons .cb-icon {
				display: block;
				position: relative;
				opacity: 0;
			}

				#corner-buttons .corner-left .cb-icon {
					bottom: -1px;
					left: -4px;
				}

				#songs.cb-prox .cb-icon,
				#songs.cb-prox .corner-right div {
					opacity: 1;
				}

		#songs .disqus-sh {
			display: none !important;
		}

		#songs .block-wrap,
		#page .block-wrap {
			position: relative;
			display: inline-block;
			max-width: 300px; /* Width before right end turns in to "..." ellipsis */
		}

		#page .block-wrap {
			max-width: 320px;
			padding-left: 14px;
			vertical-align: bottom;
		}

		#songs .block,
		#page .block {
			width: 100%;
		}

		/* Used for both folders and files (wrapper to force a maximum width with "..." in the end) */
		#songs .entry,
		#page .top-item {
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

			/* Competition placeholder GIF animation for filename */
			#songs .gif1 {
				height: 10px;
				width: 140px;
				opacity: 0.8;
			}

			/* Competition placeholder GIF animation for second line */
			#songs .gif2 {
				height: 9px;
				width: 120px;
				margin-left: 2px;
				opacity: 0.3;
			}

		#page .top-item {
			pointer-events: auto;
		}

		#songs td.sid {
			position: relative;
			max-width: 325px; /* This fix prevents the left TD from pushing the TD with star ratings */
		}

			/* A SID special label for info like "2SID" etc. */
			#songs .sid-special {
				position: absolute;
				top: 11px;
				right: 7px;
				height: 14px;
				padding: 0 3px;
				font-size: 9px;
				font-weight: bold;
				letter-spacing: 0.2px;
				line-height: 13px;
				background: transparent;
				border: 1px solid var(--color-timebar-border);
				text-align: center;
				pointer-events: none;
			}

				/* SID special label for 2SID files */
				#songs .sidsp-2sid {
					color: var(--color-text-sidsp-2sid);
					border-color: var(--color-border-sidsp-2sid);
					background: var(--color-bg-sidsp-2sid);
				}

				/* SID special label for 3SID files */
				#songs .sidsp-3sid {
					color: var(--color-text-sidsp-3sid);
					border-color: var(--color-border-sidsp-3sid);
					background: var(--color-bg-sidsp-3sid);
				}

				/* A smaller block-wrap width for the SID filename when the SID special label is present */
				#songs .bw-sidsp {
					max-width: 272px;
				}

				#songs .disabled .sid-special {
					color: var(--color-disabled);
					border-color: var(--color-disabled);
					background: transparent;
				}

:root {
	--svg-url-circle-p: url(../images/circle_p_light.svg);
	--svg-url-circle-s: url(../images/circle_s_light.svg);
	--svg-url-circle-c: url(../images/circle_c_light.svg);
	--svg-url-circle-b: url(../images/circle_b_light.svg);
	--svg-url-circle-m: url(../images/circle_m_light.svg);
	--svg-url-circle-l: url(../images/circle_l_light.svg);
	--svg-url-circle-d: url(../images/circle_d_light.svg);
	--svg-url-circle-basic: url(../images/circle_basic_light.svg);
	--svg-url-circle-none: url(../images/circle_none_light.svg);
}

[data-theme="dark"] {
	--svg-url-circle-p: url(../images/circle_p_dark.svg);
	--svg-url-circle-s: url(../images/circle_s_dark.svg);
	--svg-url-circle-c: url(../images/circle_c_dark.svg);
	--svg-url-circle-b: url(../images/circle_b_dark.svg);
	--svg-url-circle-m: url(../images/circle_m_dark.svg);
	--svg-url-circle-l: url(../images/circle_l_dark.svg);
	--svg-url-circle-d: url(../images/circle_d_dark.svg);
	--svg-url-circle-basic: url(../images/circle_basic_dark.svg);
	--svg-url-circle-none: url(../images/circle_none_dark.svg);
}

			/* Container for focus icons */
			#songs .folder-focus {
				position: absolute;
				top: 7px;
				right: 9px;
			}

			#topic-profile .folder-focus {
				display: inline-block;
				position: relative;
				top: 0;
				left: 10px;
			}

				.folder-focus div {
					display: inline-block;
					height: 16px;
					width: 16px;
					margin-right: 1px;
				}

				#topic-profile .folder-focus div {
					height: 18px;
					width: 18px;
					background-size: 20px 20px !important;
					pointer-events: auto;
				}
				
				.folder-focus .p  { background: var(--svg-url-circle-p) 0 0 / 18px 18px no-repeat; }
				.folder-focus .s  { background: var(--svg-url-circle-s) 0 0 / 18px 18px no-repeat; }
				.folder-focus .c  { background: var(--svg-url-circle-c) 0 0 / 18px 18px no-repeat; }
				.folder-focus .b  { background: var(--svg-url-circle-b) 0 0 / 18px 18px no-repeat; }
				.folder-focus .m  { background: var(--svg-url-circle-m) 0 0 / 18px 18px no-repeat; }
				.folder-focus .l  { background: var(--svg-url-circle-l) 0 0 / 18px 18px no-repeat; }
				.folder-focus .d  { background: var(--svg-url-circle-d) 0 0 / 18px 18px no-repeat; }
				.folder-focus .bc  { background: var(--svg-url-circle-basic) 0 0 / 18px 18px no-repeat; }
				.folder-focus .none  { background: var(--svg-url-circle-none) 0 0 / 18px 18px no-repeat; }

			#focus-explainer {
				position: absolute;
				top: 10px;
				left: 0;		/* Set in browser.js */
				width: 16px;
				height: 16px;
				padding-left: 4.25px;
				font: bold 12px/12px "Open Sans", sans-serif;
				border: 1.5px solid var(--color-text-player);
				border-radius: 20px;
				color: var(--color-text-player);
				cursor: default;
			}

			#songs .pl-strip {
				position: absolute;
				top: 4px;		/* 2px 4px */
				left: 0;
				width: 3px;
				height: 45px;	/* 49px 45px */
				border-radius: 1px;
			}

				#songs .pl-a { background: var(--color-strip-pl-a); }
				#songs .pl-b { background: var(--color-strip-pl-b); }
				#songs .pl-c { background: var(--color-strip-pl-c); }
				#songs .pl-d { background: var(--color-strip-pl-d); }
				#songs .pl-e { background: var(--color-strip-pl-e); }
				#songs .pl-f { background: var(--color-strip-pl-f); }

				#songs tr.disabled .pl-a,
				#songs tr.disabled .pl-b,
				#songs tr.disabled .pl-c,
				#songs tr.disabled .pl-d,
				#songs tr.disabled .pl-e,
				#songs tr.disabled .pl-f { background: var(--color-disabled); }

			#songs .has-stil {
				position: absolute;
				top: 10px;
				left: 5px;
				width: 3.5px;
			}

				#songs .has-stil div {
					height: 1px;
					margin-bottom: 1px;
					border-top: 1px solid var(--color-text-body);
				}

				#songs tr.disabled .has-stil div {
					border-top-color: var(--color-disabled);
				}

		/* Alloyrun.sid (file) */
		#songs .file {
			padding-top: 6px;
		}

		#songs .selected .info {
			color: var(--color-text-info-selected);
		}

		/* A narrower font for search queries in case path + name gets long */
		#songs .search,
		.slimfont {
			/*font-family: "Barlow Condensed", sans-serif;*/
			font-family: "Asap Condensed", sans-serif;
		}

		/* Number of subtunes (indicated in the end of the SID filename) */
		#songs .subtunes,
		#page .subtunes {
			float: right;
			position: relative;
			top: 9px;
			margin-left: 6px;
			height: 16px;
			padding: 0 4px;
			font-size: 12px;
			line-height: 15px;
			font-weight: bold;
			color: var(--color-button-inverted);
			background: var(--color-button);
			border-radius: 3px;
			text-align: center;
		}

			/* For subtunes in "The longest SID tunes" top list */
			#page .subtunes {
				top: 3px;
			}

			#songs .disabled .subtunes {
				background: var(--color-disabled);
			}

			/* In symlists a specific subtune to be played is shown instead */
			#songs .specific,
			#page .subtunes {
				font-size: 9px;
				line-height: 1.65em;
				background: var(--color-bg-subtune);
				padding: 0 5px;
				color: var(--color-text-subtune);
				border: 0.8px solid var(--color-border-subtune);
				border-radius: 10px;
			}

				/*#songs .specific:before {
					content: "# ";
				}*/

		/* 1988 in MoN/FutureComposer (second line below SID filename itself) */
		#songs .info {
			overflow: hidden;
			position: relative;
			top: -7px;
			font-size: 11px;
			color: var(--color-text-minor);
			white-space: nowrap; /* Needed for the line of tags to work */
		}

		/* Tel_Jeroen (folder) */
		#songs .folder {
			font-size: 16px;
			line-height: 0;
			position: relative;
			top: -2px;
		}

			#songs td.compo {
				padding-top: 4px;
			}

			#songs .folder span {
				height: 26px;
			}

				#songs .folder span.compo {
					padding-left: 4px;
					line-height: 30px;
				}

				#songs .folder span.compo-year {
					position: relative;
					left: 4px;
					top: -11px;
				}

				#songs .folder span.compo-internal	{ top: -9px; }
				#songs .folder span.compo-c64		{ top: -7.5px; }
				#songs .folder span.compo-8bit		{ top: -6.5px; }

			/* Folder SVG icon */
			#songs .folder span:before {
				content: "";
				display: inline-block;
				position: relative;
				top: 2px;
				margin-right: 2px;
				background: url(../images/if_folder.svg) 0 0 / 26px 26px no-repeat;
				width: 26px;
				height: 21px;
			}

				#songs .folder span.compo:before {
					width: 32px;
					background: none;
				}

				/* Competition type "icon" */
				#songs .folder span.compo-year:before {
					content: "";
					left: -4px;
					top: -7px;
					height: 32px;
					width: 32px;
					font-size: 21px;
					line-height: 26px;
					font-weight: bold;
					text-align: center;
					background: var(--color-compo-bg);
					color: var(--color-compo-text);
					border: 2px solid var(--color-compo-border);
					border-radius: 10px; /* 13px 14px 20px (circle) */
					box-shadow: var(--shadow-compo);
					margin-bottom: -10px;
				}

				#songs .folder span.compo-copy:before {
					content: "C";
					color: var(--color-compo-copy);
					border-color: var(--color-compo-copy);
					padding: 0 1px 0 0;
				}

				#songs .folder span.compo-demo:before {
					content: "D";
					color: var(--color-compo-demo);
					border-color: var(--color-compo-demo);
					padding: 0 0 0 1px;
				}

				#songs .folder span.compo-meeting:before {
					content: "M";
					color: var(--color-compo-meeting);
					border-color: var(--color-compo-meeting);
					padding: 0;
				}

				#songs .folder span.compo-internal:before {
					content: "IM";
					color: var(--color-compo-internal);
					top: -9px;
					border-color: var(--color-compo-internal);
					font-size: 17px;
					padding: 0.5px 0 0 0;
				}

				#songs .folder span.compo-c64:before {
					content: "C64";
					color: var(--color-compo-c64);
					top: -10.5px;
					border-color: var(--color-compo-c64);
					font-size: 13px;
					padding: 0;
				}

				#songs .folder span.compo-8bit:before {
					content: "8BIT";
					color: var(--color-compo-8bit);
					top: -12px;
					border-color: var(--color-compo-8bit);
					font-size: 10px;
					padding: 0.5px 0 0 0;
				}

				#songs .folder span.compo-standalone:before {
					content: "S";
					color: var(--color-compo-standalone);
					border-color: var(--color-compo-standalone);
					padding: 0;
				}

			#songs .single span:before {
				background: url(../images/if_folder_single.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs .single-photo span:before {
				background: url(../images/if_folder_single_photo.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs .group span:before {
				background: url(../images/if_folder_group.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs .group-photo span:before {
				background: url(../images/if_folder_group_photo.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs .playlist span:before {
				background: url(../images/if_folder_star.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs .search-shortcut span:before {
				background: url(../images/if_folder_search.svg) 0 0 / 26px 26px no-repeat;
			}

			#songs span.q {
				margin-left: 1px;
				color: var(--color-dot);
			}

			#songs span.dot {
				color: var(--color-dot);
			}

			/* #songs .playlist span:before {
				top: 6px;
				background: url(../images/playlist.svg) 4px 0 / 19px 19px no-repeat;
			} (Shows a list-with-note icon instead) */

		#songs td.new:before,
		#songs td.sid .newsid:before,
		#songs td.sid .newst:before {
			content: "*";
			position: absolute;
			top: 16px;
			left: 24px;
			padding: 6px 2px 3px;
			color: var(--color-text-ptype);
			background: var(--color-new-bg);
			font: bold 11px/0 "Open Sans", sans-serif;
			border-radius: 1px;
			z-index: 2;
			box-shadow: 0 0 2px var(--color-new-shadow);
		}

		#songs td.sid .newsid:before,
		#songs td.sid .newst:before {
			content: "NEW";
			display: inline-block;
			top: 18px;
			left: auto;
			right: -9px;
			font-size: 8px;
			border-radius: 2px;
			padding-bottom: 6px;
		}

		#songs td.sid .newst:before {
			top: 9px;
			left: -20px;
			right: auto;
		}

		#songs .filescount {
			float: right;
			position: relative;
			top: 8px;
			margin-left: 6px;
			height: 16px;
			padding: 7px 4px 0;
			font-size: 11px;
			line-height: none;
			background: transparent;
			border: 1px solid var(--color-timebar-border);
			border-radius: 3px;
			text-align: center;
		}

		#songs .new-uploads {
			float: right;
			position: relative;
			top: 9px;
			margin-left: 12px;
			height: 14px;
			padding: 7.5px 3.5px 1.5px;
			color: var(--color-text-ptype);
			background: var(--color-new-bg);
			font: bold 9px/0 "Open Sans", sans-serif;
			border-radius: 2px;
			text-transform: uppercase;
			box-shadow: 0 0 2px var(--color-new-shadow);
		}

			#songs .no-new {
				box-shadow: none;
				color: var(--color-text-fine);
				background: var(--color-disabled);
			}

		#songs .sid_fm {
			float: right;
			position: relative;
			top: 9px;
			margin-left: 12px;
			height: 14px;
			padding: 7.5px 3.5px 1.5px;
			box-shadow: none;
			color: var(--color-text-fine);
			background: var(--color-disabled);
			font: bold 9px/0 "Open Sans", sans-serif;
			border-radius: 2px;
			text-transform: uppercase;
		}

		/* Breathing room in top of folders */
		#songs .spacer {
			padding-bottom: 5px;
			cursor: default;
		}

		/* Divider below folders (end of folder or divider before SID files) */
		#songs .divider {
			padding-bottom: 6px;
			border-bottom: 1px dashed var(--color-text-faint);
			cursor: default;
		}

	#songs tr:hover {
		/*color: var(--color-link-hover);*/
		background: var(--color-bg-sid-hover);
	}

		#songs tr.selected:hover {
			background: var(--color-bg-sid-selected);
		}

		#songs tr.disabled:hover {
			background: var(--color-bg-box); /* Same as box background */
		}

	/* Used for e.g. BASIC tunes (the two emulators can't play these) */
	#songs .disabled,
	#songs .disabled tr:hover,
	#songs .disabled .info {
		color: var(--color-disabled);
		cursor: default;
	}

	/* The bottom container for searching */
	#search {
		position: relative;
		padding: 10px;
		height: 50px;
		background: var(--color-bg-songs-buttons);
	}

		#dropdown-search {
			position: absolute;
			top: 14px;
			left: 11px;
			font-size: 13px;
			width: 88px;
		}

		#search input[type="text"] {
			position: absolute;
			top: 14px;
			left: 105px;
			width: 184px; /* 242px */
			font-size: 14px;
			padding: 4px 22px 4px 4px; /* Make room for the "X" */
			height: 21px;
			border: 0.5px solid var(--color-border-box);
			border-radius: 1px;
		}

			/* The "X" icon for clearing the search edit box */
			#search-clear {
				position: absolute;
				right: 145px;
				top: 49%;
				transform: translateY(-50%);
				width: 13px;
				height: 13px;
				cursor: pointer;
				opacity: 0;
				visibility: hidden;
				transition: opacity .06s linear, visibility .06s linear;
			}

			#search-clear.visible {
				opacity: 0.8;
				visibility: visible;
			}

		#songs .medium,
		#topic-settings .medium {
			padding: 0 7px;
			font-size: 11px;
			box-shadow: none !important;
		}

			#search-here-container {
				display: inline-block;
				position: absolute;
				top: 14px;
				right: 82px;
			}

				#search-here-container input {
					margin-right: 0;
				}

				#search-here-container label {
					position: relative;
					top: -1px;
					font: normal 13px/0 "Montserrat", sans-serif;
				}

				#search-here-container label.disabled,
				#ev-dd2 label.disabled {
					color: var(--color-text-label-disabled);
				}

			#search-button {
				position: absolute;
				top: 14px;
				right: 11px;
				height: 21px;
				line-height: 22px;
			}

			#search-cancel {
				position: relative;
				top: -2.5px;
				height: 23px;
				line-height: 26px;
			}

/* ---- Thumbnails for links ------------------------------------------------- */

.site-list {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.site-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: auto;
}

.site-link {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	width: 300px;
}

.thumb {
	width: 40px;
	height: 25px;
	object-fit: cover;
	background: #eee;
}

.site-header {
	position: relative;
	top: 2px;
	margin-left: 1px;
	font-size: 17px !important;
	background: transparent;
	border: none;
	white-space: nowrap;
	transition: all .07s linear;
}

[data-theme="dark"] .site-header:hover {
	color: #fff !important;
}

.site-type {
	float: right !important;
	position: relative;
	top: -2px;
	font: normal 13px "Asap Condensed", sans-serif;
	white-space: nowrap;
	opacity: .4;
}

/* ---- Context menu -------------------------------------------------------- */

.context {
	visibility: hidden;
	position: absolute;
	z-index: 5;
	background: var(--color-context-bg);
	border: 1px solid var(--color-context-border);
	padding: 4px 6px;
	box-shadow: 2px 2px 2px var(--color-context-shadow);
}

	#contextsubmenu {
		z-index: 6;
	}

	.context .line {
		position: relative;
		height: 24px;
		padding: 0 6px;
		margin: 2px 0;
		font-size: 13px;
		line-height: 25px;
		cursor: pointer;
	}

		.context .line:hover {
			color: var(--color-context-text-hover);
			background: var(--color-context-bg-hover);
		}

	.context .divider {
		height: 2px;
		margin-bottom: 1px;
		border-bottom: 1px solid var(--color-context-divider);
	}

	.context .submenu {
		padding-right: 18px;
	}

	.context .submenu:after {
		content: "";
		position: absolute;
		top: 6px;
		right: 0;
		width: 0;
		height: 0;
		border: 6px solid transparent;
		border-color: transparent transparent transparent var(--color-context-triangle);
	}

	.context .disabled {
		color: var(--color-context-disabled);
		cursor: default;
	}

		.context .disabled:hover {
			color: var(--color-context-disabled);
			background: transparent;
		}

		.context .disabled.submenu:after { /* Chained classes */
			border-color: transparent transparent transparent var(--color-context-disabled);
		}

	#small-edit {
		position: relative;
		text-align: right;
		margin-right: 30px;
	}

	#sym-rename,
	#sym-specify-subtune {
		height: 20px;
		font-size: 14px;
		font-weight: normal;
		pointer-events: auto;
	}

	/* Edit box for renaming a file or folder (symlists only) */
	#sym-rename {
		width: 264px;
	}

	/* Edit box for specifying a different default sub tune for a symlist SID file */
	#sym-specify-subtune {
		/*position: absolute;
		top: 2px;
		right: 30px;*/
		width: 32px;
	}

/* ---- Right side container with tabs -------------------------------------- */

/* Container for entire left side (top, info/memory/stil, controls, browser, search) */
#dexter {
	position: absolute;
	top: 0;
	left: 450px;
	display: flex;
	flex-flow: column;
	height: calc(100% - 10px);
	width: 860px;
}

	#dexter .soasc-status {
		position: absolute;
		top: -7.5px;
		left: 348px;
		padding: 3px 2px 3px 6px;
		border-radius: 3px;
		background: var(--color-soasc-status-bg);
		border: 0.5px solid var(--color-soasc-status-border);
		color: var(--color-soasc-status-text);
	}

	#soasc-status-led {
		display: inline-block;
		position: relative;
		top: 0;
		width: 7px;
		height: 7px;
		background: var(--color-soasc-status-unknown);
		margin: 0 0 0 2px;
	}

	#tabs {
		/* See also #top for additional styling (flex) */
		width: 860px;
	}

		#youtube-tabs {
			display: none;
			flex: 0 0 13px;
			position: relative;
		}

		#edityttabs {
			position: absolute;
			top: 2px;
			right: 1px;
			font-size: 11px;
			text-align: right;
		}

		#tabs .tab,
		#sundry-tabs .tab,
		#youtube-tabs .tab,
		#annex .annex-tab {
			float: left;
			position: relative;
			top: 30.5px;
			width: 60px;
			height: 22px;
			font: normal 13px/0 "Montserrat", sans-serif;
			padding-top: 10px;
			color: var(--color-tab-text-color);
			margin-right: 3px;
			border-top: 1px solid var(--color-tab-border);
			border-left: 1px solid var(--color-tab-border);
			border-right: 1px solid var(--color-tab-border);
			border-top-left-radius: 1px;
			border-top-right-radius: 1px;
			text-align: center;
			background: var(--color-tab-bg);
			z-index: 1;
			cursor: pointer;
		}

			#sundry-tabs .tab {
				top: 7.5px;
				width: 45px;
				font-family: "Asap Condensed", sans-serif;
			}

			#youtube-tabs .tab {
				top: 0;
				width: auto;
				padding-left: 8px;
				padding-right: 8px;
				font-family: "Asap Condensed", sans-serif;
			}

			#annex .annex-tab {
				top: 0;
				width: auto;
				padding-left: 10px;
				padding-right: 24px;
			}

		#tabs .selected,
		#sundry-tabs .selected,
		#youtube-tabs .selected,
		#annex .selected {
			border-top: 1px solid var(--color-tab-border);
			border-left: 1px solid var(--color-tab-border);
			border-right: 1px solid var(--color-tab-border);
			color: var(--color-tab-selected-text);
			background: var(--color-tab-selected-bg);
			z-index: 4;
			cursor: default;
		}

		#tabs .disabled,
		#sundry-tabs .disabled,
		#youtube-tabs .disabled {
			border-top: 1px solid var(--color-tab-border-disabled);
			border-left: 1px solid var(--color-tab-border-disabled);
			border-right: 1px solid var(--color-tab-border-disabled);
			color: var(--color-tab-text-disabled);
			background: var(--color-tab-bg-disabled);
			cursor: default;
		}

		#tabs .tab:not(.selected):hover.tab:not(.disabled):hover,
		#sundry-tabs .tab:not(.selected):hover.tab:not(.disabled):hover,
		#youtube-tabs .tab:not(.selected):hover.tab:not(.disabled):hover {
			color: var(--color-tab-hover-text);
			background: var(--color-tab-hover-bg);
		}

		#tabs .right,
		#sundry-tabs .right,
		#youtube-tabs .right {
			float: right;
			margin-left: 3px;
			margin-right: 0;
		}

		/* Small value bubbles at the tab corners */
		#tabs .notification {
			display: none;
			position: absolute;
			top: -6px;
			right: -2px;
			font-size: 9px;
			line-height: 0;
			height: 12.5px;
			background: var(--color-notification-default);
			color: var(--color-notification-text);
			padding: 6px 3px 0;
			border-radius: 3px;
			font-weight: bold;
		}

		#tabs .csdbcolor {
			background: var(--color-notification-csdb);
		}

		#tabs .gb64color {
			background: var(--color-notification-gb64);
		}

		#tabs .playercolor {
			background: var(--color-notification-player);
		}

		#tabs .remixcolor {
			background: var(--color-notification-remix);
		}

		#tabs .stilcolor {
			background: var(--color-notification-stil);
		}

	/* Where the contents of a dexter tab is shown */
	#page {
		position: relative;
		flex: 1 1 auto;
		flex: 1; /* Chrome hack */
		overflow: auto;
		padding: 10px;
		border: 1px solid var(--color-border-box);
		border-radius: 1px;
		background: var(--color-bg-box);
		z-index: 2;
	}

		/* Make the big logo crawl up under the white sticky header bar */
		.big-logo {
			background: var(--color-bg-box) var(--url-biglogo) -14px -2px / 890px no-repeat !important;
			image-rendering: crisp-edges;
		}

		/* Tabs with no big logo should start at the top */
		#page h2:first-child {
			margin-top: 0;
		}

			/* Tabs with the big logo present should leave room for it to begin with */
			#dexter .big-logo h2:first-child {
				margin-top: 140px !important;
			}

		#page .h2-note {
			position: relative;
			top: -3px;
			display: inline-block;
			margin-left: 16px;
			font: italic 14px "Open Sans", helvetica, sans-serif;
		}

	#disqus-title {
		display: block;
		/*font-size: 19px;*/
		margin: 20px 0 14px;
		color: var(--color-text-fine);
	}

	/* Tighter paragraphs for the profile, CSDb and GB64 pages */
	#page .ext p {
		margin: 10px 0;
	}

	#compo-profile p {
		margin: 0 0 10px;
	}

	/* Add a "halo" outline to event graphics to circumvent background color expectations */
	#page img.event {
		filter:
			drop-shadow(0 0 0.75px rgba(0,0,0,.75))
			drop-shadow(0 0 0.75px rgba(255,255,255,.9));		
	}

	/* Also known as plinks */
	#page .redirect {
		position: relative;
		padding-left: 20px;
	}

		#page .quote .redirect {
			padding-left: 15.5px;
		}

		#page blockquote .redirect {
			padding-left: 14px;
		}

		#page .redirect:before,
		#page .redirect:after {
			content: "";
			top: 2px;
			left: 0;
			display: inline-block;
			position: absolute;
			width: 16px;
			height: 16px;
			transition: all .05s linear;
		}

			#page .quote .redirect:before,
			#page .quote .redirect:after {
				width: 12.5px;
				height: 12.5px;
			}

			#page blockquote .redirect:before,
			#page blockquote .redirect:after {
				width: 10.5px;
				height: 10.5px;
			}

		#page .redirect:before {
			border: 1.5px solid var(--color-button-border-idle);
			background: var(--color-button);
		}

		#page .redirect.playing:before {
			border: 1.5px solid var(--border-button-select);
			background: var(--color-button-bg-select);
		}

		#page .redirect:after {
			top: 4px;
			left: 2px;
			background: url(../images/redirect_play.svg) 0 0.5px / 12px 12px no-repeat;
			filter: var(--svg-filter-white);
		}

			#page .quote .redirect:after {
				background-size: 8px 8px;
			}

			#page blockquote .redirect:after {
				top: 3px;
				background-size: 7px 7px;
			}

		#page .redirect.playing:after {
			top: 3px;
			left: 1px;
			background: url(../images/redirect_play.svg) 0.5px 0 / 13px 14px no-repeat;
			filter: var(--svg-filter-button);
		}

			#page .quote .redirect.playing:after {
				background-size: 9px 10px;
			}

			#page blockquote .redirect.playing:after {
				background-size: 8px 9px;
			}

			#page .redirect:hover:before {
				background: var(--color-button-hover);
			}

			#page .redirect.playing:hover:before {
				border-color: var(--color-button-border-hovsel);
				background: var(--color-button-bg-hovsel);
			}

			#page .redirect.playing:hover:after {
				filter: var(--svg-filter-button-hover);
			}

		#page .ext del {
			color: var(--color-text-faint);
		}

		#page .ext a > del {
			color: var(--color-text-del);
		}

		#page .ext .screenshot {
			width: 384px;
			height: 272px;
			border: 1px solid var(--color-border);
			cursor: pointer;
		}

		#page .ext .no-profile {
			margin-top: 5px;
			font-size: 12px;
			color: var(--color-text-subtle);
		}

		#page .ext .composer {
			width: 184px;
			height: 184px;
			border: 1px solid var(--color-border);
			background: var(--color-avatar-bg);
		}

			#page .ext .nobg {
				border: none;
				background: none;
			}

		#page .ext .root-thumbnail {
			background: var(--color-avatar-bg);
			width: 80px;
			height: 80px;
		}

			/* Born / Died */
			#page .ext .line {
				position: relative;
				top: -4px;
				margin-right: 20px;
			}

			/* Deprecated */
			#page .ext .onsid {
				padding: 2px 6px 3px;
				border: 1px solid var(--color-text-dim);
				border-radius: 4px;
				background: var(--color-top);
			}

			#page .ext .notable {
				display: block;
				position: absolute;
				height: 22px;
				left: 10px;
				bottom: 52px;
				color: var(--color-text-notable);
				background: var(--color-notable);
				border-radius: 4px;
			}

				#page .ext .notable a 		{ color: var(--color-anchor-notable); }
				#page .ext .notable a:hover	{ color: var(--color-anchor-hover-notable); }

			/* Flag image added after countries */
			#page .ext .flag {
				height: 11px;
				border: 1px solid var(--color-button-hover);
				margin: 0 1px;
			}

			#page .ext img.icon {
				position: relative;
				top: 4px;
				height: 21px;
				margin-right: 3px;
			}

			#page .ext img.iconbigger {
				position: relative;
				top: 6px;
				height: 21px;
				margin-right: 4px;
			}

			#page .ext img.arrow {
				position: relative;
				top: 4px;
				height: 18px;
				margin-right: 2px;
				filter: var(--svg-filter-icon-bottom);
			}

			#page .ext img.cake,
			#page .ext img.earth,
			#page .ext img.stone,
			#page .ext img.xfolder,
			#page .ext img.clinks,
			.doublenote {
				filter: var(--svg-filter-icon-bottom);
			}

			#clink-list li {
				position: relative;
			}

			/* A composer link in a bullet list of links for a composer (annex box) */
			#annex a.clink {
				display: inline-block;
				width: 170px; /* Also adjusted in main.js */
				font-family: "Asap Condensed", sans-serif;
				vertical-align: bottom;
			}

			/* And edit icon in the right side of a composer link */
			#annex .clink-icon {
				display: none;
				position: absolute;
				top: 0;
				right: -1px;
				height: 20px;
				width: 20px;
				background: #ccc;
				filter: var(--svg-filter-icon-bottom);
				cursor: pointer;
				opacity: 0.6;
			}

				#annex .clink-icon:hover {
					opacity: 1;
				}

				#annex .clink-edit {
					right: 19px;
					background: url(../images/edit.svg) 0 0 / 18px 18px no-repeat;
				}

				#annex .clink-delete {
					background: url(../images/close.svg) 0 0 / 18px 18px no-repeat;
				}

			/*.icon-editor {
				filter: var(--svg-filter-icon-editor);
			}*/

			/* Composer star used in notable line */
			#page .ext img.cstar {
				filter: var(--svg-filter-icon-cstar);
			}

			#page .ext .up {
				position: relative;
				top: -2px;
			}

		#page .ext .tinyhandle {
			font-size: 10px;
			padding-top: 4px !important;
			/*padding-bottom: 1px !important;*/
			border-bottom: 1px solid var(--color-table-border-thandle) !important;
		}

		#page .ext .tinytop {
			font-size: 2px;
		}

		#page .ext .tinybottom {
			font-size: 6px;
		}

		#page .ext .filler {
			visibility: hidden;
		}

		#page .ext .icon-before:before,
		#page .ext .compo-pos:before {
			content: "";
			position: relative;
			display: inline-block;
		}

			#page .ext .icon-arrowright:before {
				top: 4px;
				height: 18px;
				width: 18px;
				background: url(../images/composer_arrowright.svg) 0 0 / 18px 18px no-repeat;
				filter: var(--svg-filter-icon-bottom);
				margin-right: 2px;
			}

			#page .ext .compo-pos:before {
				top: 1px;
				height: 16px;
				width: 18px;
				background: url(../images/composer_arrowright.svg) 0 0 / 18px 18px no-repeat;
				filter: var(--svg-filter-icon-bottom);
			}

			#page .ext .icon-founder:before {
				top: 4px;
				height: 18px;
				width: 18px;
				background: url(../images/composer_flash.svg) 0 0 / 18px 18px no-repeat;
				filter: var(--svg-filter-icon-flash);
				margin-right: 2px;
			}

			#page .ext .icon-random:before {
				top: 4px;
				height: 17px;
				width: 17px;
				background: url(../images/composer_random.svg) 0 0 / 17px 17px no-repeat;
				filter: var(--svg-filter-icon-bottom);
				margin-right: 2px;
			}

			#page .ext .icon-created:before {
				top: 2px;
				left: 1px;
				height: 16px;
				width: 16px;
				background: url(../images/composer_plus.svg) 0 0 / 16px 16px no-repeat;
				filter: var(--svg-filter-icon-plus);
				margin-right: 4px;
			}

			#page .ext .icon-work:before {
				top: 2px;
				height: 15px;
				width: 15px;
				background: url(../images/composer_office.svg) 0 0 / 15px 15px no-repeat;
				filter: var(--svg-filter-icon-office);
				margin-right: 4px;
			}

			#page .ext .icon-etc:before {
				top: 2px;
				left: -1px;
				height: 16px;
				width: 16px;
				background: url(../images/composer_downwards.svg) 0 0 / 18px 18px no-repeat;
				filter: var(--svg-filter-icon-bottom);
				margin-right: 3px;
			}

			#page .ext .icon-swing:before {
				top: 4px;
				height: 18px;
				width: 18px;
				background: url(../images/composer_arrowswing.svg) 0 0 / 18px 18px no-repeat;
				filter: var(--svg-filter-icon-bottom);
				margin-right: 2px;
			}

			#page .ext .icon-note:before {
				top: 4px;
				left: 1px;
				height: 18px;
				width: 11px;
				background: url(../images/composer_singlenote.svg) 0 0 / 11px 18px no-repeat;
				filter: var(--svg-filter-icon-bottom);
				margin-right: 6px;
			}

		/* Some composer profiles may show a group logo/name image too */
		#page .brand {
			position: absolute;
			right: 0;
			bottom: 6px;
		}

		/* The 'Report a profile change' link in the composer profile corner */
		#profilechange {
			position: absolute;
			top: 4px;
			/* Horizontal position is set in composer.php */
			width: 140px;
			font-size: 11px;
		}

		/* Container table in root welcome page for the two side-by-side tables */
		#page table.root {
			border: none;
		}

			#page table.pseudo:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			#page table.decent:before {
				background: url(../images/decent.png) -68px 4px no-repeat;
				background-size: 54%;
				opacity: 0.7;
				transition: all .1s linear;
			}

			#page table.cshelldb:before {
				background: var(--color-bg-cshelldb) url(../images/cshelldb.png) -70px -28px no-repeat;
				background-size: 140%;
				opacity: 0.8;
				transition: all .1s linear;
			}

			#page table.playmod:before {
				background: url(../images/soundtracker.png) -236px -100px no-repeat;
				background-size: 140%;
				opacity: 0.8;
				transition: all .1s linear;
			}

			#page table.spotlight:before {
				background: url(../images/spotlamp.png) 140px 7px no-repeat;
				background-size: 45%;
				opacity: 0.7;
				transition: all .1s linear;
			}

			.spottext {
				text-shadow: 0 0 4px var(--color-bg-block-data);
			}

			.new-user {
				color: var(--color-text-new-user);
				font-weight: bold;
			}

			#page table.root div {
				pointer-events: auto;
			}

			#page table.root td {
				border: none;
				padding: 0;
				text-align: right;
				vertical-align: top;
			}

			#page table.rec table.tight {
				max-width: 100%;
				padding: 8px 0 6px 11px;
				cursor: pointer;
				transition: all .07s linear;
			}

			#page table.rec table.tight:hover {
				background: var(--color-root-bg-rec);
			}

				#page table.rec table.pseudo .random-container {
					position: absolute;
					top: 10px;
					right: 10px;
					text-align: right;
					font-size: 17px;
					font-weight: bold;
					color: var(--color-root-random-text);
					text-shadow: 0 0 9px var(--color-root-random-shadow);
				}

					#page table.rec table.cshelldb .random-container {
						left: 0;
						text-align: left;
					}

					#page table.rec .random-container span {
						font-size: 36px;
						color: var(--color-root-random-bigfont);
						line-height: 0;
					}

				#page table.rec table.pseudo:hover {
					background: none;
				}

				#page table.rec table.pseudo:hover:before {
					background-color: var(--color-root-bg-random);
					/*background: linear-gradient(to right, var(--color-bg-box), --color-root-bg-rec);*/
					opacity: 1.0;
				}

				/* Recommendations */
				#page table.rec td {
					position: relative;
					text-align: left;
					margin-bottom: 10px;
				}

				/* "Recommended Folder" */
				#page table.rec h3 {
					display: inline-block;
					margin: 0 0 7px 30px;
					font-size: 22px;
					line-height: 1.16em;
				}

				/* "J. Bjerregaard" */
				#page table.rec h4 {
					margin: 0;
					font-size: 19px;
				}

				/* "Jozz" */
				#page table.rec h5 {
					margin: 0;
					font-size: 16px;
				}
				
				#page table.rec .folder {
					position: absolute;
					top: -4px;
					left: -4px;
					width: 31px;
				}

				/* The double-note icon */
				#page table.rec img.icon {
					position: relative;
					top: 3px;
					height: 15px;
					margin-right: 5px;
				}

			#page table.root td.middle {
				text-align: left;
			}

			#page table.root label {
				position: relative;
				top: -2px;
				right: 6px;
				font: normal 13px/0 "Montserrat", sans-serif;
				color: var(--color-text-fine);
			}

			/* Additional styling for the top list dropdown boxes */
			.toplist,
			.toprows {
				margin-bottom: 4px;
				text-align: left;
				float: left;
				z-index: 2;
			}

			.toprows {
				float: right;
			}

		table.quicklinks {
			margin-bottom: 2em !important;
			padding: 8px 12px 10px 0 !important;
		}

			table.quicklinks th {
				padding: 0 0 6px 12px !important;
				width: 25%;
				font: normal 19px "Montserrat", sans-serif;
				border-right: 1px solid var(--color-table-border) !important;
				vertical-align: top;
			}

			table.quicklinks td {
				padding-left: 12px !important;
				padding-right: 12px !important;
				border-right: 1px solid var(--color-table-border) !important;
			}

				table.quicklinks th:last-child,
				table.quicklinks td:last-child {
					padding-right: 0 !important;
					border-right: 0 !important;
				}

		table.quickbox {
			min-width: 100%;
			margin: 0 10px 6px 0 !important;
			padding: 0 !important;
			/*border: 1px solid var(--color-table-border) !important;*/
		}

			table.quickbox td {
				border-right: 0 !important;
			}

				table.quickbox td:last-child {
					padding-left: 4px !important;
				}

			table.quickbox h4 {
				font-size: 17px !important;
			}

			table.quickbox h5 {
				font-size: 14px !important;
			}

			td.quickline {
				height: 6px;
				border-top: 1px dashed var(--color-table-border) !important;
			}

		.quickyear {
			float: right;
			position: relative;
			top: 4px;
			margin-right: 10px;
			font: normal 13px "Open Sans", helvetica, sans-serif;
			color: var(--color-text-minor);
		}

		#page .ext .quick-thumbnail {
			float: left;
			background: var(--color-avatar-bg) !important;
			width: 40px !important;
			height: 40px !important;
		}

		/* Container for group name in table list to have ellipsis on it */
		#page .ext .group,
		#page .ext .participant {
			display: inline-block;
			max-width: 195px;
			vertical-align: bottom;
		}

		#page .ext .participant {
			max-width: 250px;
		}

		/* Container for a sticky white top header box (used by e.g. the 'CSDb' tab) */
		#sticky-csdb,
		#sticky-gb64,
		#sticky-remix,
		#sticky-player,
		#sticky-stil,
		#sticky-visuals {
			display: none;
			position: relative;
			padding: 8px 10px;
			height: 51px;
			border: 1px solid var(--color-border-box);
			border-bottom: none;
			background: var(--color-bg-songs-buttons); /* url(../images/biglogo.png) -14px -2px / 890px no-repeat; */
			z-index: 3;
		}

			#sticky-visuals {
				overflow: visible;
			}

			#dropdown-visuals {
				position: absolute;
				top: 14px;
				left: 125px;
				font-size: 13px;
			}

			#sticky-visuals .visuals-buttons {
				position: absolute;
				top: 12px;
				left: 120px;
			}

				#sticky-visuals .visuals-buttons > button {
					height: 27px;
					width: 88px;
					padding: 0 6px;
					margin-right: 5px;
					line-height: 0;
					border-radius: 3px;
				}

				#sticky-visuals button:before {
					content: "";
					position: relative;
					top: 1px;
					width: 14px;
					height: 14px;
					padding-right: 20px;
					filter: var(--svg-filter-white);
				}
				
				#sticky-visuals .button-on {
					font-weight: bold;
				}

				#sticky-visuals .button-on:before {
					filter: var(--svg-filter-icon-visuals);
				}

				#sticky-visuals .icon-piano:before {
					background: url(../images/visuals_piano.svg) 0 0 / 14.5px 14.5px no-repeat;
				}

				#sticky-visuals .icon-graph:before {
					background: url(../images/visuals_graph.svg) 0 0 / 14px 14px no-repeat;
				}

				#sticky-visuals .icon-memory:before {
					background: url(../images/visuals_memory.svg) 0 -2.4px / 14px 19px no-repeat;
				}

				#sticky-visuals .icon-stats:before {
					background: url(../images/visuals_stats.svg) 0 -5px / 14.5px 24px no-repeat;
				}

		/* Container for buttons in the right side of the sticky white top header box */
		#sticky-right-buttons {
			width: 338px;
			position: absolute;
			top: 13px;
			right: 10px;
			text-align: right;
		}

			/* Resets the padding for the icon in the visual page selector buttons */
			#sticky-right-buttons button:before {
				padding: 0;
			}

			#memory-lc {
				display: none;
			}

			#visuals-toggle {
				float: left;
			}

		#page .ext .permalink,
		#sticky-csdb .permalink,
		#sticky-player .permalink,
		#path .permalink {
			width: 12px;
			height: 12px;
			fill: var(--color-timebar-border);
			margin: 0 0 2px 8px;
			cursor: pointer;
			transition: all .07s linear;
		}

			/* Permalink for search results */
			#path .permalink {
				position: relative;
				top: 0.5px;
				margin: 0 8px 0 5px;
			}

		.csdb-ellipsis {
			display: inline-block !important;
			margin: 0 0 -8px 0 !important;
			max-width: 710px !important;
		}

		.corner-icons {
			position: absolute;
			top: 12px;
			right: 14px;
			height: 24px;
			text-align: right;
		}

			#sticky-csdb .corner-icons {
				top: 12px;
				right: 14px;
			}

			.corner-icons svg {
				width: 24px;
				height: 24px;
				cursor: pointer;
				transition: all .07s linear;
			}

				.corner-icons .profile,
				.corner-icons .close {
					width: 23px;
					height: 23px;
					margin-right: 3px;
					fill: var(--color-timebar-border);
				}

				.corner-icons .close {
					position: relative;
					top: 1px;
				}

				.corner-icons .close:hover,
				.corner-icons .profile:hover,
				#page .ext .permalink:hover {
					fill: var(--color-text-minor);
				}

				.corner-icons .outlink {
					stroke: var(--color-timebar-border);
				}

				.corner-icons .outlink:hover {
					stroke: var(--color-text-minor);
				}

		/* Icons inline in text (typically in field with notable achievements) */
		#page .ext .inline-icon {
			position: relative;
			top: 3px;
			width: 15px;
			margin-right: 2px;
		}

		#page .ext .count {
			position: relative;
			top: -1px;
			margin-left: 6px;
			height: 16px;
			padding: 0 4px 0;
			font-size: 11px;
			line-height: none;
			background: transparent;
			border: 1px solid var(--color-timebar-border);
			border-radius: 3px;
			text-align: center;
		}

			#page .ext table.comments .count {
				font-size: 9px;
			}

		#page .ext table.comments,
		#page .ext table.releases {
			font-size: 14px;
			margin: 0;
			border-width: 1.5px;
		}

		#page .ext table.comments td {
			border-top-color: var(--color-border-comments);
		}

		#sticky-csdb img.arrow {
			position: relative;
			top: 2px;
			height: 22px;
			filter: var(--svg-filter-icon-sticky);
		}

		#sticky-csdb .topic-wrap {
			position: relative;
			top: 3px;
			display: inline-block;
			max-width: 416px;
		}

			#sticky-csdb .topic {
				width: 100%;
				line-height: 25px;
			}

			#sticky-csdb .topic-inner {
				display: block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}		

		#page .ext .oldest-in-top,
		#page .ext .post-count {
			float: right;
			position: relative;
			top: 24px;
			font-size: 11px;
		}

			#page .ext .oldest-in-top {
				color: var(--color-oldest-in-top);
			}

		#page .ext .zero-releases-line {
			border-top: 1px solid var(--color-border);
		}

		/* Used to emphasize handles or groups in a list of CSDb releases */
		#page .ext .emphasize {
			background: var(--color-emphasize);
		}

		/* Used to emphasize other groups in a list of CSDb releases */
		#page .ext .empSec {
			background: var(--color-empSec);
		}

		/* Used to emphasize the real name or handle of the scener in a list of CSDb releases */
		#page .ext .empThird {
			background: var(--color-empThird);
		}

		#page .ext .shared-all-comments {
			color: var(--color-text-minor);
		}

		#page .ext .forum-user-admin		{ color: var(--color-forum-admin); }
		#page .ext .forum-user-moderator	{ color: var(--color-forum-moderator); }
		#page .ext .forum-user-trusted		{ color: var(--color-forum-trusted); }
	
		#page .ext .forum-user-admin:hover,
		#page .ext .forum-user-moderator:hover,
		#page .ext .forum-user-trusted:hover {
			color: var(--color-anchor-hover);
		}
	
		#page .ext .user {
			position: relative;
			width: 170px;
			vertical-align: top;
			border-right-color: var(--color-border-comments);
			color: var(--color-text-minor);
		}

			#page .ext .user a {
				text-decoration: none;
			}

			#page .ext .date {
				position: relative;
				top: -4px;
				font-size: 11px;
				color: var(--color-text-player);
			}

				#page .ext .time {
					color: var(--color-text-time);
				}

			#page .ext .pm {
				position: absolute;
				top: auto;
				bottom: 6px;
				right: 6px;
			}

			/* Folder icon in comments that goes to his/her DeepSID folder */
			#page .ext .home-folder {
				position: absolute;
				top: auto;
				bottom: 6px;
				right: 32px;
				cursor: pointer;
			}

			#page .ext .avatar {
				/*position: absolute;
				top: auto;
				bottom: 6px;
				left: 6px;*/
				width: 57px;
				height: 57px;
				border: 0.5px solid var(--color-border);
				margin-bottom: -3px;
				background: var(--color-avatar-bg);
			}

		/* The table cell with the actual CSDb comment text */
		#page .ext .comment {
			vertical-align: top;
		}

			/* Used to encapsulate extremely long words and force them to wrap around */
			#page .ext .long {
				display: inline-block;
				overflow-wrap: break-word;
				word-wrap: break-word;
				word-break: break-all;
			}

		/* Table showing releases for a SID tune (CSDb type: "SID") */
		#page .ext table.releases {
			border-left: none;
			border-right: none;
			border-top: none;
			border-bottom: 1px solid var(--color-border);
			margin: 0;
		}

			#page .ext table.releases td {
				border-right: none;
				border-top: 1px solid var(--color-border);
				padding: 7px 0 2px;
			}

			#visuals-piano .piano {
				position: relative;
				width: 100%;
				height: 96px;
				transition: all .2s linear;
			}

			#visuals-memory .sid-info {
				float: left;
				height: 133px;
				width: 405px;
				padding: 8px 16px;
			}

				#visuals-memory .label,
				#visuals-memory .m {
					font: normal 13px "Montserrat", sans-serif;
				}

				#visuals-memory .label {
					display: inline-block;
					width: 130px;
				}

				#visuals-memory .si {
					font: normal 10px "Commodore 64", sans-serif;
				}

			#visuals-memory .sid-info-left {
				margin: 0 10px 10px 0;
			}

			#visuals-memory .sid-info-right {
				margin: 0 0 10px 0;
			}

			/* For a monitor-style output with a row of hexadecimal bytes and their PETSCII characters */
			#visuals-memory .monitor {
				font: normal 10px/12px "Commodore 64", sans-serif;
			}

				#block-memory {
					width: 820px;
				}

				#visuals-memory td.block-info {
					/*font: normal 15px "Asap Condensed", sans-serif;*/
					font: normal 13px "Open Sans", helvetica, sans-serif;
					vertical-align: top;
					padding: 4px 8px;
					width: 107px;
				}

					#visuals-memory .player-to-left {
						margin-top: 6px;
					}

					#visuals-memory td.block-info button {
						height: 24px;
					}

				#visuals-memory td.block-zp {
					height: 204px;
				}

				#visuals-memory td.block-data {
					padding: 6px 0 6px 10px;
					color: var(--color-text-block);
					background: var(--color-bg-block-data);
				}

				#visuals-memory .bt {
					color: var(--color-text-block-toggled);
				}

				/* Negative PETSCII character */
				#visuals-memory .n {
					color: var(--color-bg-box);
					background: var(--color-text-body);
				}

					#visuals-memory .bt.n {
						background: var(--color-text-block-toggled);
					}

				#visuals-memory .ch {
					color: var(--color-text-block-changed);
				}

					#visuals-memory .n.ch {
						color: var(--color-bg-box);
						background: var(--color-text-block-changed);
					}

				#visuals-memory .msg {
					font: normal 14px "Open Sans", helvetica, sans-serif;
					color: var(--color-text-subtle);
					margin: 12px 0;
					text-align: center;
				}

			#table-stats,
			#table-global-stats,
			#stats-notes p {
				font-size: 13px;
				font-family: "Asap Condensed", sans-serif;
			}

			#stats-notes {
				margin-left: 1px;
				padding: 2px 10px;
				width: 270px;
			}

			#table-stats button.stats-solo {
				position: relative;
				top: var(--top-button-solo);
				margin-left: 10px;
				width: 50px;
				height: var(--height-button-solo) !important;
				font-size: 10px !important;
				line-height: 10px !important;
				border-radius: 5px;
			}
	
			#table-global-stats {
				float: right;
				width: 66.7%;
				margin-top: -9px;
			}

				#table-stats th,
				#table-global-stats th {
					position: relative;
					width: 33%;
				}

				#table-global-stats td {
					width: 33%;
					vertical-align: top;
				}

				#table-stats div,
				#table-global-stats div {
					position: relative;
					color: var(--color-text-faint);
				}

				#table-stats .stats-used,
				#table-global-stats .stats-used {
					color: var(--color-text-body);
				}

					#table-stats .stats-used:after,
					#table-global-stats .stats-used:after {
						content: "\2714";
						float: right;
					}

				#table-stats span,
				#table-global-stats span {
					position: absolute;
					top: 10px;
					left: 190px;
					font: normal 10px/0 "Commodore 64", sans-serif;
				}

				#table-stats font,
				#table-global-stats font {
					display: block;
					position: relative;
					left: 30px; /* 16px */
					top: -1px;
					height: 12px;
					/*width: 12px;*/
					animation: fadeOut linear 300ms; /* 600ms */
					animation-fill-mode: forwards;
					/*background: url(../images/loading_threedots.svg) 0 0 / 40px 10px no-repeat;*/
					font: normal 13px/0 Arial, Helvetica, sans-serif;
					color: var(--color-text-block-changed);
				}

				#table-stats th font {
					top: -19.5px; /* -19.5px -27.5px */
					left: 22.5px;
					color: var(--color-text-body);
					font-weight: bold;
					font-size: 20px;
				}

					@keyframes fadeOut {
						from {
							opacity: 1;
						}

						to {
							color: var(--color-text-body);
							opacity: 0.15;
						}
					}

				#table-stats img {
					width: 16px;
				}

				#table-stats .stats-space,
				#table-global-stats .stats-space {
					margin-top: 8px;
				}

			#topic-csdb .thumbnail,
			#topic-player .thumbnail {
				width: 116px;
			}

			#topic-gb64 .thumbnail {
				text-align: right;
			}

				#page .ext .thumbnail img {
					width: 116px;
					height: 82px;
					border: 1px solid var(--color-border);
				}

				#topic-gb64 .thumbnail img {
					margin-left: 8px;
				}

				#zoomed {
					display: none;
					position: fixed;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 960px;
					z-index: 9999;
					image-rendering: pixelated;		/* To avoid a blurred image */
					image-rendering: crisp-edges;	/* For better browser compatibility */					
					cursor: pointer;					
				}

			#page .ext .info {
				position: relative;
				padding: 7px 0 0 6px !important;
				vertical-align: top;
				font-size: 12px;
			}

				#page .ext .name {
					font-size: 16px;
					font-weight: bold;
					text-decoration: none;
				}

				#page .ext .remix64-connect {
					position: relative;
					display: inline-block;
					width: 57px;
					height: 32px;
					padding: 2px;
					margin: 0;
					vertical-align: top;
				}

					#page .ext .action .down {
						display: none;
						position: absolute;
						bottom: var(--bottom-connect-down);
						left: 23px;
						width: 1px;
						height: 15px;
						border-left: 2px solid var(--color-table-border);
						z-index: 2;
					}

					#page .ext .remix64-connect .up {
						position: absolute;
						top: 6px;
						left: 23px;
						width: 5px;
						height: 8px;
						border-left: 2px solid var(--color-table-border);
						background: var(--color-bg-box);
						z-index: 2;
					}

					#page .ext .remix64-connect .right {
						position: absolute;
						top: 10px;
						right: -6px;
						width: 40px;
						height: 8px;
						border-left: 2px solid var(--color-table-border);
						border-bottom: 2px solid var(--color-table-border);
						border-radius: 8px;
					}

				/* Container for the audio element below */
				#page .ext .remix64-audio {
					position: relative;
					display: inline-block;
					padding: 2px;
					height: 32px; /* <AUDIO> height below + 4 */
					width: 753px;
					/*border: 0.5px solid #47a;*/
					background: #69c; /* General color of remix.kwed.org */
					border-radius: 2px;
					z-index: 2;
					pointer-events: auto;
				}

					/* Audio bar used in 'Remix' dexter tab
					   NOTE: The style of this element differs wildly across web browsers! */
					#page .ext audio {
						height: 28px;
						width: 538px;
					}

					/* Image for downloading from remix.kwed.org */
					#page .ext .remix64-audio img {
						height: 28px;
						margin-left: 8px;
					}

				#topic-remix .remix64-length {
					position: relative;
					top: -1px;
					margin-left: 6px;
					font-size: 11px;
					color: var(--color-text-player);
				}

			/* The <TD> containing the square play button for a remix */
			#topic-remix .action {
				position: relative;
				width: 53px;
				vertical-align: top;
			}

			#page .ext .remixer_badge {
				display: inline-block;
				width: 45px; 
				background: rgba(51, 136, 170, 0.7);
				color: var(--color-top);
				font-size: 75%;
				padding: 2px 0;
				margin: 0 1px;
				border-radius: 6px;
				text-align: center;
			}

				.badge_newcomer			{ background: rgba(71, 190, 51, 0.7) !important; }
				.badge_veteran_bronce	{ background: rgba(170, 136, 51, 0.7) !important; }
				.badge_veteran_silver	{ background: rgba(170, 170, 170, 0.7) !important; }
				.badge_veteran_gold		{ background: rgba(200, 180, 0, 0.8) !important; }

			#topic-remix h3 {
				position: relative;
			}

			/* The "Click a smiley to vote!" graphics */
			#page .ext .remix64-vote {
				position: absolute;
				top: 6px;
				right: 0;
				width: 179px;
				height: 50px;
				background: var(--url-vote) 0 0 / 177px 41px no-repeat;
				z-index: 2;
				pointer-events: none;
			}

			#page .ext .remix64-smiley {
				position: absolute;
				top: 8px;
				right: 0;
				font-size: 13px;
				pointer-events: auto;
			}

				#page .ext .remix64-smiley img {
					position: relative;
					top: 3px;
					width: 16px;
					height: 16px;
				}

			#page .ext .remix64-rank {
				position: absolute;
				top: 31px;
				right: 0;
				color: var(--color-text-player);
			}

			#page .ext .remix64-more td {
				border-top: none !important;
				margin: 0 !important;
				padding: 0 !important;
			}

				/* The container that may expand in height to show an <AUDIO> element */
				#page .ext .remix64-expander {
					overflow: hidden;
					height: 0;
					pointer-events: auto;
				}
	
			#page .ext .rdate,
			#page .ext .language,
			#page .ext .player-line {
				display: inline-block;
				position: relative;
				top: 19px;
				font-size: 11px;
				margin-right: 6px;
				color: var(--color-text-player);
			}

				#page .ext .player-right {
					float: right;
					top: 20px;
				}

					#page .ext .player-right:before {
						content: "";
						display: inline-block;
						position: relative;
						top: 1px;
						width: 10px;
						height: 10px;
						padding-right: 13px;
						background: url(../images/time.svg) 0 0 / 10px 10px no-repeat;
						filter: var(--svg-filter-icon-time);
					}

			#page .ext .language {
				left: 1px;
			}

				#page .ext .info .count {
					top: 18px;
					margin: 0 3px 0 0;
				}

					#page .ext .info .count a {
						text-decoration: none !important;
					}

				/* For dot between info */
				#page .player-line span {
					margin: 0 6px;
					color: var(--color-dot);
					font-size: 10px;
				}

			#page .ext .external {
				position: absolute;
				right: 20px;
				top: 31px;
			}

			#page .ext button,
			#sticky-csdb button,
			#sticky-gb64 button,
			#sticky-remix button,
			#sticky-player button,
			#sticky-right-buttons button {
				font-size: 11px;
				height: 21px;
				line-height: 22px;
			}

				#go-back,
				#go-back-init,
				#go-back-player,
				#go-back-gb64 {
					position: relative;
					top: -4px;
					margin-left: 10px;
				}

				#show-compo {
					position: relative;
					top: -1px;
					margin-left: 8px;
				}

				#csdb-comment {
					margin: 6px 6px 0 0;
				}

	#page .ext table.tight {
		width: auto !important;
		border: none;
		margin-bottom: 0;
	}

	#page .ext table.tight th,
	#page .ext table.tight td {
		border: none;
		padding: 0;
	}

		#page .ext .top td {
			vertical-align: top;
		}

		#page .ext .topline {
			padding-top: 6px !important;
			border-top: 1px solid var(--color-table-border) !important;
		}

		#page .ext .bottomline {
			padding-bottom: 8px !important;
			border-bottom: 1px solid var(--color-table-border) !important;
		}

		#page .ext .leftline {
			border-left: 1px solid var(--color-table-border) !important;
		}

		#page .ext .rightline {
			border-right: 1px solid var(--color-table-border) !important;
		}

		/* No CSDb profile | No game statics */
		#page .ext .nocounts {
			margin-top: 1px;
			font-size: 12px;
			line-height: 22px;
			color: var(--color-text-subtle);
			text-align: center;
		}

		#page .ext span.quote {
			display: block;
			font-weight: bold;
			font-size: 12px;
			margin: 6px 0 0 10px;
		}

		#page .ext div.quote {
			margin: 0 10px 11px;
			padding: 4px 8px;
			font-size: 12px;
			border: 1px solid var(--color-text-faint);
			border-radius: 2px;
			pointer-events: auto;
			/*background: var(--color-top);*/
		}

	#page .ext table.compo {
		width: 100% !important;
		margin: 0;
		padding: 6px;
		font-size: 13px;
		border: 1px solid var(--color-table-border);
	}

	#page .ext table.compo th,
	#page .ext table.compo td {
		border: none;
	}

	#page .ext table.compo th {
		padding-bottom: 4px;
		background: transparent;
	}

		#page .ext tr.compo-bold {
			font-weight: bold;
		}

		#page .ext td.compo-arrow {
			padding: 0 !important;
			padding-right: 2px !important;
		}

		#page .ext td.compo-place {
			text-align: right;
			padding-right: 12px !important;
			padding-bottom: 1px !important;
		}

		#page .ext td.compo-name {
			padding-right: 18px !important;
			padding-bottom: 1px !important;
		}

		#page .ext td.compo-path {
			padding-right: 10px !important;
			padding-bottom: 1px !important;
		}

	#page .legend {
		position: relative;
		top: -2px;
		display: inline-block;
		font-family: "Open Sans", helvetica, sans-serif;
		font-size: 12px;
		margin-left: 32px;
		color: var(--color-text-minor);
	}


	#csdb-releases {
		display: inline-block;
	}

	/* The drop-down box for how the list of CSDb releases is sorted */
	#csdb-sort {
		float: right;
		position: relative;
		top: 30px;
	}

		#csdb-sort label {
			font: normal 13px/0 "Montserrat", sans-serif;
			margin-right: 4px;
			color: var(--color-text-fine);
		}

		#dropdown-sort-csdb {
			font-size: 13px;
		}

	/* Container for GIF loading spinner IMG */
	#loading-profile,
	#loading-csdb,
	#loading-gb64,
	#loading-player,
	#loading-remix {
		position: relative;
		top: 235px;
		left: 370px;
	}

	#page .deepsid-iframe {
		display: none;
		border: 1px solid var(--color-text-dim);
		width: 100%;
	}

	/* For e.g. the information about JW's custom SID format for 4SID, 8SID, etc. */
	#page pre.fixed-font-info {
		color: var(--color-text-ffi);
		background: var(--color-bg-ffi);
		border: 1px solid var(--color-border);
		width: 100%;
		padding: 6px 10px;
		/*font: normal 14px "Courier New", serif;*/
		font-size: 14px;
		margin-top: 5px;
		white-space: pre-wrap;
		word-wrap: break-word;		
	}

	/* Small arrow up button in the bottom of CSDb pages (for scrolling back up) */
	.to-top {
		float: right;
		margin-top: 7px;
		padding: 0;
		line-height: 0 !important;
		width: 21px;
		height: 15px !important;
	}

		.to-top img {
			filter: var(--svg-filter-icon-to-top);
		}

	#topic-player .thumbnail-player,
	#topic-gb64 .thumbnail-gb64 {
		width: 100%;
		border: 1px solid var(--color-border);
		margin-bottom: 4px;
	}

	#topic-gb64 .thumbnail-gb64 {
		width: 320px;
	}

	#topic-player .thumbnail-player {
		cursor: pointer;
	}

	#topic-player .svg {
		float: left;
		height: 20px;
		width: 18px;
		margin-left: -2px;
	}

	#sticky-player .download-dot {
		margin: 0 6px;
		color: #8a8c7a;
		font-size: 10px;
	}

	#topic-player table.playerinfo {
		font-size: 12px;
		background: var(--color-bg-playerinfo);
		border-width: 1.5px;
	}

		#topic-player td.corner {
			font-size: 14px;
			font-style: italic;
			border-right: none !important;
		}

		#topic-player td.package	{ background: var(--color-player-package); }
		#topic-player td.features	{ background: var(--color-player-features); }
		#topic-player td.player		{ background: var(--color-player-player); }
		#topic-player td.editor		{ background: var(--color-player-editor); }

			#topic-player td.corner span {
				margin-left: 4px;
			}

		#topic-player table.playerinfo td {
			padding: 3.33px 8px;
			border-bottom: 0.5px solid var(--color-timebar-border);
		}

			#topic-player table.playerinfo tr:last-child td {
				border-bottom: none;
			}

	#topic-player table.playerinfo td:first-child {
		width: 175px;
		font-weight: bold;
		border-right: 0.5px solid var(--color-timebar-border);
	}

/* ---- Chartist.js --------------------------------------------------------- */

#ct-years .ct-horizontal {
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Custom Dialog Box --------------------------------------------------- */

#dialog-cover {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-dialog-cover);
	z-index: 9998;
	opacity: 0.7;
}

.dialog-box {
	display: none;
	position: relative;
	padding: 20px;
	background: var(--color-bg-box);
	border-radius: 2px;
	z-index: 10001;
	box-shadow: 1px 1px 10px var(--color-dialog-shadow);
}

	.dialog-box h2,
	.dialog-box h3 {
		margin-top: 0;
	}

	.dialog-box p {
		margin: 10px 0;
	}

	.dialog-box select {
		border: 1px solid var(--color-border-box);
	}

	.dialog-buttons {
		position: absolute;
		bottom: 20px;
		right: 20px;
	}

		.dialog-cancel {
			font-family: "Montserrat", sans-serif;
			font-weight: bold;
			font-size: 13px;
			font-size: 0.8125rem;
			letter-spacing: 0.5px;
			line-height: 2.4;
			text-transform: uppercase;
			text-decoration: none;
			margin-right: 8px;
		}

		.dialog-buttons button {
			width: 60px;
			margin-left: 6px;
		}

		.dialog-auto {
			width: auto !important;
		}

.dialog-label-top,
.dialog-new label,
.dialog-connect label,
.dialog-wizard label {
	font: normal 13px "Montserrat", sans-serif;
	color: var(--color-text-fine);
	margin-bottom: 4px;
}

#dialog-all-tags,
#dialog-song-tags,
#dialog-list-start-tag,
#dialog-list-end-tag {
	font-size: 14px;
	width: 136px;
}

#dialog-all-tags {
	height: 320px;
}

#dialog-song-tags {
	float: right;
	max-height: 115px;
}

.dialog-transfer {
	position: absolute;
	top: 120px;
	left: 168px;
	height: 308px;
}

	/* The "<" and ">" buttons */
	.dialog-transfer button,
	.dialog-new button,
	.block-info button {
		padding: 0;
		height: 24px;
		fill: currentColor;
	}

		.dialog-new button {
			width: 24px;
		}

		.dialog-transfer-tag {
			margin: 8px 0 0 5.5px;
			width: 43px;
		}

			.dialog-transfer-tag img {
				position: relative;
				top: -2px;
				left: -1px;
				height: 13px;
				filter: var(--svg-filter-white);
				pointer-events: none;
			}

		#dialog-tags-magic-wand {
			margin-top: 116px;
		}

			#dialog-tags-magic-wand img {
				height: 15px;
			}

	.dialog-new,
	.dialog-connect {
		position: relative;
		top: -201px;
		float: right;
		width: 136px;
	}

		.dialog-connect {
			clear: right;
			top: -190px;
		}

	#new-tag {
		font-size: 14px;
		width: 108px;
		height: 24px;
	}

	.top-right-corner {
		position: absolute;
		top: 22.5px;
		right: 20px;
		color: var(--color-text-subtle);
	}

	table.sid-info {
		font-size: 13px;
		margin-bottom: 0;
	}

		table.sid-info td:first-child {
			font-weight: bold;
			width: 1px;
			white-space: nowrap;
		}

		table.sid-info td {
			padding: 2px 6px;
		}

	/* The drop-down box in choose subtune dialog boxes */
	#ev-dd-subtune,
	#ev-dd2-subtune {
		font-size: 13px;
	}

	/* The drop-down box in upload wizard */
	#dropdown-upload-profile {
		width: 100%;
		font-size: 13px;
		margin-bottom: 10px;
	}

	#dialog-upload-wiz3 .url {
		font-size: 13px;
	}

	#dialog-upload-wiz3 label {
		width: 1000px !important;
	}

	#dialog-upload-wiz3 form {
		display: inline-block;
		margin-bottom: 10px;
	}

		/* Edit box */
		#upload-csdb-id,
		#upload-lengths-list,
		#form-upload-file input {
			height: 21px;
			font-size: 13px;
		}

			#form-upload-file input {
				position: relative;
				top: 2px;
				float: right;
				width: 265px;
			}

			#upload-csdb-id {
				width: 54px;
			}

			#form-lengths,
			#upload-lengths-list,
			#form-upload-file {
				width: 100%;
			}
			
			#form-upload-file {
				margin: 16px 0 18px;
			}

	#dialog-upload-wiz5 textarea {
		height: 170px;
		width: 100%;
		font-size: 13px;
		resize: none;
		padding: 2px 6px;
	}

		/* Edit box for year in edit file dialog box */
		#form-edit-file input,
		#dialog-add-clink form input {
			float: right;
			position: relative;
			top: 4px;
			font-size: 14px;
			width: 255px;
			height: 24px;
		}

			#dialog-add-clink form input {
				width: 285px;
			}

		#form-edit-file label,
		#dialog-add-clink form label {
			display: inline-block;
			font: normal 15px "Montserrat", sans-serif;
			width: 86px;
			color: var(--color-text-fine);
			margin: 5px 4px 5px 0;
		}

			#dialog-add-clink form label {
				width: 56px;
			}

		#dialog-delete-clink .clink-text {
			width: 460px;
			font-size: 13px;
			color: var(--color-text-resp-bad);
		}

		#annex .clink-corner-link {
			position: absolute;
			top: 37.5px;
			right: 17px;
			font-size: 11px;
		}

		#dialog-edit-videos small {
			position: absolute;
			top: 43px;
			right: 24px;
			font-size: 10px;
			color: var(--color-text-minor);
		}

		#dialog-edit-videos fieldset {
			padding: 10px 0 20px 10px;
			font: normal 13px "Montserrat", sans-serif;
		}

			#dialog-edit-videos fieldset div {
				float: left;
				/*background: #faa;*/
				height: 100%;
				margin-left: 12px;
			}

				#dialog-edit-videos div.ev-channel {
					width: 200px;
				}

				#dialog-edit-videos div.ev-video {
					width: 120px;
				}

			#dialog-edit-videos fieldset span {
				display: block;
				height: 24px;
				margin-bottom: 2px;
				/*background: #aaf;*/
			}

				#dialog-edit-videos div.ev-tabs span,
				#dialog-edit-videos div.ev-default span {
					padding-top: 2px;
					padding-left: 4px;
					text-align: center;
				}

				#dialog-edit-videos div.ev-tabs span:first-child,
				#dialog-edit-videos div.ev-default span:first-child {
					padding-top: 0;
					padding-left: 0;
				}

				#dialog-edit-videos div.ev-channel input {
					height: 21px;
					width: 165px;
					font-size: 14px;
				}

				#dialog-edit-videos div.ev-video input {
					height: 21px;
					width: 100%;
					font-size: 14px;
				}

			#dialog-edit-videos div.ev-channel button,
			#dialog-edit-videos div.ev-position button {
				height: 21px;
				width: 30px;
				padding: 1px 0 0 0;
				line-height: 11px;
				font-size: 12px;
			}

			#dialog-edit-videos div.ev-channel button {
				width: 24px;
			}

			#dialog-edit-videos img {
				pointer-events: none;
			}

		#ev-dd2 {
			position: relative;
			left: 5px;
			margin-top: 45px;
		}

			#ev-dd2 select.disabled {
				color: var(--color-disabled);
				border-color: var(--color-disabled);
				background: transparent;
			}

/* ---- Annex Area  --------------------------------------------------------- */

#annex {
	overflow: hidden;
	position: absolute;
	top: 36.5px;
	left: 1320px;
	width: 250px;
	height: calc(100% - 48px);
}

	.annex-tabs {
		width: 100%;
	}

	#annex-tips {
		clear: left;
		overflow: auto;
		position: relative;
		top: -1px;
		padding: 10px;
		max-height: calc(100% - 21px);
		font-size: 14px;
		line-height: 1.35em;
		border: 1px solid var(--color-border-box);
		border-radius: 1px;
		background: var(--color-bg-box);
		z-index: 2;
	}

	#annex-tips b,
	.annex-tiny {
		font-family: "Asap Condensed", sans-serif;
	}

		#annex-tips h1,
		#annex-tips h2,
		#annex-tips h3,
		#annex-tips h4 {
			position: relative;
			left: -1px;
			margin-top: 0;
			margin-bottom: 0.5em;
		}

		#annex-tips h4 {
			font-size: 17px;
			margin-top: 1.1em;
		}

		#annex-tips h3 + h4 {
			margin-top: 0.8em;
		}

		#annex-tips p {
			margin-top: 0.6em;
			margin-bottom: 0.6em;
		}

		#annex-tips ul,
		#annex-tips ol {
			margin-top: 0.8em;
			margin-bottom: 0.8em;
			padding: 0 6px 0 30px;
		}

			#annex-tips ul > li,
			#annex-tips ol > li {
				line-height: 1.2em;
			}

		#annex-tips img {
			border: 1px solid var(--color-border-info);
			margin-bottom: 4px;
		}

		.annex-close,
		.annex-topics {
			position: absolute;
			filter: var(--svg-filter-close);
			opacity: 0.75;
			cursor: pointer;
			z-index: 3;
		}

			.annex-close:hover,
			.annex-topics:hover {
				opacity: 1;
			}

		.annex-close {
			top: 5.5px;
			right: 6px;
			width: 10px;
			height: 10px;
			background: url(../images/close.svg) 0 0 / 10px 10px no-repeat;
		}

		.annex-topics {
			display: none;
			top: 36px;
			right: 16px;
			width: 20px;
			height: 20px;
			background: url(../images/topics.svg) 0 0 / 20px 20px no-repeat;
		}

	.annex-strip {
		display: inline-block;
		height: 20px;
		width: 125px;
		margin-bottom: 6px;
	}

		.annex-strip:before {
			content: "";
			clear: left;
			float: left;
			width: 3px;
			height: 20px;
			margin: 0 5px 0 10px;
			border-radius: 1px;
		}

		.annex-a:before { background: var(--color-strip-pl-a); }
		.annex-b:before { background: var(--color-strip-pl-b); }
		.annex-c:before { background: var(--color-strip-pl-c); }
		.annex-d:before { background: var(--color-strip-pl-d); }
		.annex-e:before { background: var(--color-strip-pl-e); }
		.annex-f:before { background: var(--color-strip-pl-f); }

	.annex-hotkey {
		display: inline-block;
		width: 95px;
		font-weight: bold;
		margin-left: 10px;
		font-family: "Asap Condensed", sans-serif;
	}

	.annex-tags-list {
		list-style-type: none;
	}

		.annex-tags-list .tag {
			position: relative;
			top: -2px;
			margin-left: -20px;
			margin-right: 6px;		
		}

		.annex-tags-list p {
			font-size: 13px;
		}

	.annex-table {
		font-family: "Asap Condensed", sans-serif;
	}

		.annex-table td:first-child {
			font-weight: bold;
			vertical-align: top;
		}

		.annex-table td {
			padding: 2px 6px;
		}

		.annex-table ul {
			margin: 0.6em !important;
			padding-left: 12px !important;
		}

			.annex-table li {
				margin: 0.2em;
			}

	.annex-link:after {
		content: "";
		position: relative;
		top: 2px;
		left: 2px;
		padding-right: 18px;
		background: url(../images/composer_arrowright.svg) 0 0 / 18px 18px no-repeat;
		filter: var(--svg-filter-icon-bottom);
		margin-right: 2px;
	}

/* ---- Styled Select ------------------------------------------------------- */

/* Used to make the original select hidden but still functional */
.s-hidden {
	visibility: hidden;
	padding-right: 10px;
}

/* When an <LI> option needs a 16x16 icon */
.s-icon {
	position: relative;
	float: left;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	margin-right: 4px;
}

/* Also extended for the original drop-down box */
.select {
	position: relative;
	cursor: pointer;
	display: inline-block;
	font: normal 13px/1.44em "Open Sans", helvetica, sans-serif;
	color: var(--color-styled-select-text);
	height: 20px;
	border: 1px solid var(--color-styled-select-border);
	border-radius: 1px;
	background: var(--color-styled-select-bg);
}

/* Inside the new styled select */
.styledSelect {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 6px;
	border-radius: 1px;
	background: var(--color-styled-select-bg);
}

/* The small arrow symbol */
.styledSelect:after {
	content: "";
	position: absolute;
	top: 7px;
	right: 6px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-color: var(--color-styled-arrow) transparent transparent transparent;
}

/* The small arrow symbol when the drop-down box is disabled */
.select .disabled:after {
	border-color: var(--color-styled-arrow-disabled) transparent transparent transparent;
}

/* When the select box is clicked and thus unfolded */
.styledSelect:active, .styledSelect.active {
	background: var(--color-styled-active-bg);
}

/* The drop-down panel itself */
.options {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--color-styled-select-border);
	background: var(--color-styled-select-bg);
	max-height: 250px; /* 221px */
	overflow-y: none;
	line-height: 1.75em;
	box-shadow: 0 1px 2px var(--color-styled-shadow);
}

	.options li {
		height: 22px;
		padding: 0 6px;
		margin: 0;
	}

	.options li.disabled {
		color: var(--color-styled-item-disabled) !important;	
	}

	/* Adds a dotted line */
	.s-line {
		padding-bottom: 1px;
		border-bottom: 1px dotted var(--color-styled-dotted-line);
	}