/* top table */
table {
	width: 99%;
	max-width: 560px;
	border-collapse: collapse;
	margin: 5px auto;
	font-size: 1em;
}

.speed {
	font-family: "Courier New", Consolas, "Liberation Mono", monospace;
	font-size: 1em;

}

th, td {
	padding: 10px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: top;
}

th {
	background-color: #f2f2f2;
	font-weight: bold;
	color: #2c3e50;
}

tr:nth-child(even) {
	background-color: #f9f9f9;
}

table th[colspan] {
	font-size: 1.1em;
	font-weight: bold;
	padding: 12px;
	background-color: white;
	border-bottom: 2px solid #d3d3d3;
	text-align: center;
}

/* dropdown table */
.steno-dropdown {
	margin: 20px 0;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 10px;
}

.steno-dropdown summary {
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	user-select: none;
	transition: background-color 0.2s;
}

.steno-dropdown summary:hover {
	background-color: #f5f5f5;
	border-radius: 4px;
}

.steno-dropdown[open] summary {
	margin-bottom: 15px;
}

.steno-table {
	width: 95%;
	max-width: 500px;  /* Add a max-width */
	border-collapse: collapse;
	margin: 10px auto;  /* Center it */
}


.steno-table th,
.steno-table td {
	border: 1px solid #ddd;
	padding: 10px;
	text-align: left;
	word-break: break-all;
	overflow-wrap: break-word;
}

.steno-table th {
	background-color: #f9f9f9;
	font-weight: bold;
}

.steno-table tbody td {
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.steno-table tbody td:hover {
	background-color: #bad0ff;
}

.download-link {
	font-weight: bold;
	text-decoration: none;
	color: #1a3a7a;
	transition: color 0.2s ease;
}

.download-link:hover {
	color: #4a9eff;
}