* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	overflow: hidden;
}

.container {
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

.main {
	overflow: auto;
}

.footer {
	background-color:#C0A985;
	color:white;
	place-items: center;
}

.footer p {
	margin-top: 0;
	font-size: 75%;
}

nav {
	background-color:#C0A985;
}

nav a {
	color: #4F614B;
	font-weight: 900;
	font-size: 1em;
	margin-left: 10px;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

button.btn {
	border: 1px solid #ccc;
	background-color: #E2EFDA;
	font-size: 16px;
	width: 10em;
}

table.DataTable {
	border-collapse: collapse;
}

table.DataTable thead {
	position: sticky;
	top: 0;
	background-color: #4F614B;
	z-index: 1;
}

table.DataTable th {
	background-color: #4F614B;
	color: white;
	text-align: center;
}

table.DataTable tbody tr:nth-child(odd) {
	background-color: #E2EFDA;
}

table.DataTable tr:hover td {
	background-color: lightyellow;
}

table.DataTable th, td {
	border: 1px solid black;
	text-align: left;
}

table.DataTable th.align-right, td.align-right {
	text-align: right;
}

/* Color original del enlace */
a.table:link {
	color: white; 
	text-decoration: none; /* Elimina el subrayado por defecto */
}

/* Enlace que ya ha sido visitado */
a.table:visited {
	color: white;
}

/* Cuando el cursor pasa por encima del enlace */
a.table:hover {
	color: blue;
	text-decoration: underline;
}

/* Color original del enlace */
a.body:link {
	color: blue; 
	text-decoration: none; /* Elimina el subrayado por defecto */
}

/* Enlace que ya ha sido visitado */
a.body:visited {
	color: blue;
}

/* Cuando el cursor pasa por encima del enlace */
a.body:hover {
	color: blue;
	text-decoration: underline;
}

/* Style the link container */
.preview-link {
	position: relative;
	text-decoration: none;
	color: blue;
}

/* Hide the image initially */
.preview-img {
	display: none;
	position: absolute;
	top: 20px; /* Positions preview below the link */
	left: 20px;
	width: 400px; /* Adjustable preview size */
	border: 1px solid #ccc;
	z-index: 10;
}

/* Show the image on hover */
.preview-link:hover .preview-img {
	display: block;
}

/* Hide on desktop/large screens */
.mobile-only {
	display: none;
}

/* Show on screens 768px or smaller */
@media screen and (max-width: 900px) {
	.mobile-only {
		display: block;
	}
}