@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

$primary: #007bff;
$success: #28a745;
$warning: #ffc107;
$danger: #dc3545;

body {
	background: #f9f9f9;
	font-family: "Roboto", sans-serif;
}

.main-content {
	padding-top: 100px;
	padding-bottom: 100px;
}

.leaderboard-card {
	background: #fff;
	margin-bottom: 30px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	&.leaderboard-card--first {
		transform: scale(1.05);
		.leaderboard-card__top {
			background: linear-gradient(45deg, #7e57c2, #ab47bc);
			color: #fff;
		}
	}
	&__top {
		background: #f9f6ff;
		padding: 20px 0 30px 0;
	}
	&__body {
		padding: 15px;
		margin-top: -40px;
	}
}

img.circle-img {
	height: 70px;
	width: 70px;
	border-radius: 70px;
	border: 3px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	&.circle-img--small {
		height: 55px;
		width: 55px;
		border-radius: 55px;
	}
}

.table {
	border-spacing: 0 15px;
	border-collapse: separate;
	thead,
	tbody {
		tr {
			th,
			td {
				vertical-align: middle;
				border: none;
				&:nth-last-child(1) {
					text-align: center;
				}
			}
		}
	}
	tbody {
		tr {
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			td {
				background: #fff;
				&:nth-child(1) {
					border-radius: 5px 0 0 5px;
				}
				&:nth-last-child(1) {
					border-radius: 0 5px 5px 0;
				}
			}
		}
	}
}
