.table-scroll { max-width: 100%; border: 1px solid var(--color-border); border-radius: 8px; }
.table-scroll table { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: auto; }
.table-scroll th, .table-scroll td { padding: 12px 14px; overflow-wrap: anywhere; border: 1px solid var(--color-border); line-height: 1.65; text-align: left; }
.table-scroll th { background: var(--color-bg-green); font-weight: 700; }
.table-scroll tr:nth-child(even) td { background: #fbfcfb; }
.table-scroll caption { padding: 10px 12px; color: var(--color-heading); font-weight: 700; text-align: left; }
@media (max-width: 767px) {
	.table-scroll { border: 0; border-radius: 0; }
	.table-scroll table,
	.table-scroll tbody { display: block; width: 100%; }
	.table-scroll thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.table-scroll tbody tr { display: block; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; }
	.table-scroll tbody tr + tr { margin-top: 14px; }
	.table-scroll tbody th,
	.table-scroll tbody td { display: grid; grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); width: 100%; padding: 10px 12px; gap: 12px; background: var(--color-white); border: 0; border-bottom: 1px solid var(--color-border-light); }
	.table-scroll tbody tr > :last-child { border-bottom: 0; }
	.table-scroll tbody th::before,
	.table-scroll tbody td::before { content: attr(data-column-label); color: var(--color-primary-dark); font-size: 13px; font-weight: 700; }
	.table-scroll tbody th { font-weight: 400; }
	.table-scroll tr:nth-child(even) td { background: var(--color-white); }
	.table-scroll caption { display: block; width: 100%; padding-inline: 0; }
}