.prediksi-list {
	display: block;
}

.prediksi-sentinel {
	height: calc(var(--pad) * 2);
}

.prediksi-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	padding: var(--pad);
	z-index: 999;
}

.prediksi-modal.is-open {
	display: flex;
}

.prediksi-modal-card {
	width: 100%;
	max-width: 520px;
	background: var(--white);
	border: 1px solid var(--line);
	padding: var(--pad);
}

.prediksi-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	margin: 0 0 var(--pad);
}

.prediksi-modal-head h4 {
	margin: 0;
	font-weight: bold;
	color: var(--black);
}

.prediksi-modal-close {
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--black);
}

.prediksi-kand {
	margin-top: var(--pad);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.prediksi-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--pad);
	background: rgba(0, 0, 0, 0.06);
	border: 1px solid var(--line);
	font-weight: bold;
	color: var(--black);
}

html.pred-popup-view,
body.pred-popup-view {
	min-height: auto;
	background: var(--black);
}

body.pred-popup-view {
	margin: 0;
	padding: 0;
	padding-bottom: 0;
}

body.pred-popup-view #header,
body.pred-popup-view #footer {
	display: none;
}

body.pred-popup-view .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	border-left: 1px solid;
	border-right: 1px solid;
	border-image: linear-gradient(var(--orange), var(--orange)) 1;
}

body.pred-popup-view .main-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340.95px);
	gap: var(--gap);
	align-items: start;
	padding: var(--pad);
	background: var(--black);
}

body.pred-popup-view .article-body {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 10px;
	background: var(--surface);
	color: var(--black);
}

body.pred-popup-view #sidebar {
	display: block;
	min-width: 0;
}

body.pred-popup-view .panel--sidebar {
	top: 10px;
}

body.pred-popup-view .cat-head {
	margin: 0 0 var(--mg);
	padding: var(--gap) 0;
	border-bottom: 1px solid var(--line);
}

body.pred-popup-view .cat-title {
	max-width: none;
}

#predDetail {
	background: transparent;
	padding: 0;
}

#predDetail table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--mg);
}

#predDetail td {
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	vertical-align: middle;
}

#predDetail td:first-child {
	width: 220px;
	font-weight: bold;
}

#predDetail td strong {
	font-weight: bold;
}

#predDetail .entry-desc {
	margin-top: var(--mg);
}

#predDetail ol {
	margin: var(--mg) 0 0;
	padding-left: 20px;
	line-height: 1.6;
}

#predDetail .entry-btn-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap);
	padding: 6px 14px;
	border: 0;
	background: var(--orange);
	color: var(--white);
	text-shadow: var(--ts);
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--white);
	animation: blink 1s infinite;
}

#predDetail .entry-btn-view:hover,
#predDetail .entry-btn-view:active,
#predDetail .entry-btn-view.is-active {
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--white);
}

@media (max-width: 768px) {
	.cat-filters {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.entry-card {
		display: grid;
		grid-template-columns: 60px minmax(0, 1fr);
		grid-template-areas:
			"logo title"
			"logo pasang"
			"divider divider"
			"jam period"
			"desc desc"
			"action action";
		align-items: start;
	}

	.entry-card::before {
		content: "";
		grid-column: 1 / -1;
		grid-row: 3;
		height: 1px;
		background: var(--line);
	}

	.entry-body {
		display: contents;
	}

	.entry-card .market-logo {
		grid-area: logo;
		width: 60px;
		height: 100%;
		min-height: 0;
		flex: 0 0 60px;
		align-self: stretch;
	}

	.entry-title {
		grid-area: title;
		align-self: start;
	}

	.entry-meta {
		display: contents;
	}

	.entry-meta .entry-meta-link {
		grid-area: pasang;
		align-items: flex-end;
		justify-self: start;
		margin-top: 0;
		font-size: 12px;
		line-height: 1.2;
	}

	.entry-meta-item:first-child {
		grid-area: jam;
		justify-self: start;
		white-space: nowrap;
	}

	.entry-meta-item:last-of-type {
		grid-area: period;
		justify-self: end;
		text-align: right;
		white-space: nowrap;
	}

	.entry-desc {
		grid-area: desc;
		margin: 0;
	}

	.entry-action {
		grid-area: action;
		margin-top: 0;
	}

	body[data-page="prediksi-detail"] .cat-head-left .cat-refresh {
		display: none;
	}

	body[data-page="prediksi-detail"] #predDetail td:first-child {
		width: 48%;
	}

	body[data-page="prediksi-detail"] #predDetail .entry-btn-view {
		position: relative;
		color: transparent;
		text-shadow: none;
		-webkit-text-fill-color: transparent;
	}

	body[data-page="prediksi-detail"] #predDetail .entry-btn-view::after {
		content: attr(data-label-mobile);
		position: absolute;
		inset: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--white);
		text-shadow: var(--ts);
		-webkit-text-fill-color: var(--white);
		pointer-events: none;
	}

	body[data-page="arsip-prediksi"] .cat-head {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: var(--gap);
		row-gap: 6px;
	}

	body[data-page="arsip-prediksi"] .cat-head-left {
		display: contents;
	}

	body[data-page="arsip-prediksi"] .cat-head-left > h1 {
		grid-column: 1 / -1;
	}

	body[data-page="arsip-prediksi"] .cat-cal-control {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
		margin: 0;
		top: -5px;
	}

	body[data-page="arsip-prediksi"] .cat-updated {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		width: auto;
		text-align: left;
		white-space: nowrap;
		align-self: center;
	}
}