html {
	scrollbar-gutter: stable;
}

body {
	color: white;
	padding: 0;
	margin: 1em;
	font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: bold;
	background: #555;
}

.rounded {
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
	background-color: #5455ED;
	box-shadow: 0.1em 0.1em 0.15em #000;
}

.link {
	color:blue;
	cursor: pointer;
}

.bgInfo {
	background-color: #000 !important;
}
.bgArchive {
	background-color: #a80 !important;
}
.bgMSX {
	background-color: #11a !important;
}
.bgKCS {
	background-color: #63d !important;
}
.bgData {
	background-color: #900 !important;
}
.bgGroup {
	background-color: #C95BBA !important;
}
.bgOther {
	background-color: #555 !important;
}
.bgEmpty {
	background-color: transparent !important;
}

.mono {
	font-family: 'Roboto Mono', sans-serif !important;
}

/* https://danklammer.com/articles/simple-css-toggle-switch/ */
.toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 50px;
	height: 18px;
	display: table-cell;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	outline: none;
	border: none;
	cursor: pointer;
	color: #fff;
	background-color: #66d;
	transition: background-color ease 0.3s;
}
.toggle:before {
	content: "on off";
	position: absolute;
	z-index: 2;
	width: 15px;
	height: 15px;
	display: table-cell;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	font: 10px/16px Helvetica;
	text-transform: uppercase;
	font-weight: bold;
	text-indent: -22px;
	word-spacing: 27px;
	color: #fff;
	background-color: #fff;
	text-shadow: -1px -1px rgba(0,0,0,0.15);
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
	background-color: #660;
}
.toggle:checked:before {
	left: 32px;
}
.toggle:disabled {
	cursor: not-allowed;
	filter: brightness(85%);
	opacity: 0.5;
}
#title .container, #footer, #sections, #count, #list {
	border-collapse: collapse;
	border-radius: 10px;
	overflow: hidden;
	background: #5455ED;
	box-shadow: 0.1em 0.1em 0.15em #000;

	padding: 10px 10px;
	margin: 10px 0;
}

#main {
	max-width: 1200px;
	margin: 0 auto;
}

#title {
	* div {
		color: white;
		text-align: left;
	}
	.container {
		display: flex;
		flex-flow: row;
		padding: 0;
		margin: 0;
	}
	.left {
		flex: 0;
		background-color: black;
		white-space: nowrap;
		display:flex;
		align-items: center;
		img {
			width: 200px;
		}
	}
	.right {
		flex: 1;
		padding: 5px 10px;
		display:flex;
		align-items: center;
	}
	.line1 {
		font-size: 250%;
	}
	.line2 {
		font-size: 100%;
		color: #ddd
	}
	.line3 {
		font-size: 80%;
		color: #ddd
	}
	.torrent {
		flex-grow: 0;
		white-space: nowrap;
		padding: 10px 10px 0 0;
		text-align: right;
	}
	.torrent img {
		border-radius: 10px !important;
	}
	.counter {
		flex-grow: 0;
		white-space: nowrap;
		padding: 10px 10px 0 0;
		text-align: right;
	}
	.counter a {
		display: inline-block;
		background: #120080;
		border-radius: 5px;
		line-height: 0;
	}
	.counter img {
		opacity: 0;
		transition: opacity 0.25s ease-in;
	}
	.counter img.loaded {
		opacity: 1;
	}
}

#sections {
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-bottom: 5px;

	* {
		font-size: 100%;
	}

	div {
		margin: 5px;
		vertical-align: top;
	}

	div small {
		font-size: 86%;

		a {
			font-size: 86%;
			color: yellow;
		}
	}

	.files a {
		color: yellow;
	}

	.section_title {
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 115% !important;
		color: yellow;

		border-collapse: collapse;
		border-radius: 6px;
		overflow: hidden;
		padding: 3px;

		div {	/* circle */
			width: 15px !important;
			height: 15px !important;
			border-radius: 50% !important;
			background-color: white !important;
			display: inline-block;
			margin-right: 10px;
		}
	}
	.section_title:hover {
		background-color: rgba(255, 255, 255, 0.3);	/* Ajusta la opacidad para aclarar */
	}

	.section_content {
		display: none;
		margin-top: 10px;
	}

	.imgtools {
		width: 64px;
		padding-right: 10px;
		vertical-align: top;
	}

	#emulators {
		flex-grow:1;
		background-color: #228;
		min-width: 14%;
		padding: 10px;
		vertical-align: top;
		margin-bottom: 10px;
	}

	#tutorials {
		flex-grow:1;
		background-color: #00c;
		min-width: 8%;
		padding: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	#tsxsvi {
		flex-grow:1;
		background-color: #363;
		min-width: 10%;
		padding: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	#tapeplayers {
		flex-grow:1;
		background-color: #666;
		min-width: 10%;
		padding: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	#tsxtools {
		flex-grow:1;
		background-color: #500;
		min-width: 10%;
		padding: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	#last_25 {
		flex-grow:1;
		background-color: black;
		min-width: 90%;
		padding: 10px;
		margin-bottom: 10px;
	}

}

