/* =========================================
   LIVE PAGE
========================================= */

.live-page{
	width:min(1470px,92vw);
	margin:30px auto 30px;
}

.live-date-separator{
	grid-column:1 / -1;
	margin:24px 0 4px;
	font-size:20px;
	font-weight:900;
	color:#ffcc33;
}

.rating-load-more{
	display:flex;
	align-items:center;
	justify-content:center;

	width:max-content;
	min-width:190px;
	height:44px;

	margin:24px auto 0;
	padding:0 24px;

	border:0;
	border-radius:10px;

	background:rgba(255,255,255,.035);

	color:#fff;
	font-size:14px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.25px;

	cursor:pointer;
	transition:.18s ease;
}

.rating-load-more:hover{
	background:rgba(255,255,255,.07);
	color:#ffc400;
}

.rating-load-more.is-loading{
	opacity:.55;
	pointer-events:none;
}
.live-tab-content{
	display:none;
}

.live-tab-content.active{
	display:block;
}

.ratings-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	margin-bottom:28px;
}

.ratings-top__left{
	min-width:0;
}

.ratings-top__left h3{
	margin:0;
	color:#fff;
	font-size:36px;
	font-weight:1000;
	text-transform:uppercase;
	line-height:1;
}

.ratings-top__left span{
	display:block;
	margin-top:8px;
	color:#888;
	font-size:14px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.06em;
}

.ratings-tabs{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	flex-wrap:wrap;
	margin-left:auto;
}

.ratings-tab{
	height:46px;
	padding:0 20px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:14px;
	background:rgba(255,255,255,.04);
	color:#fff;
	font-size:13px;
	font-weight:1000;
	text-transform:uppercase;
	cursor:pointer;
	transition:.18s ease;
}

.ratings-tab:hover{
	background:rgba(255,255,255,.08);
}

.ratings-tab.active{
	background:
		linear-gradient(
			180deg,
			#ffd34a,
			#ffb300
		);

	color:#111;

	border-color:rgba(255,196,0,.65);

	box-shadow:
		0 10px 24px rgba(255,179,0,.22);
}

.live-tab-content{
	display:none;
}

.live-tab-content.active{
	display:block;
}

@media(max-width:760px){

	.ratings-top{
		flex-direction:column;
		align-items:flex-start;
	}

	.ratings-tabs{
		width:100%;
		justify-content:flex-start;
	}

}


.live-page-panel{
	padding:26px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:24px;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.045),
			rgba(255,255,255,.018)
		);
	box-shadow:0 24px 60px rgba(0,0,0,.35);
}

.live-page-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	margin-top:24px;
}

.live-page-card{
	min-height:170px;
}

/* =========================================
   PAGINATION
========================================= */

.live-page-pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin-top:28px;
}

.live-page-pagination a,
.live-page-pagination span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	min-width:120px;
	padding:0 18px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:12px;
	background:rgba(255,255,255,.04);
	color:#fff;
	font-size:13px;
	font-weight:900;
	text-transform:uppercase;
}

.live-page-pagination span{
	opacity:.35;
}

.live-page-pagination strong{
	color:#ffc400;
	font-size:15px;
	font-weight:1000;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

	.live-page-grid{
		grid-template-columns:repeat(3,1fr);
	}

}

@media(max-width:900px){

	.live-page-grid{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:760px){

.live-page {
	margin: 20px auto 30px!important;
}

.live-page-panel{
	padding:20px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:18px;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.045),
			rgba(255,255,255,.018)
		);
	box-shadow:0 24px 60px rgba(0,0,0,.35);
}

.ratings-top__left h3 {
	font-size: 20px;
}

.ratings-top__left span {
	display: block;
	margin-top: 8px;
	font-size: 10px;
}

.ratings-tab {
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 10px;
}

.live-page-card {
	min-height: 100px;
}

	.live-page-grid{
		grid-template-columns:1fr;
		gap:10px;
	}

	.live-page-pagination{
		flex-wrap:wrap;
		justify-content: space-between;
	}

}