.bg-primary {
    background-color: #16325B !important;
}
.bg-secondary {
    background-color: #ffdc7f !important;
}
.text-primary {
    color: #16325B !important;
}
.text-secondary {
    color: #C4CBCC  !important;
}
.residue {
	display: inline-block;
	width: 25px;
	padding: 10px;
	margin: 2px;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	color: white;
}
/* Background colors based on secondary structure */
.H { background-color: #ff4d6d; } /* Red */
.E { background-color: #ffc600; } /* Blue */
.L { background-color: #6c757d; } /* Green */
.B { background-color: #3a0ca3; } /* Red */
.I { background-color: #4361ee; } /* Blue */
.G { background-color: #403d39; } /* Green */
.T { background-color: #eb5e28; } /* Blue */
.S { background-color: #a7c957; } /* Green */
#tooltip {
	position: absolute;
	display: none;
	background-color: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 8px;
	border-radius: 5px;
	font-size: 14px;
	z-index: 1050;
	pointer-events: none; /* Ensures the tooltip does not block mouse events */
}
#sequence-container {
	display: flex;
	flex-wrap: wrap;
	max-width: calc(60 * 30px); /* Limit row to 60 residues */
	margin: auto;
}
.color-box {
	display: inline-block;
	width: 25px;
	padding: 10px;
	margin: 2px;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
}