#count {
	.count {
		display: inline-block;
		text-align: center;
		padding: 0 20px;
	}
	.torrent_mobile img {
		display: none;
	}
}

#tab_index {
	display: flex; 
	flex-direction: row;
	flex-wrap: nowrap;

	.tab {
		white-space: nowrap;
		cursor: pointer;
		flex-grow: 1;
		text-align: center;
		display: inline-block;
		max-width: 5%;
		vertical-align: middle;
		text-decoration: none;
		margin-left: 0.25em;
		margin-right: 0.25em;
		padding: 0.5em;
		color: black;
		background: yellow;
		border-collapse: collapse;
		border-radius: 8px;
		overflow: hidden;
	}
	.tab.on {
		color: black;
		background: yellow;
	}
	.tab.off {
		color:yellow;
		background: #228;
	}
	.tab.off:hover {
		background-color: rgba(255, 255, 255, 0.3);	/* Ajusta la opacidad para aclarar */
	}

}

#data-container {
	padding: 0 3px;
}

#loading {
	display: none;
	text-align: center;
	padding: 20px;
	font-size: 140%;
}

#list {

	.tsx_item {
		display: flex; 
		background-color: #22b;
		padding: 10px;
		overflow: hidden;
		border-radius: 15px;
		box-shadow: 0.1em 0.1em 0.15em #000;
		margin-top: 10px;
	}

	.left {
		flex-grow: 0;
		display: inline-block;
		vertical-align: top;
	}

	.right {
		flex-grow: 1;
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
	}

	.info_rounded {
		overflow: hidden;
		border-radius: 8px;
		border-collapse: collapse;
	}

	.divimage {
		width: 192px;
		height: 144px;
		position: relative;
		margin-bottom: 0.5em;
	}
	.divimage .image::before {
		content: ' ';
		position: absolute;
		width: 192px;
		height: 144px;
		background-image: url('/tsx-images/0.png');
		background-size: contain;
		background-position: center;
	}
	.divimage .image {
		width: 192px;
		height: 144px;
		object-fit: cover;
	}
	
	.namesize {
		display: flex; 
		background-color: #00006b;
		padding: 10px;
		margin-bottom: 6px !important;
	}
	.namesize .name {
		flex-grow: 1;
		padding-top: 2px;
	}
	.namesize .name a {
		color: yellow;
		font-size: 115%;
	}
	.namesize .size {
		flex-grow: 1;
		color: white;
		font-size: 115%;
		text-align: right;
		padding-top: 2px;
	}

	.hashes {
		background-color: #444;
		margin-bottom: 6px !important;
	}
	.hash_container {
		display: flex;
		flex-direction: row;
	}
	.hash_container * {
		font-size: 100%;
	}
	.hash_container .hashtitle {
		flex-grow: 0;
		min-width: 80px;
		background-color: black;
		padding: 5px 0 5px 10px;
	}
	.hash_container .hash {
		display: inline-block;
		vertical-align: middle;
		background-color: #009;
		padding: 4px 10px;
	}
	.hash:nth-child(1) { flex: 0.25; }
	.hash:nth-child(2) { flex: 0.5; }
	.hash:nth-child(3) { flex: 1; }
	.hash .type {
		font-size: 86%;
		border-radius: 10px !important;
		display: inline-block;
		background-color: yellow;
		color: black;
		padding: 1px 8px;
		margin: 0 5px;
	}
	.hash .value {
		display: inline-block;
		font-size: 86%;
	}

	.blocks {
		font-size: 100%;
		padding: 0.55em 0.62em;
		background-color: #444;
	}
	.blocks_title {
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 115% !important;
		color: yellow;

		border-collapse: collapse;
		border-radius: 6px;
		overflow: hidden;
		padding: 3px;

		div {	/* circle */
			width: 15px !important;
			height: 15px !important;
			border-radius: 50% !important;
			background-color: white !important;
			display: inline-block;
			margin-right: 10px;
		}
	}
	.blocks_title:hover {
		background-color: rgba(255, 255, 255, 0.2);	/* Ajusta la opacidad para aclarar */
	}
	.blocks_content {
		margin-top: 10px;
		display: none;
	}
	.blocks_content .block {
		display: flex;
		border-collapse: collapse;
		overflow: hidden;
		margin-top: 2px;
	}
	.block:first-child { border-radius: 8px 8px 0 0; }
	.block:last-child { border-radius: 0 0 8px 8px; }

	.block .number {
		flex-grow: 0;
		display: inline-block;
		min-width: 3%;
		padding: 0.5em;
		margin-right: 2px;
		text-align: center;
		vertical-align: top;
		color: white;
		background: gray;
	}
	.block .info {
		flex-grow: 1;
		color: white;
		vertical-align: middle;
	}
	.block .info .type {
		padding: 8px 0 2px 10px;
	}
	.block .info .content {
		font-size: 72%;
		padding: 3px 5px 5px 20px;
	}
	.block .info .content .block_hash {
		display: inline-block;
		vertical-align: middle;
		margin-top: 5px;
	}
	.block_hash .bhtype {
		border-radius: 6px !important;
		display: inline-block;
		background-color: yellow;
		color: black;
		padding: 0 8px !important;
		margin: 0 10px 0 0;
		text-align: center;
	}
	.block_hash .bhvalue {
		display: inline-block;
		font-size: 86%;
		margin-right: 15px;
	}
	.block_hash .value:nth-child(1) { flex: 0.25; }
	.block_hash .value:nth-child(2) { flex: 0.5; }
	.block_hash .value:nth-child(3) { flex: 1; }

	/* Bubbles */
	.burbuja_container {
		max-width: 192px;
		padding-bottom: 0;
	}
	.burbuja {
		position: relative;
		display: inline-block;
		font-size: 100%;
		font-weight: normal;
		min-width: 1em;
		text-align: center;
		border-radius: 6px;
		color: white;
		background-color: black;
		padding: 0.15em 0.35em;
		margin: 0 0.45em 0.15em 0;
		cursor: help;
		text-shadow: 0 0 0;
	}
	.burb_red {
		color: white;
		background-color: red;
	}
	.burb_yellow {
		color: black;
		background-color: yellow;
	}
	.burb_green {
		color: black;
		background-color: #0d0;
	}
	.burb_lightblue {
		color: white;
		background-color: #88f;
	}
	.burb_blue {
		color: white;
		background-color: #228;
	}
}

