.streamer-col{
	display:flex;
	width:fit-content;
	background:#000;
	padding:1rem;
	gap:10px;
}

iframe{
	border:none;
}
#live_list{
	background:#232323;
	padding:10px 0;
}


.page-title-inner{
	padding:0;
}

.loading{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:500px;
}

#live_list .item{
	display:inline-block;
	width: calc(33% - 10px);
/* 	padding:5px 10px; */
/* 	background:linear-gradient(97deg, #32373800 61.58%, #00ff5e0d), #292d2e; */
	background:linear-gradient(97deg, #00000045 61.58%, #00ff5e05), url(/wp-content/plugins/live-vsbet/assets/bg-match.webp);
	background-position:center;
	border-radius:5px;
	color:#afafaf;
	margin:0 5px;
	margin-bottom:.5rem;
	overflow:hidden;
	  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.2);
}

#live_list a{
	color:#afafaf;
}

/* #live_list .item:hover{
	transform:scale(1.04);
  transition: transform 0.3s ease;
} */

#live_list .competition{
	background:#000;
	padding:5px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#live_list .competition img{
	width:20px;
	height:20px;
	object-fit: contain;
	margin-right:5px;
}

#live_list .league{
	width:250px;
	font-weight:bold;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

#live_list .matchStatus{
	font-size:10px;
}

#live_list .matchTime{
	text-align:center;
	font-size:12px;
	margin:5px 0;
}

#live_list .live{
	background:#a20000;
	color:#fff;
	padding:0 3px;
	font-weight:600;
}

#live_list .notStart{
/* 	background:linear-gradient(97.93deg, #118c2e 6.42%, #0f6901 95.04%); */
/* 	color:#fff; */
/* 	font-weight:600; */
/* 	padding:0 3px; */
	color:#ffaf17;
	
}

#live_list .end{
	color:#ff3f3f;
	text-transform:uppercase;
}

#live_list .match_info{
	display:flex;
	justify-content:space-evenly;
	border-bottom: 1px solid #ffffff26;
	padding: 5px 10px;
	
}

#live_list .score{
	width:60px;
	text-align:center;
	font-size:18px;
	font-weight:700;
	
}

#live_list .home, #live_list .away{
	width:calc(50% - 30px);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-weight:700;
	color:#dadada;
	text-align:center;
}

#live_list .home img, #live_list .away img{
	display:block;
	width:30px;
	height:30px;
	margin:0 auto;
	object-fit:contain;
}
/* #live_list .home{
	text-align:right;
} */

#live_list .streamer{
	margin-bottom:.2rem;
/* 	background:#32373880 */
}

#live_list .streamer .info{
	display:inline-block;
	font-size:12px;
/* 	margin:0 5px; */
	padding:2px 5px;
	color:#fff;
	background:linear-gradient(220deg, #00711b 7.37%, #00691a 57.22%, #005b16 66.05%, #2dbf1b 131.67%);
	border-radius:5px;
}

#live_list .streamer .info:hover{
background:#ffaf17
}

#live_list .streamer img{
	margin-right: 5px;
}

.shine {
  position: relative;
  overflow: hidden;
  display: inline-block;

/*   padding: 12px 24px; */
  background: #111;
  color: #fff;
  border-radius: 8px;
}

/* lớp bóng */
.shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transform: skewX(-20deg);
}

/* khi hover thì chạy */
.shine:hover::before {
  left: 150%;
  transition: 0.8s;
}

#live_list .watch{
	display:block;
	text-align:center;
	background:linear-gradient(220deg, #00711b1c 7.37%, #00691a54 57.22%, #005b1694 66.05%, #2dbf1b4a 131.67%);
	color:#fff;
	font-weight:700;
	padding:5px 0;
}

#day_filter{
	display:flex;
	align-items:center;
}

#day_filter div{
	background:#323738;
	margin-bottom:1rem;
	margin-right:10px;
	border-radius:25px;
	padding:5px 15px;
	color:#fff;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#day_filter div img{
	margin-right:5px;
}

#day_filter div.active{
	background:linear-gradient(270deg, #323839, #2f5a49);
}

#day_filter div span{
	background: #464f50;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 38px;
  width: 22px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 11px;
  line-height: 14px;
  padding: 2px 6px;
	margin-left:10px;
}

#sport_filter{
	display:flex;
	align-items:center;
	justify-content: center;
}

