/* Ultra Lightweight CSS - Sederhana tapi Modern */
	
	html,
	body {
		margin: 0;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		color: white;
		font-family: 'Teko', sans-serif;
	}
	
	#main-content {
		display: flex;
		width: 100%;
		height: 100%;
	}
	
	.video-container {
		flex: 1;
		background-color: #000;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.video-wrapper {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		height: 0;
	}
	
	.video-wrapper iframe,
	.video-wrapper img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	#player {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		display: none;
	}
	/* ===== CHANNEL CARD - Simple but Modern ===== */
	
	.channel-container {
		display: flex;
		align-items: center;
		background: rgba(15, 23, 42, 0.95);
		padding: 10px;
		border-radius: 4px;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 2px;
		border: 1px solid rgba(15, 147, 134, 0.3);
		transition: all 0.2s ease;
	}
	
	.channel-container:hover,
	.channel-container.selected {
		background: rgba(20, 30, 55, 0.95);
		border: 1px solid #ccc;
		border-bottom: 3px solid #ccc/*rgb(0 222 255 / 35%)*/
		!important;
	}
	
	.logo-container {
		flex-shrink: 0;
		width: 80px;
		height: 55px;
		border-radius: 4px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		border: 1px solid rgba(15, 147, 134, 0.2);
	}
	
	.logo {
		max-width: 100%;
		max-height: 100%;
	}
	
	.info-container {
		margin-left: 10px;
	}
	
	.channel-name {
		margin: 0;
		font-size: 16px;
		font-weight: bold;
		color: white;
	}
	
	.status {
		margin: 0;
		font-size: 14px;
		color: #0f9386;
	}
	
	.countdown-wrapper {
		position: absolute;
		width: 100%;
		backdrop-filter: blur(1.6px);
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 1.3em;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 22%;
		border-radius: 10px;
	}
	
	.countdown-match {
		font-weight: bold;
	}
	
	.countdown-league {
		font-size: 1em !important;
		margin-bottom: 10px;
		font-weight: 400;
	}
	
	.countdown-title {
		margin-bottom: 10px;
		font-weight: 300;
	}
	
	.countdown-titles {
		display: none;
		font-size: 0.9em;
		letter-spacing: 3px;
		margin-top: 10px;
	}
	
	.countdown-timer {
		letter-spacing: 5px;
		font-size: 2em;
		font-weight: 600;
		line-height: 0.1;
		margin-top: 20px;
	}
	
	.sidebar {
		z-index: 2;
		flex: 0 0 400px;
		background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
		padding: 0;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	/* ===== MENU TOP ===== */
	
	.menu-wrapper-top {
		background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
		padding: 0;
		border-bottom: 1px solid rgb(15, 147, 134);
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
	}
	
	.dropdown {
		position: relative;
		flex: 1;
	}
	
	.dropdown .menu-button {
		font-size: 13px;
		background: transparent;
		color: rgba(255, 255, 255, 0.95);
		text-align: center;
		font-family: 'Teko', sans-serif;
		padding: 10px;
		cursor: pointer;
		border-radius: 0;
		position: relative;
	}
	
	.dropdown .menu-button::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 2px;
		background: rgba(255, 255, 255, 0.9);
		transition: width 0.2s ease;
	}
	
	.dropdown .menu-button:hover::after {
		width: 70%;
	}
	
	.dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -5px;
		background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
		width: 110%;
		z-index: 200;
		font-family: 'Teko', sans-serif;
		border-radius: 0 0 4px 4px;
		overflow: hidden;
		border: 1px solid rgba(148, 163, 184, 0.2);
		border-top: none;
	}
	
	.dropdown-menu div {
		display: flex;
		justify-content: space-between;
		padding: 5px;
		font-size: 14px;
		background: transparent;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		border: 2px solid rgba(148, 163, 184, 0.1);
		cursor: pointer;
		transition: background 0.2s ease;
	}
	
	.dropdown-menu div:hover {
		background: rgba(71, 85, 105, 0.4);
		border-color: rgba(148, 163, 184, 0.3);
	}
	/* ===== REFRESH BUTTON ===== */
	
	#live-event {
		position: relative;
	}
	
	#refresh-button {
		position: fixed;
		bottom: 50px;
		right: 25px;
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		color: white;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
		border: 1px solid rgba(20, 180, 165, 0.5);
	}
	
	#refresh-button:hover {
		background: linear-gradient(135deg, rgba(15, 147, 134, .7) 0%, rgba(22, 222, 201, .5) 100%);
		transform: scale(1.05);
	}
	
	#refresh-button i {
		font-size: 24px;
	}
	
	#refresh-button:focus,
	#refresh-button:active {
		outline: none;
	}
	/* Tombol floating search */
	
	#searchToggle {
		position: fixed;
		bottom: 110px;
		right: 25px;
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		color: white;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
		border: 1px solid rgba(20, 180, 165, 0.5);
	}
	
	#searchToggle:hover {
		background: linear-gradient(135deg, rgba(15, 147, 134, .7) 0%, rgba(22, 222, 201, .5) 100%);
		transform: scale(1.05);
	}
	
	#searchToggle i {
		font-size: 24px;
	}
	
	#searchToggle:focus,
	#searchToggle:active {
		outline: none;
	}
	/* ===== MENU BOTTOM ===== */
	
	.menu-wrapper-bottom .telegram-button {
		background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
	}
	
	.menu-wrapper-bottom .telegram-button:hover {
		background: linear-gradient(135deg, #229ED9 0%, #229ED9 100%);
	}
	
	.menu-wrapper-bottom .whatsapp-button {
		background: linear-gradient(135deg, #475569 0%, #334155 100%);
	}
	
	.menu-wrapper-bottom .whatsapp-button:hover {
		background: linear-gradient(135deg, #047857 0%, #059669 100%);
	}
	
	.menu-wrapper-bottom .revideo-button {
		background: linear-gradient(135deg, rgb(17, 79, 73) 0%, rgb(23, 103, 105) 100%);
	}
	
	.menu-wrapper-bottom .revideo-button:hover {
		background: linear-gradient(135deg, #475569 0%, #334155 100%);
	}
	
	.menu-wrapper-bottom .menu-button {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		color: rgba(255, 255, 255, 0.95);
		border: none;
		cursor: pointer;
		transition: all 0.2s ease;
		margin: 0;
		border-left: 1px solid rgba(0, 0, 0, 0.3);
		font-family: 'Teko', sans-serif;
	}
	
	.menu-wrapper-bottom .menu-button:first-child {
		border-left: none;
	}
	
	.menu-wrapper-bottom .menu-button i {
		margin-right: 8px;
	}
	
	.menu-container {
		display: flex;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	/* ===== MENU BUTTON TOP ===== */
	
	.menu-button {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.95);
		border: 1px solid transparent;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
		cursor: pointer;
		transition: all 0.2s ease;
		margin: 0;
		font-family: 'Teko', sans-serif;
		position: relative;
	}
	
	.menu-button::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 2px;
		background: rgba(255, 255, 255, 0.9);
		transition: width 0.2s ease;
	}
	
	.menu-button:hover {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.menu-button:hover::after {
		width: 70%;
	}
	
	.sidebar-content {
		flex-grow: 1;
		padding: 2px;
		display: none;
		overflow-y: auto;
		background: repeating-linear-gradient(45deg, #0000 calc(-650%/13) calc(50%/13), #0f1129 0 calc(100%/13), #0000 0 calc(150%/13), #0f1129 0 calc(200%/13), #0000 0 calc(250%/13), #0f1129 0 calc(300%/13)), repeating-linear-gradient(45deg, #0000 calc(-650%/13) calc(50%/13), #0f1129 0 calc(100%/13), #0000 0 calc(150%/13), #0f1129 0 calc(200%/13), #0000 0 calc(250%/13), #0f1129 0 calc(300%/13)) 32px 32px, repeating-linear-gradient(-45deg, #0000 calc(-650%/13) calc(50%/13), #0f1129 0 calc(100%/13), #0000 0 calc(150%/13), #0f1129 0 calc(200%/13), #0000 0 calc(250%/13), #0f1129 0 calc(300%/13)), repeating-linear-gradient(-45deg, #0000 calc(-650%/13) calc(50%/13), #0f1129 0 calc(100%/13), #0000 0 calc(150%/13), #0f1129 0 calc(200%/13), #0000 0 calc(250%/13), #0f1129 0 calc(300%/13)) 32px 32px #0f172a;
		background-size: 64px 64px;
	}
	
	.sidebar-content.active {
		display: block;
	}
	/* ===== EVENT CARD - Simple but Modern ===== */
	
	.event-container {
		position: relative;
		background: rgba(15, 23, 42, 0.95);
		padding: 10px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		margin-bottom: 2px;
		border: 1px solid rgb(0 222 255 / 35%);
	}
	
	.event-container:hover,
	.event-container.hover-effect {
		background: rgba(20, 30, 55, 0.95);
		border: 1px solid #ccc;
		border-bottom: 3px solid #ccc/*rgb(0 222 255 / 35%)*/
		!important;
	}
	
	.live-label {
		display: none;
		position: absolute;
		top: 0px;
		right: 0px;
		background: rgba(255, 0, 0, 0.6);
		color: white;
		padding: 3px 5px 3px 5px;
		font-size: 0.85em;
		border-radius: 0 3px 1px 5px;
		border: 1px solid rgba(239, 68, 68, 0.5);
	}
	/* ===== SERVER BUTTONS ===== */
	
	.server-buttons {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		margin-top: 10px;
		background: rgba(15, 23, 42, 0.7);
		border-radius: 4px;
		border: 1px solid rgba(15, 147, 134, 0.2);
	}
	
	.server-buttons .buttons-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}
	
	.server-button {
		background: rgba(15, 23, 42, 0.6);
		padding: 5px 10px;
		font-size: 0.75em;
		color: rgba(255, 255, 255, 0.85);
		border-radius: 3px;
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: center;
		max-width: 80px;
		border: 1px solid rgba(15, 147, 134, 0.25);
	}
	
	.server-button.active
	/*,.server-button:hover*/
	
	{
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		color: white;
		border-color: rgba(15, 147, 134, 0.6);
	}
	
	.server-button:hover {
		background: rgba(20, 180, 165, 0.7);
		border-color: rgba(15, 147, 134, 0.4);
		color: rgba(255, 255, 255, 0.95);
	}
	
	.instruction {
		font-size: 0.75em;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 5px;
		text-align: left;
		width: 100%;
	}
	/*
h2 {
  font-size: 0.9em;
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3);
  display: flex;
  align-items: center;
}

.league-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 180px;
}

.sport-icon {
  width: 24px;
  height: auto;
  margin-right: 10px;
}

.team {
  font-weight: 500;
  display: flex;
  align-items: center;
}

.team-logo {
  width: 24px;
  height: auto;
  margin-right: 10px;
}

.kickoff-match-time {
  text-align: right;
  padding-right: 10px;
  font-size: 0.8em;
}

.kickoff-match-date {
  text-align: right;
  padding-right: 10px;
  font-size: 0.8em;
}*/
	
	.chat-iframe {
		width: 100%;
		height: 100%;
		/* 98 ori */
		border: none;
		overflow: hidden;
	}
	
	.event-container .team-logo1,
	.event-container .team-logo2 {
		width: 24px;
		height: auto;
		margin-right: 10px;
	}
	
	.event-container .team-logo2 {
		background-color: #ffff0000;
	}
	
	.event-container .team1,
	.event-container .team2 {
		display: flex;
		align-items: center;
	}
	
	.event-container .team2 {
		color: #ffff0000;
	}
	
	.event-container .team2:hover {
		color: #ffff0000;
	}
	
	@media (max-width: 768px) {
		#main-content {
			flex-direction: column;
			display: flex;
			height: 100vh;
		}
		.video-container {
			width: 100%;
			position: relative;
			padding-top: 56.25%;
		}
		.video-wrapper {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.sidebar {
			width: 100%;
			padding: 2px;
			box-sizing: border-box;
			overflow-y: auto;
			flex-shrink: 0;
			flex-grow: 1;
			min-height: calc(100vh - 56.25vw);
		}
		.menu-button {
			margin-bottom: 2px;
		}
		.chat-iframe {
			height: 55vh;
			/* 63 ori */
			border: none;
		}
		.countdown-wrapper {
			font-size: 20px;
		}
		#spacer {
			height: 140px;
			/* 140 */
			width: 100%;
			background: transparent;
		}
		.menu-wrapper-bottom {
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			width: 100%;
			z-index: 1000;
			padding-bottom: calc(0px + env(safe-area-inset-bottom));
		}
		#refresh-button {
			bottom: 50px;
			right: 15px;
			width: 45px;
			height: 45px;
			font-size: 20px;
			z-index: 2000;
		}
		#refresh-button i {
			font-size: 20px;
		}
		#searchToggle {
			bottom: 110px;
			/* Naik agar tidak tertutup menu bawah */
			right: 15px;
			width: 45px;
			height: 45px;
			font-size: 20px;
			z-index: 9999999;
			/* Lebih tinggi dari elemen UI lain */
		}
		#searchToggle i {
			font-size: 20px;
		}
	}
	/* ===== MULTIVIEW MODAL - Simple Version ===== */
	
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.92);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: fadeIn 0.2s ease;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	.modal-container-modern {
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
		border-radius: 4px;
		padding: 0;
		max-width: 700px;
		width: 90%;
		animation: slideUp 0.2s ease;
		overflow: hidden;
		border: 1px solid rgba(15, 147, 134, 0.3);
	}
	
	@keyframes slideUp {
		from {
			transform: translateY(30px);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.modal-header-modern {
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		padding: 20px 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.modal-header-modern h3 {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
		color: white;
		letter-spacing: 0.5px;
	}
	
	.modal-close-btn-modern {
		width: 32px;
		height: 32px;
		background: rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		color: white;
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		font-weight: 300;
	}
	
	.modal-close-btn-modern:hover {
		background: rgba(0, 0, 0, 0.5);
		border-color: rgba(255, 255, 255, 0.5);
		transform: rotate(90deg);
	}
	
	.modal-body-modern {
		padding: 30px 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.grid-option-modern {
		background: rgba(15, 23, 42, 0.5);
		border: 1px solid rgba(15, 147, 134, 0.3);
		border-radius: 4px;
		padding: 20px 15px;
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: center;
	}
	
	.grid-option-modern:hover {
		background: rgba(20, 180, 165, 0.3);
		transform: translateY(-5px);
	}
	
	.grid-option-modern:active {
		transform: translateY(-2px);
	}
	
	.grid-preview-modern {
		background: rgba(0, 0, 0, 0.6);
		border-radius: 3px;
		padding: 12px;
		display: grid;
		gap: 6px;
		margin-bottom: 12px;
		min-height: 80px;
	}
	
	.grid-preview-2 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
	}
	
	.grid-preview-4 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	
	.grid-preview-6 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	
	.grid-preview-8 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	
	.grid-box-modern {
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		border-radius: 2px;
		border: 1px solid rgba(15, 147, 134, 0.3);
	}
	
	.grid-label-modern {
		font-size: 16px;
		font-weight: 600;
		color: white;
		margin-bottom: 4px;
	}
	
	.grid-subtitle-modern {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.7);
		font-weight: 400;
	}
	/* Mobile responsive */
	
	@media (max-width: 768px) {
		.modal-container-modern {
			max-width: 95%;
			width: 95%;
		}
		.modal-body-modern {
			grid-template-columns: repeat(2, 1fr);
			padding: 20px 15px;
			gap: 15px;
		}
		.grid-option-modern {
			padding: 15px 10px;
		}
		.grid-preview-modern {
			min-height: 60px;
			padding: 8px;
			gap: 4px;
		}
		.grid-label-modern {
			font-size: 14px;
		}
		.grid-subtitle-modern {
			font-size: 10px;
		}
	}
	/* No Events Message Styling */
	
	.no-events-message {
		text-align: center;
		font-family: 'Teko', sans-serif;
		animation: fadeIn 0.6s ease-in-out;
		padding: 40px 20px;
		background-color: rgba(15, 147, 134, .7);
		border-radius: 10px;
		margin: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.no-events-message .message-icon {
		font-size: 48px;
		color: #FEFFFF;
		margin-bottom: 20px;
	}
	
	.no-events-message h3 {
		color: #FEFFFF;
		margin: 0 0 10px 0;
		font-size: 24px;
		font-weight: 600;
	}
	
	.no-events-message p {
		color: #DEF2F1;
		margin: 0 0 20px 0;
		font-size: 16px;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	/* Supaya note dan ended list juga tetap rapi */
	
	.ended-list,
	.fallback-note {
		text-align: left;
		font-family: "Segoe UI", sans-serif;
	}
	
	.refresh-no-event {
		color: #FEFFFF;
		padding: 10px 20px;
		border-radius: 5px;
		border: none;
		background-color: transparent;
		pointer-events: none;
		/*border:1px solid #ccc; background-color: rgba(15,147,134,1);*/
		font-family: 'Teko', sans-serif;
		font-size: 16px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		transition: background-color 0.3s ease;
	}
	
	.refresh-no-event:hover {
		background-color: rgba(15, 147, 134, 0.774);
	}
	
	.refresh-no-event i {
		transition: transform 0.3s ease;
	}
	
	.refresh-no-event:hover i {
		transform: rotate(180deg);
	}
	
	.dropdown-menu .active-category {
		background: linear-gradient(135deg, rgba(15, 147, 134, 1) 0%, #054159 100%);
		/*#0c797174;*/
		border-radius: 2px;
		/*0 0 5px 5px; /*bawah*/
		/*border-right: .5px solid #ccc !important;*/
	}
	
	.jalan {
		z-index: 9 !important;
	}
	
	.copy-url-buttons {
		background: none !important;
		color: #CCC
		/*#17252A*/
		;
		font-size: 1.2em;
		font-family: 'Teko', sans-serif;
		/* Menggunakan font Teko dari Google Fonts */
		cursor: pointer;
		padding: 4px 8px;
		transition: color 0.3s ease;
		border: 1px solid rgb(0 222 255 / 35%) !important;
		width: 75px;
	}
	
	.copy-url-button:hover {
		color: #0f9386;
	}
	
	.share-event-btn {
		background: none !important;
		color: #CCC
		/*#17252A*/
		;
		font-size: 1.2em;
		font-family: 'Teko', sans-serif;
		/* Menggunakan font Teko dari Google Fonts */
		cursor: pointer;
		border: 1px solid rgb(0 222 255 / 35%) !important;
		width: 75px;
	}
	
	.league-bar {
		font-size: 0.9em;
		font-weight: 500;
		margin: -5px 0 0 0;
		padding-bottom: 5px;
		border-bottom: 1px solid #e7eaf080;
		display: flex;
		align-items: center;
		/*
        opacity: 0.88;border-bottom: .5px solid transparent;
        border-image: linear-gradient(-270deg, #ccc, /*#ddd,* / #dddddd00) 1;
        text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                 0px 8px 13px rgba(0,0,0,0.1),
                 0px 18px 23px rgba(0,0,0,0.1);*/
	}
	
	.league-bar span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		max-width: 180px;
		font-weight: 500;
	}
	/*
.league-name {      
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 180px; /* Sesuaikan dengan lebar yang kamu mau * /
}*/
	
	.league-bar::first-letter {
		text-transform: uppercase;
	}
	
	.league-bar img {
		width: 14px;
		height: 14px;
		margin-right: 10px;
		/* 40% dari 24px 8px */
		border-radius: 50%;
		border: 0.72px solid #e7eaf0;
		background: #2d334444;
		object-fit: cover;
	}
	
	.teams {
		margin-top: 20px;
		margin-left: -1px;
		/*padding-bottom: 10px;*/
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		justify-content: center;
		align-items: center;
		width: 100%;
		/*border-bottom: 0.5px solid #e7eaf0;*/
	}
	
	.team {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
		text-align: center;
		padding-bottom: 10px;
	}
	
	.team img {
		position: absolute;
		width: 41px;
		height: 41px;
		top: 0;
		margin-top: 40px;
		background: #2d334444;
		border-radius: 50%;
		object-fit: contain;
		border: 0.72px solid #e7eaf0;
		box-shadow: 0 1.2px 4.8px rgba(26, 30, 80, 0.04);
		transition: transform 0.15s;
	}
	
	.team .name {
		top: 0;
		position: absolute;
		font-weight: 300;
		font-size: 0.85em;
		color: #e4e7ef;
		/*
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;*/
		overflow-wrap: break-word;
		max-width: 120px;
		margin-top: 90px;
		line-height: 1.2;
		/* Jarak antar baris selalu 5px, tidak peduli ukuran font */
	}
	
	.team .name::first-letter {
		text-transform: uppercase;
	}
	
	.midtime {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 55px;
		user-select: none;
	}
	
	.midtime .kickoff-match-time {
		font-size: 1.23em;
		font-weight: 700;
		color: #e4e7ef;
		line-height: 1.06;
		letter-spacing: 0.03em;
		margin-top: 15px;
		margin-bottom: 0.9px;
		margin-left: 1.9px;
	}
	
	.midtime .kickoff-match-date {
		font-size: 0.82em;
		color: #e4e7ef;
		font-weight: 500;
		letter-spacing: 0.07em;
		margin-top: 0;
		margin-left: 1.9px;
		/*margin-bottom: 30px;*/
	}
	
	#live-event #content {
		/*margin-top:32px;*/
	}
	
	#searchBox {
		background-color: rgba(15, 147, 134, .4);
		margin-left: -200px !important;
		width: 1px;
		margin: auto auto;
		display: block;
		padding: 5px;
		/*border-radius:8px;*/
		border: 1px solid #ccc;
		position: fixed;
		top: 10px;
		left: 10px;
		color: #fff;
		opacity: 0;
		/*transition: all 0.3s ease;*/
		z-index: 0;
		font-size: 15px;
		font-family: 'Teko', sans-serif;
		/* Menggunakan font Teko dari Google Fonts */
		transition: opacity 0.3s ease, transform 0.25s ease;
		transform: translateY(auto);
	}
	
	#searchBox.active {
		left: 220px !important;
		width: 55%;
		opacity: 1;
		z-index: 9999999;
		transform: translateY(auto);
	}
	
	#searchBox::placeholder {
		color: #eee;
		opacity: .7;
	}
	/* Overlay semi-transparan */
	
	#iframe-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.25);
		/* semi transparan */
		backdrop-filter: blur(2px);
		/* efek lembut */
		z-index: 99999;
		/* di bawah search box tapi di atas iframe */
		display: none;
		transition: opacity 0.3s ease;
		opacity: 0;
	}
	
	#iframe-overlay.active {
		display: block;
		opacity: 1;
	}
	
	.event-container.url-active {
		outline: 2px solid #10b981 !important;
		box-shadow: 0 0 18px #10b98166;
		transform: translateY(-2px);
		transition: box-shadow .45s ease, outline .35s ease, transform .2s ease;
	}
	
	.link-note {
		color: #0f9386;
	}
	
	.infogp {
		position: absolute;
		right: 15px;
		font-size: 0.75em;
		color: white;
		margin-bottom: 5px;
		text-align: right;
		width: auto;
	}
	
	.allsports-button,
	.whatsapp_,
	.refresh-button,
	.event-container_,
	hr_,
	#countdown_countdown-wrapper {
		display: none !important;
	}
	
	.off_stats {
		margin: auto;
		font-size: 16px;
		padding: 0px;
		padding-bottom: -10px !important;
		color: red;
	}
	
	.fa-solid {
		margin-right: 10px;
	}
	
	.fa-arrows-rotate {
		margin-right: 0;
	}
	
	.score-box.home {
		min-width: 50px;
		font-size: 1.75em;
		top: 0;
		margin-left: 80px;
	}
	
	.score-box.away {
		min-width: 50px;
		font-size: 1.75em;
		top: 0;
		margin-right: 90px;
	}
	
	.score-box span.home {
		position: absolute;
		margin-top: -30px;
		/*margin-left: 30px !important;*/
	}
	
	.score-box span.away {
		position: absolute;
		margin-top: -20px;
		/*margin-left: -55px !important;*/
	}
	
	.score-box span.homePl {
		font-size: 0.7em !important;
		color: rgba(0, 231, 203, .8);
	}
	
	.score-box span.awayPl {
		font-size: 0.7em !important;
		color: rgba(0, 231, 203, .8);
	}
	/* SCORE BOX */
	
	.score-box {
		min-width: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.75em;
		position: relative;
	}