.zoomed {
	transform: scale(3);
	position: absolute;
}


/* Tooltips text */
.tooltip_parent .tooltip {
	visibility: hidden;
	min-width: 120px;
	background-color: black;
	color: white;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px yellow solid;
	font-size: 100%;
	text-align: left;
	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 50%;
	left: 50%;
	margin-left: 10px;
	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}
/* Show the tooltip text when you mouse over the tooltip parent */
.tooltip_parent:hover .tooltip {
	visibility: visible;
	opacity: 1;
}


.svg-container {
	float: right;
	position: relative;
	margin-left: 10px;
}

.svg-image {
	display: inline-block;
}

.svg-image:hover {
	filter: invert(1); /* Invertir colores al pasar el cursor */
}

#player_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: none;
	justify-content: center;
	align-items: center;

	#player_window {
		position: relative;
		border-collapse: collapse;
		border-radius: 10px;
		overflow: hidden;
		width: 350px;
		height: 350px;
		padding: 20px;
		background-color: #a6a4a4;
		box-shadow: 0.2em 0.2em 0.75em #000;
	}

	#tape_loading {
		position: absolute;
		display: flex;
		z-index: 999;
		top: 35%;
		left: 35%;
	}

	.player_top {
		display: flex;
	}

	.counter_container {
		display: flex;
		margin-left: 12px;
		margin-bottom: 5px;
	}
	.counter_num {
		display: flex;
		width: 10px;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-family: 'Roboto Mono', sans-serif !important;
		font-size: 12px;
		color: white;
		background-color: black;
		padding: 1px;
		margin: 0;
		border-bottom: 1px #fff solid;
		border-right: 1px #ddd solid;
	}
	.counter_separator {
		display: table-cell;
		min-width: 5px;
		text-align: center;
		font-family: 'Roboto Mono', sans-serif !important;
		font-size: 12px;
		color: black;
		padding: 1px 0;
		margin: 0;
	}

	.turbo_container {
		flex-grow: 2;
		display: flex;
		align-items: right;
		justify-content: right;
		padding: 0;
		margin-right: 10px;
		margin-bottom: 5px;
		color: black;
	}
	.turbo_container * {
		top: -2px;
	}
	.turbo_label {
		display: table-cell;
		padding-top: 3px;
		padding-right: 5px;
	}

	.loading_container {
		width: 100px;
		height: 100px;
		border-collapse: collapse;
		border-radius: 10px;
		overflow: hidden;
		background-color: #444;
		box-shadow: 0.1em 0.1em 0.25em #000;
		align-content: center;
		text-align: center;
	}

	#player_buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-top: 5px;
		padding-top: 1px;
		background-color: #444;
		border-collapse: collapse;
		border-radius: 0 0 8px 8px;
		overflow: hidden;
	}

	.button {
		flex-grow: 1;
		min-width: 64px;
		display: block;
		cursor: pointer;
		padding: 5px 0 0 0;
		margin-left: 1px;
		margin-right: 1px;
		font-size: 14px;
		color: white;
		background-color: #111;
		border-collapse: collapse;
		border-radius: 0 0 8px 8px;
		overflow: hidden;
	}

	.button_img {
		width: 75%;
		height: 75%;
	}

	.button:disabled {
		cursor: default;
		background-color: #444;
		opacity: 0.5;
	}

	.button:disabled .button_img{
		filter: opacity(0.5);
	}

	#tape_decoration {
		min-height: 100%;
		background-color: #821f1c;
		color: white;
		font-size: 14px;
		margin: 10px auto 0 auto;
		padding: 10px;

		div {
			float: right;
		}
	}

	#tape_image {
		position: relative;
		height: 175px;

		.tape_bg {
			position: absolute;
		}

		.tape_gear {
			position: absolute;
			z-index: 1;
		}
		#tape_gear1 {
			left: 87px;
			top: 85px;
		}
		#tape_gear2 {
			left: 223px;
			top: 85px;
		}

		#tape_label {
			position: absolute;
			max-width: 260px;
			max-height: 32px;
			top: 30px;
			left: 48px;
			font-family: 'Courier New','Courier','Lucida Sans Typewriter','Lucida Typewriter','monospace' ;
			font-size: 14px;
			font-weight: bold;
			color: white;
			overflow: hidden;
		}
	}

}

