/* Tables */

table {
	display: table;
	font-size: 14px;
	border-collapse: collapse;
	width: 100%;
	text-align: left;
  font-weight: normal;
  overflow-x: auto;
  // Responsive tables
  @media screen and (max-width: 800px) {
		display: block;
	}
	a {
		color: $color-accent-dark;
	}
	thead {
		color: $color-grey-54;
		a {
			color: $color-grey-54;
			&:hover {

			}
		}
		th {
			padding: 16px 0;
		}
	}
	th {
		font-weight: 400;
	}
	tr {
		border-bottom: 1px solid #e6e6e6;
	}
	td {
		padding: 16px 0;
		vertical-align: middle;
	}
	.action {
		text-align: right;
		.btn {
			margin: -4px 0;
		}
	}
}


/* Table - Leaderboard */

table.leaderboard {
	margin-top: 35px;
	@media screen and (max-width: 800px) {
		margin-top: 31px;
	}
	@media screen and (max-width: 640px) {
		margin-top: 27px;
	}
	td {
		padding-right: 4px;
	}
	td:last-of-type {
		padding-right: 0;
	}
	.change {
		width: 24px;
	}
	.participant {
		img {
			@media screen and (max-width: 640px) {
				display: none;
			}
		}
	}
	.video {
		width: 120px;
		@media screen and (max-width: 560px) {
			display: none;
		}
	}
	.entries {
		@media screen and (max-width: 800px) {
			display: none;
		}
	}
	.post-challenge {
		@media screen and (max-width: 640px) {
			display: none;
		}
	}
	.last-submission {
		text-align: right;
		@media screen and (max-width: 1024px) {
			display: none;
		}
	}
	// Add to first position & user's own submission(s)
	tr.highlight {
		font-weight: 700;
		.badge {
			font-weight: 500;
		}
	}
}

/* Table - Submissions */

table.submissions {
	margin-top: 16px;
	border-top: 1px solid #e6e6e6;
	@media screen and (max-width: 800px) {
		margin-top: 31px;
	}
	@media screen and (max-width: 640px) {
		margin-top: 27px;
	}
	th,
	td {
		padding-right: 12px;
		vertical-align: top;
	}
	th:last-of-type,
	td:last-of-type {
		padding-right: 0;
	}
	th.id,
	td.id {
		font-weight: 500;
	}
	td.participant {
		a {
			&:hover {
				border-bottom: 1px solid $color-accent-dark;
			}
		}
	}
	th.status {
		min-width: 96px;
	}
	td.description {
		min-width: 220px;
	}
	th.submission,
	td.submission {
		text-align: right;
	}

}

/* Load more bar */

td.load-more {
	padding: 0;
	border-top: none;
}
