.acf-matrix-table-wrapper {
	position: relative;
}

.acf-matrix-table-scroll {
	overflow-x: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
}

.acf-matrix-table {
	--row-header-width: 150px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 10px;
	padding-right: 5rem;
	padding-bottom: 30px;

	thead {
		tr {
			th {
				background: var(--wp--preset--color--navy);
				color: #fff;
				padding: 16px 50px;
				font-weight: 600;
				text-align: center;
				white-space: nowrap;
				font-family: var(--wp--preset--font-family--lora), serif, system-ui;
				font-weight: var(--wp--custom--font-weight--semi-bold, 600);
				font-size: 18px;

				&:first-child {
					position: sticky;
					left: 0;
					z-index: 4;

					text-align: left;
					border-top-left-radius: 10px;
				}

				&:last-child {
					border-top-right-radius: 10px;
				}
				@media screen and (max-width: 801px) {
					padding: 16px 10px;
				}
			}
		}
	}

	tbody {
		tr {
			th.row-header {
				background: var(--wp--preset--color--navy);
				color: #fff;
				padding: 16px 50px;
				text-align: center;
				font-family: var(--wp--preset--font-family--lora), serif, system-ui;
				font-weight: var(--wp--custom--font-weight--semi-bold, 600);
				font-size: 18px;
				white-space: nowrap;

				position: sticky;
				left: 0;
				z-index: 3;
				@media screen and (max-width: 640px) {
					position: sticky;
					left: 0;
					z-index: 3;
					padding: 25px 10px 0;
				}

				&:last-child {
					border-bottom-left-radius: 10px;
				}
			}

			td {
				background: #fff;
				color: var(--wp--preset--color--primary, #0f2452);
				padding: 16px 50px;
				text-align: center;
				font-family: var(--wp--preset--font-family--roboto), sans-serif, system-ui;
				font-weight: var(--wp--custom--font-weight--regular, 400);
				font-size: 18px;
				white-space: nowrap;
				@media screen and (max-width: 768px) {
					padding: 5px 10px;
				}
				@media screen and (max-width: 640px) {
					padding: 0 10px;
					border: none;
					background: #EEF1F6;
					border-bottom: 1px solid #C3C8D4;
				}

				&:first-child {
					border-left-width: 0;
				}

				&:last-child {
					border-right-width: 0;
				}
				&.icon-checkmark::before,
				&.icon-cross::before {
					content: "";
					display: inline-block;
					width: 16px;
					height: 16px;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					margin-right: 10px;
				}

				&.icon-checkmark::before {
					background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='none'><path d='M15.4688 0.28125C15.8555 0.527344 15.9258 1.05469 15.6797 1.44141L6.39844 14.3789C6.22266 14.5898 6.01172 14.6953 5.76562 14.7305C5.51953 14.7305 5.27344 14.6602 5.09766 14.4844L0.316406 9.70312C0 9.38672 0 8.82422 0.316406 8.50781C0.632812 8.19141 1.19531 8.19141 1.51172 8.50781L5.58984 12.5859L14.3086 0.457031C14.5547 0.0703125 15.082 0 15.4688 0.28125Z' fill='%236F96D1'/></svg>");
				}

				&.icon-cross::before {
					background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' fill='none'><path d='M13.3945 1.47656L7.94531 7.98047L13.3945 14.4844C13.7109 14.8359 13.6758 15.3633 13.2891 15.6445C12.9375 15.9609 12.4102 15.9258 12.1289 15.5391L6.85547 9.28125L1.58203 15.5742C1.30078 15.9258 0.773438 15.9609 0.421875 15.6445C0.0351562 15.3633 0 14.8359 0.316406 14.4844L5.76562 7.98047L0.316406 1.47656C0 1.125 0.0351562 0.597656 0.421875 0.316406C0.773438 0 1.30078 0.0351562 1.58203 0.421875L6.85547 6.67969L12.1289 0.421875C12.4102 0.0351562 12.9375 0 13.3242 0.316406C13.6758 0.597656 13.7109 1.125 13.3945 1.47656Z' fill='%23C2121F'/></svg>");
				}
			}

			&:first-child {
				td {
					border-top-width: 0;

					&:first-of-type {
						border-top-left-radius: 10px;
						@media screen and (max-width: 640px) {
							border-top-left-radius: 0;
						}
					}

					&:last-child {
						border-top-right-radius: 10px;
						@media screen and (max-width: 640px) {
							border-top-right-radius: 0;
						}
					}
				}
			}

			&:last-child {
				td {
					border-bottom-width: 0;

					&:first-of-type {
						border-bottom-left-radius: 10px;
						@media screen and (max-width: 640px) {
							border-bottom-left-radius: 0;
						}
					}

					&:last-child {
						border-bottom-right-radius: 10px;
						@media screen and (max-width: 640px) {
							border-bottom-right-radius: 0;
						}
					}
					@media (max-width: 640px) {
						background: linear-gradient(to bottom, #EEF1F6 4em, transparent 0.4em) no-repeat;
						background-size: 100% 100%;
					}
				}
				th {
					span {
						@media (max-width: 640px) {
							padding-bottom: 35px;
						}
					}
				}
			}
		}
	}
}
.acf-matrix-nav {
	display: none;
}

@media (max-width: 640px) {
	.acf-matrix-table-wrapper {
		position: relative;
		overflow-x: clip;
		contain: layout paint;
	}

	.acf-matrix-table-scroll {
		overflow-x: auto;
		position: relative;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.acf-matrix-table-scroll::-webkit-scrollbar {
		display: none;
	}
	.acf-matrix-table {
		overflow-y: hidden;
		padding-right: 0;
		padding-bottom: 0;
		min-width: 100%;
		width: 100%;
		table-layout: fixed;
		background: var(--wp--preset--color--white, #ffffff);
		border-collapse: separate;
		border-spacing: 0;
	}
	.acf-matrix-table th,
	.acf-matrix-table td {
		white-space: normal;
	}

	.acf-matrix-table tr {
		min-width: 100%;
	}
	.acf-matrix-table th:first-child {
		position: sticky;
		left: 0;
		z-index: 3;
		min-width: 150px;
		max-width: 150px;
		background: var(--wp--preset--color--navy);
	}
	.acf-matrix-table th:not(:first-child),
	.acf-matrix-table td {
		text-align: center;
		white-space: nowrap;
	}
	.acf-matrix-table th:not(:first-child):not(.row-header){
		background-color: #EEF1F6;
		background: linear-gradient(to top, #EEF1F6 3.7em, transparent 0.4em) no-repeat;
		background-size: 100% 100%;
		color: var(--wp--preset--color--primary, #0f2452);
		border-top-width: 0;
		border-top-right-radius: 0;
		padding-bottom: 15px;
		vertical-align: bottom;
	}
	.acf-matrix-table tbody {
		scroll-snap-type: x mandatory;
		overflow-x: hidden;
	}
	.acf-matrix-table thead th:first-child {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 150px;
		border-top-right-radius: 10px;
	}
	.acf-matrix-table thead th:first-child {
		width: 150px;
		min-width: 150px;
		max-width: 150px;
		padding: 35px 0px 20px 0px;
	}

	.column-header,
	.acf-matrix-table td {
		display: none;
		width: calc(100vw - var(--row-header-width));
	}

	.row-header-text {
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 5px;
        padding-bottom: 25px;
        padding-top: 0;
	}
	
	.column-header, td[data-col] {
		backface-visibility: hidden;
		transform-style: preserve-3d;
	}
	.row-header {
		width: 150px;
		min-width: 150px;
		max-width: 150px;
		flex: none;
		border: 0;
	}

	.acf-matrix-table th.column-header {
		display: none;
	}

	.acf-matrix-table td {
		display: none;
	}

	.acf-matrix-table th.column-header.is-active,
	.acf-matrix-table td.is-active {
		display: table-cell;
		text-wrap: auto;
		line-height: 1.2;
	}
	.acf-matrix-table th.row-header {
		display: table-cell !important;
	}

	.acf-matrix-table {
		thead {
			th.column-header {
				width: calc(100% - var(--row-header-width));
				min-width: calc(100% - var(--row-header-width));
				text-align: center;
				white-space: nowrap;
			}
		}
	}

	.acf-matrix-table tbody tr:last-child th.row-header {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.acf-matrix-table thead th:first-child::before {
		content: "";
		width: 62px;
		height: 20px;
		display: block;
		margin: 0 auto;
		background: url("../../assets/images/tiny-logo.png") center / contain no-repeat;
	}

	.acf-matrix-nav {
		position: relative;
		display: flex;
		justify-content: flex-end;
		display: flex;
		gap: 20px;
		z-index: 10;
	}

	.acf-matrix-nav button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.acf-matrix-nav .arrow {
		display: block;
		width: 21px;
		height: 16px;
	}

	.acf-matrix-nav .arrow--left {
		transform: rotate(180deg);
	}

}