/* MAIN */
body {
	font-family: 'Inter', sans-serif;
	background: #f8f9fa;
	user-select: none;
	text-align: left;
	margin: 0;
	padding: 0;
}

/* TABLE */
table {
	width: 100%;
	border-collapse: collapse;
}

.a {
	text-align: left;
}

.b {
	text-align: center;
}

.c {
	text-align: right;
}

.g {
	border: 1px solid silver;
	text-align: left;
}

/* Hover effect on all rows */
table.listing tr:hover {
	background: #ced3d8;
}

/* Zebra striping only on rows with class .trcl */
table.listing tr.trcl:nth-child(even) {
	background-color: #c4ccca;
}

table.listing tr.trcl:nth-child(odd) {
	background-color: #ebedef;
}

/* Override hover on striped rows */
table.listing tr.trcl:nth-child(even):hover,
table.listing tr.trcl:nth-child(odd):hover {
	background-color: #ced3d8;
}

table.listing .bghigh {
	background: red;
}

table.listing .bghigh:hover {
	background: #FF7F7F;
}
/* TABLE END */

hr {
	border: 1px solid black;
}

/* CLRS */
.cb {
	color: blue;
}

.cr {
	color: red;
}

a {
	color: blue;
	text-decoration: none;
}

a:hover {
	color: blue;
	text-decoration: underline;
}

a:active {
	color: black;
	text-decoration: none;
}

/* IMG */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* CODE & SELECTION */
code {
	user-select: all;
	color: black;
	background: silver;
	padding: 3px;
}

::selection {
	color: white;
	background: gray;
}

/* IMAGE SIZES */
.s-img {
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.l-img {
	max-height: 30px;
	width: auto;
}

/* RESPONSIVE WRAPPER */
.responsive-table-wrapper {
	overflow-x: auto;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	table {
		font-size: 14px;
	}

	.s-img {
		width: 32px;
		height: 32px;
	}

	.l-img {
		max-height: 24px;
	}

	code {
		word-break: break-word;
	}

	/* Optional: make tables scrollable horizontally on small screens */
	.listing {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}
}