#footer {
}

/* ============================================================
   MOBILE OVERRIDES (≤1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {

	#main {
		max-width: none;
	}

	#title {
		.left {
			img {
				width: 100px !important;
			}
		}
		.line1 {
			font-size: 200%;
		}
		.line3 {
			white-space: wrap;
		}
		.torrent {
			display: none;
		}
		.counter {
			display: none;
		}
	}

	#sections {
		flex-direction: column;
		align-items: normal;

		.section_title {
			padding: 5px;
		}

		#emulators {
			min-width: unset;
			padding: 5px;
			margin-left: 0;
		}

		#tutorials {
			min-width: unset;
			padding: 5px;
			margin-left: 0;
		}

		#tsxsvi {
			min-width: unset;
			padding: 5px;
			margin-left: 0;
		}

		#tapeplayers {
			min-width: unset;
			padding: 5px;
			margin-left: 0;
		}

		#tsxtools {
			min-width: unset;
			padding: 5px;
			margin-left: 0;
		}

		#last_25 {
			min-width: unset;
			padding: 5px;
		}
	}

	#count {
		.count {
			font-size: 115%;
		}
		.torrent_mobile img {
			display: unset;
			border-radius: 10px !important;
			float: right;
			position: relative;
			z-index: 100;
			top: 0;
			right: 0;
		}
	}

	#tab_index {
		flex-wrap: wrap;

		.tab {
			margin: 0 0.25em 0.25em 0.25em;
			padding: 0.8em;
		}
	}

	#list {
		.tsx_item {
			flex-flow: column;
		}

		.right {
			margin-left: 0;
		}

		.divimage {
			width: 100%;
			height: auto;
		}
		.divimage .image::before {
			width: 100%;
			height: auto;
		}
		.divimage .image {
			width: 100%;
			height: auto;
		}

		.namesize .name {
			padding-top: unset;
		}
		.namesize .size {
			display: none;
			padding-top: unset;
		}

		.hashes {
			display: none;
		}

		.hash_container .hash {
			background-color: #00c;
		}

		.hash .type {
			font-size: unset;
		}

		.blocks {
			font-size: 115%;
		}

		.block .number {
			min-width: 16px;
		}

		.block .info .content {
			font-size: 86%;
		}

		.block .info .content .block_hash {
			display: none;
		}

		.burbuja_container {
			max-width: unset;
			padding-bottom: 5px;
		}

		.burbuja {
			font-size: 16px;
		}
	}

}