/* .mod-table {
} */

.flexible-table {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	text-align: left;
}

th,
td {
	border: 2px solid var(--light-color);
}

table {
	/* ont-family: $secondaryFont; */
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 2.5em 0;

	thead {
		display: none;

		/* Tablet Styles */
		@media (width >= 768px) {
			display: table-header-group;
		}
	}

	tr {
		margin-bottom: 20px;
		display: block;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-bottom: 0;
			display: table-row;
		}
	}

	th {
		font-size: 16px;
		background: var(--primary-alt);
		color: var(--light-color);
		padding: 10px 20px;
		text-transform: uppercase;
		/* &:nth-of-type(2) {
			background: var(--primary-highlight);
		} */
		/* &:nth-of-type(3) {
			background: #f3efe2;
		} */
	}

	td {
		font-size: 14px;
		line-height: 1.3em;
		/* background: var(--light-color); */
		padding: 8px 20px;
		display: block;
		position: relative;
		padding-left: calc(50% + 20px);
		background-color: var(--light-alt);

		/* Tablet Styles */
		@media (width >= 768px) {
			display: table-cell;
			/* padding-left: 20px; */
			padding: 12px 20px;
		}

		/* &:nth-of-type(2) {
			background: var(--primary-highlight);
		} */
		/* &:nth-of-type(3) {
			background: #f3efe2;
		} */
		span {
			color: var(--primary-color);
			font-weight: var(--fw-semi-bold);
			display: block;
		}
	}

	td {
		div[data-title]:after {
			content: attr(data-title);
			position: relative;
			margin-top: -1em;
			color: transparent;
			display: block;
		}
	}

	td[data-title]:before {
		content: attr(data-title);
		/* float: left; */
		font-size: 1em;
		font-weight: var(--fw-bold);
		color: var(--light-color);
		background: var(--primary-alt);
		position: absolute;
		height: calc(100% - 6px);
		width: calc(50% - 20px);
		top: 0;
		left: 0;
		padding-left: 20px;
		padding-top: 6px;

		/* Tablet Styles */
		@media (width >= 768px) {
			display: none;
		}
	}
}

.table-simple {
	table {
		thead {
			display: table-header-group;
		}

		tr {
			margin-bottom: 0;
			display: table-row;
		}

		td {
			display: table-cell;
			padding: 12px 20px;
		}

		td[data-title]:before {
			display: none;
		}
	}
}