#sport_filter div{
	cursor:pointer;
	background:#323738;
	background-size: cover;
  color: #fff;
  font-size: 14px;
  font-family: Barlow;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 20px;
  word-wrap: break-word;
  text-shadow: 0 .92px 3.678px rgba(0, 0, 0, .24);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 115px;
  outline: 0;
  border-radius: 7px;
  border: none;
  height: 44px;
  padding: 9.778px 14.667px;
  align-items: center;
  gap: 7.333px;
	margin:1rem 0;
	margin-right:10px;
}

#sport_filter div:hover, #sport_filter div.active{
	color: #00FFFD;
  background: linear-gradient(270deg, #323839, #2f5a49);
  border: none;
  font-weight: 700;
}

.empty{
	height:300px;
	display:flex;
	justify-content:center;
	align-items:center
}

.streamer_list a{
	display:inline-block;
	background:linear-gradient(180deg, #0B540B 0%, #069B3C 169.23%);
	color:#fff;
	padding:5px 10px;
	border-radius:5px;
	margin:10px 0;
	margin-right:5px;
}

.streamer_list img{
	margin-right:5px;
}

.matchHeader{
	background:url('/wp-content/plugins/live-vsbet/assets/match-header.svg') center no-repeat;
	background-size:cover;
	border-radius:5px;
	height:120px;
	width:80%;
	margin:auto;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border: 2px solid #e97b1c38;
}

.matchHeader .teams{
	display:flex;
	justify-content:space-evenly;
	align-items:center;
}

.matchHeader .teams img{
	display:block;
	margin:auto;
}

#liveTop .league{
	text-align:center;
	margin-bottom: 1rem;
}

.matchHeader .league img{
	margin-right:5px;
	background:#fff;
}


video{
	height:600px;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 1s infinite;
}

#chat_messages{
	height:430px;
	overflow-y:scroll;
}

.pinned-message-btn{
	padding:2px 5px!important;
	font-size:12px;
	
}

.chatContainer{
	position:relative;
}

#close-user-info-popup{
	padding:0!important;
	margin:0!important;
	font-family:normal;
	font-size:30px!important;
	font-weight:700;
	text-shadow:0px 0px 1px #000;
	top:-10px!important;
	right:20px!important;
}

.chat-links{
	display:flex;
}

#scroll_down_button{
	min-height:inherit;
}

.chat-col{
	padding-left:0px;
}

div#pinned-messages {
  scrollbar-width: thin !important;
  scrollbar-color: #555 #1a1a1a !important;
}

.container-live{
	height:fit-content;
}
.lineup-wrapper .team{
	width:100%;
	height:250px;
}

.lineup-wrapper h3{
	background:#000;
	text-align:center;
}

.lineup-wrapper .name{
	font-size:12px;
	white-space:nowrap;
}

.lineup {
  display: flex;
  flex-direction: column;
  gap: 2px;
/*   background: green; */
/*   padding: 10px; */
/*   border-radius: 10px; */
}

.line {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.player {
  text-align: center;
  color: white;
  font-size: 12px;
	width:60px;
}

.player img{
	width:30px;
	height:30px;
	object-fit:cover;
}

.player .number{
	background:#000;
	font-size:10px;
}


@media (max-width:1024px){
	.chat-col{
		padding: 0 15px 30px;
	}
	
	.matchHeader{
		width:100%;	
		height:100px
	}
	
	.matchHeader .league{
		font-size:10px;
	}
	.matchHeader .league img{
		width:25px;
	}
	
	.matchHeader .teams #home, .matchHeader .teams #away{
		text-align:center;
		font-size:12px
	}
	
	.matchHeader .teams img{
		width:20px;
		height:20px;
		object-fit:cover;
	}
	.matchHeader #score .score{
		font-size:14px;
		min-width:20px;
		margin-right:5px
	}
	
	.matchHeader .score-separator{
		display:none;
	}
	
	.streamer_list a{
		font-size:12px;
		padding:5px;
	}
	
	#chat_messages{
		height:300px;
	}
	
	.simulate{
		height:300px;
	}
	
	#live_list .item{
		width:100%;
	}
	
	.filterWrapper{
		width:100%;
		overflow:auto;
	}
	
	#day_filter{
		width:max-content;
		overflow:autol
	}
	
	#day_filter div{
		font-size:13px;
		width:170px;
	}
	
	.container .section, .row .section{
		padding:0!important;
	}
	.title-content{
		display:none;
	}
}

@media(min-width:700px) and (max-width:1024px){
	.login-button, .info-button{
		font-size:11px;
	}
	
	.chat-col{
		padding-left:0;
	}
	.chat-welcome-title{
		display:none;
	}
	#welcome-message{
		font-size:10px;
	}
	
	.chat-input{
		padding:0!important;
		font-size:12px;
	}
	
}