:root {
	--tmr-bootstrap-border-color: #dee2e6;
	--tmr-white: #eee;
	--tmr-table-header: #54667a;
	--tmr-row-divider-color: #3490dc;
	--tmr-stripped-row-background-color: rgba(0, 0, 0, 0.05);
}

/*-- ==============================================================
 Screen smaller than 760px and iPads.
 ============================================================== */

#num {
	background-color: #f1ca4e;
	color: #000;
	border-radius: 50%;
	font-weight: bolder;
	/* width: 1rem; */
	padding: 10px 20px 10px 20px;
	/* padding-top: .5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem; */
	box-shadow: 3px 4px 10px #ccc;

}

#gold {
	/* background-color: #c9b037; */
	color: black;
	font-weight: bolder;
	border-radius: 50px;
	padding-top: .5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	/* box-shadow: 0 0 10px #ccc; */
	display: flex;
	justify-content: center;
	align-items: center;
}

#silver {
	/* background-color: #c0c0c0; */
	color: black;
	font-weight: bold;
	border-radius: 50px;
	padding-top: .5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	/* box-shadow: 0 0 10px #ccc; */
	display: flex;
	justify-content: center;
	align-items: center;
}

#bronze {
	/* background-color: #6a3805; */
	color: #000;
	font-weight: bold;
	border-radius: 50px;
	padding-top: .5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	/* box-shadow: 0 0 10px #ccc; */
	display: flex;
	justify-content: center;
	align-items: center;
}


#total {
	background-color: #00154b;
	/* background: linear-gradient(50deg, #c9b037, #c0c0c0, #6a3805); */
	/* background: linear-gradient(45deg,
			#c9b037 0%,
			#c0c0c0 50%,
			#6a3805 100%

		);
	animation: gradientAnimation 5s infinite; */
	color: white;
	border-radius: 50px;
	padding-top: .5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	box-shadow: 0 0 10px #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes gradientAnimation {

	0%,
	100% {
		background-position: 0% 50%;
		/* Start position of the gradient */
	}

	25% {
		background-position: 100% 50%;
		/* Move to the end position of the gradient */
	}

	75% {
		background-position: 0% 50%;
		/* Move back to the start position of the gradient */
	}
}

table {
	border-radius: 20px;
}

@media only screen and (max-width: 800px) {




	/* Force table to not be like tables anymore */
	.no-more-tables table,
	.no-more-tables thead,
	.no-more-tables tbody,
	.no-more-tables th,
	.no-more-tables td,
	.no-more-tables tr {
		display: block;
		align-items: center;
		justify-content: center;
		align-self: baseline;
		margin-top: 10px;


	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.no-more-tables tr {
		border: 1px solid #cccccc90;
		border-radius: 20px;
	}



	.no-more-tables td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align: left;
	}

	.no-more-tables td:last-child {
		border: none;
	}

	.no-more-tables td:first-child {
		font-size: 21px;
		color: #00154b;
		text-shadow: 2px 4px 6px #54667a;
	}

	.no-more-tables td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;

	}

	/*
	Label the data
	*/
	.no-more-tables td:before {
		content: attr(data-title);
		display: flex;
		padding-top: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: .5rem;

	}
}

@media only screen and (max-width:520px) {
	.no-more-tables {
		font-size: small;
	}

	.btn {
		font-size: small;
		border-radius: 20px;
	}
}