/* benefitmore_live_status */

.bm-live-status {
	padding: 0 !important;
}

.bm-live-status .panel {
	background: var(--bh_color_static_white, #fff);
	border: 1px solid var(--bh_color_gray_300, #e0e0e0);
	border-radius: 5px;
	padding: 30px;
}

.bm-live-status .panel-head {
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
	gap: 10px;
	margin-bottom: 15px;
}

.bm-live-status .panel-head h3 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
}

.bm-live-status .badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.bm-live-status .badge-green {
	background: rgba(0, 152, 0, 0.1);
	color: #009800;
}

.bm-live-status .search_area {
	display: flex;
	align-items: center;
	margin-bottom: 9.5px;
}

.bm-live-status .search_area input {
	flex-grow: 1;
	padding: 10px;
	border-radius: 5px;
	background-color: var(--bh_color_gray_100);
	border: 0;
	outline: 0;
	font-size: 16px;
}

.bm-live-status .search_area input::placeholder {
	color: var(--bh_color_gray_400);
	font-size: 14px;
}

.bm-live-status .search_area button {
	font-size: 18px;
	line-height: 1;
	color: var(--bh_color_main);
	padding-left: 10px;
}

.bm-live-status .district-swiper {
	width: 100%;
}

.bm-live-status .district-swiper .swiper-slide {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bm-live-status .swiper_area {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--bh_color_main);
	border-bottom: 1px solid var(--bh_color_gray_300);
	padding: 9.5px 10px;
	margin-bottom: 19.5px;
}

.bm-live-status .swiper_area .swiper-button-next, .bm-live-status .swiper_area .swiper-button-prev{
	margin-top: 0;
	/* transform: translateY(-50%); */
	width: 20px;
	height: 20px;
	position: static;
	color: var(--bh_color_gray_400);
}

.bm-live-status .swiper_area .swiper-button-next svg, .bm-live-status .swiper_area .swiper-button-prev svg {
	display: none;
}

.bm-live-status .swiper_area .swiper-button-next i, .bm-live-status .swiper_area .swiper-button-prev i {
	font-size: 20px;
	line-height: 1;
}

.bm-live-status .district-pill {
	min-width: 0;
	width: 70px;
	align-items: center;
	justify-content: start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bm-live-status .district-pill {
	font-weight: 500;
	font-size: 14px;
	color: var(--bh_color_gray_600);
	cursor: pointer;
	font-family: inherit;
}

.bm-live-status .district-pill.active {
	color: var(--bh_color_main);
}

.bm-live-status .compact-card {
	border: 1px solid var(--bh_color_gray_300);
	border-radius: 5px;
	background: var(--bh_color_white);
	padding: 20px;
}

.bm-live-status .compact-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.bm-live-status .tiny {
	font-size: 13px;
	color: var(--bh_color_gray_600);
}

.bm-live-status .compact-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: normal;
}

.bm-live-status .live-ticker {
	height: 210px;
	overflow: hidden;
	position: relative;
}

.bm-live-status .live-ticker::before,
.bm-live-status .live-ticker::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 18px;
	z-index: 2;
	pointer-events: none;
}

.bm-live-status .live-ticker::before {
	top: 0;
	/* background: linear-gradient(180deg, #f5f5f5, rgba(245, 245, 245, 0)); */
}

.bm-live-status .live-ticker::after {
	bottom: 0;
	/* background: linear-gradient(0deg, #f5f5f5, rgba(245, 245, 245, 0)); */
}

.bm-live-status .live-ticker-track {
	display: grid;
	gap: 10px;
	will-change: transform;
}

.bm-live-status .live-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--bh_color_gray_300, #e0e0e0);
	border-radius: 5px;
	background: var(--bh_color_gray_100);
	padding: 15px;
}

.bm-live-status .live-item strong {
	display: block;
	font-size: 16px;
	letter-spacing: normal;
	font-weight: 500;
	line-height: 1;
}

.bm-live-status .live-item span {
	color: var(--bh_color_gray_600);
	font-size: 12px;
}

.bm-live-status .live-count {
	min-width: 60px;
	text-align: center;
	padding: 5px 10px;
	border-radius: 0;
	background: rgba(0, 152, 0, 0.1);
	color: #009800;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 5px;
}

.bm-live-status .highlight {
	margin-top: 10px;
	padding: 5px 10px;
	border-radius: 5px;
	background: var(--bh_color_main_50);
	border: 1px solid var(--bh_color_main_300);
	font-size: 12px;
}

.bm-live-status .highlight b {
	color: var(--bh_color_main, #e8502a);
}

.bm-live-status .bm-live-empty {
	margin: 0;
	padding: 0 10px;
	font-size: 14px;
	width: 100%;
	text-align: center;
	color: var(--bh_color_gray_600);
}

@media (max-width:992px){
	.bm-live-status .panel {
		padding: 15px;
	}
	.bm-live-status .panel-head {
		gap: 5px;
		margin-bottom: 10px;
	}
	.bm-live-status .panel-head h3 {
		font-size: 18px;
	}
	.bm-live-status .badge {
		padding: 5px 8px;
		font-size: 11px;
	}
	.bm-live-status .search_area {
		margin-bottom: 8px;
	}
	.bm-live-status .search_area input {
		font-size: 14px;
		padding: 5px 5px 5px 8px;
	}
	.bm-live-status .search_area input::placeholder {
		font-size: 12px;
	}
	.bm-live-status .search_area button {
		padding-left: 5px;
	}
	.bm-live-status .swiper_area {
		padding: 5px;
		margin-bottom: 8px;
	}
	.bm-live-status .swiper_area .swiper-button-next, .bm-live-status .swiper_area .swiper-button-prev{
		width: 18px;
		height: 18px;
	}
	.bm-live-status .swiper_area .swiper-button-next i, .bm-live-status .swiper_area .swiper-button-prev i {
		font-size: 18px;
	}
	.bm-live-status .district-pill {
		width: 100px;
		font-size: 13px;
	}
	.bm-live-status .compact-card {
		padding: 10px;
	}
	.bm-live-status .compact-head {
		margin-bottom: 4px;
		gap: 5px;
	}
	.bm-live-status .live-item strong {
		font-size: 14px;
		line-height: 1.2;
	}
}