/* table-5 — mobile: fixed 600px width always; closed = clip, open = scroll */

.builder-table[data-builder-table-expandable] {
	width: 100%;
	max-width: 100%;
	margin: 1em 0;
	text-align: center;
	box-sizing: border-box;
}

.builder-table[data-builder-table-expandable] .builder-table__scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}

.builder-table[data-builder-table-expandable] .builder-table__table {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
	border-collapse: collapse;
	font: inherit;
	background: var(--builder-table-body-bg, #fdfdfd);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
}

.builder-table[data-builder-table-expandable] .builder-table__table thead tr {
	background: var(--builder-table-header-bg, #8ac926);
}

.builder-table[data-builder-table-expandable] .builder-table__table thead th,
.builder-table[data-builder-table-expandable] .builder-table__table tbody td {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	text-align: left;
	vertical-align: middle;
	font: inherit;
}

.builder-table[data-builder-table-expandable] .builder-table__table thead th {
	color: var(--builder-table-header-color, #fff);
	padding: 14px 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: none;
}

.builder-table[data-builder-table-expandable] .builder-table__table tbody td {
	padding: 12px;
	border-bottom: 1px solid var(--builder-table-border-color, #ebebeb);
	color: var(--builder-table-body-color, #333);
}

.builder-table[data-builder-table-expandable] .builder-table__table tbody tr:nth-child(even) {
	background: var(--builder-table-row-alt-bg, #fafafa);
}

.builder-table[data-builder-table-expandable] .builder-table__table tbody tr:hover {
	background: var(--builder-table-row-hover-bg, #f1f1f1);
}

@media (max-width: 768px) {
	.builder-table[data-builder-table-expandable] .builder-table__table {
		width: 600px !important;
		min-width: 600px !important;
		max-width: none !important;
	}

	.builder-table[data-builder-table-expandable]:not(.is-expanded) .builder-table__scroll {
		overflow-x: hidden !important;
	}

	.builder-table[data-builder-table-expandable]:not(.is-expanded) .builder-table__table tbody tr:nth-child(n+4) {
		display: none;
	}

	.builder-table[data-builder-table-expandable].is-expanded .builder-table__scroll {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		overscroll-behavior-x: contain;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table thead th:nth-child(1),
	.builder-table[data-builder-table-expandable] .builder-table__table tbody td:nth-child(1) {
		width: 22%;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table thead th:nth-child(2),
	.builder-table[data-builder-table-expandable] .builder-table__table tbody td:nth-child(2) {
		width: 34%;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table thead th:nth-child(3),
	.builder-table[data-builder-table-expandable] .builder-table__table tbody td:nth-child(3) {
		width: 24%;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table thead th:nth-child(4),
	.builder-table[data-builder-table-expandable] .builder-table__table tbody td:nth-child(4) {
		width: 20%;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table thead th,
	.builder-table[data-builder-table-expandable] .builder-table__table tbody td {
		padding: 12px 10px;
	}
}

@media (min-width: 769px) {
	.builder-table[data-builder-table-expandable] .builder-table__scroll {
		overflow-x: hidden;
	}

	.builder-table[data-builder-table-expandable] .builder-table__table {
		width: 100%;
		min-width: 0;
	}
}

.builder-table__toggle {
	display: inline-block;
	background: var(--builder-table-button-bg, #3a86ff);
	color: var(--builder-table-button-color, #fff);
	padding: 0.6em 1em;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	font-size: var(--container-button-font-size, 16px);
	font-weight: var(--container-button-font-weight, 700);
	margin-top: 0.8em;
}

.builder-table__toggle:hover {
	background: var(--builder-table-button-hover-bg, #265bb5);
}

@media (min-width: 769px) {
	.builder-table[data-builder-table-expandable] .builder-table__toggle {
		display: none;
	}
}