@charset "UTF-8";

/* PRICE TABLE */

.price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.2em;
	font-weight: 200;
	text-align: left;
}

.price-table th,
.price-table td {
	text-align: left;
}


/*
 * Column headers.
 */

.price-table thead th {
	font-weight: 400;
	vertical-align: bottom;
}


/*
 * On small screens, the normal column-header row is visually hidden.
 * It remains available to assistive technologies.
 */

.price-table thead {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
}


/*
 * Turn the table structure into vertical blocks visually.
 */

.price-table tbody,
.price-table tr,
.price-table th,
.price-table td {
	display: block;
}


/*
 * Each package / offer is one visual block.
 */

.price-table tbody tr {
	padding: 1.25rem 0;
	border-bottom: 1px solid currentColor;
}


/*
 * Top border for the first non-header row.
 */

.price-table tbody tr:first-child {
	border-top: 1px solid currentColor;
}


/*
 * Row headers.
 */

.price-table th[scope="row"] {
	margin-bottom: 1rem;
	font-weight: 700;
}


/*
 * Each price cell consists of:
 *
 *    label        price
 *                 VAT information
 */

.price-table td {
	display: grid;
	grid-template-columns: minmax(8rem, 60%) 1fr;
	gap: 1rem;
	align-items: start;
	padding: 0.4rem 0;
}


/*
 * Visible category labels on mobile.
 */

.mobile-label {
	font-weight: 400;
}


/*
 * Price formatting.
 */

.price {
	display: block;
	font-weight: 200;
}

.price strong,
.price small {
	display: block;
}

.price strong {
	font-weight: 700;
}

.price small {
	margin-top: 0.1rem;
	font-size: 80%;
	font-weight: 200;
}

.mobile-label .table-header-note {
    display: block;
    text-align: left;
}

.table-header-note {
    font-size: 80%;
}


@media only screen and (min-width: 770px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min-resolution: 200dpi),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx) {

	/*
	 * Restore the normal table header.
	 */

	.price-table thead {
		position: static !important;
		clip: auto;
	}


	/*
	 * Restore the normal HTML table display model.
	 */

	.price-table {
		display: table;
        table-layout: fixed;
	}
    
    .price-table th:nth-child(1),
	.price-table td:nth-child(1) {
		width: 31%;
	}

	.price-table th:nth-child(2),
	.price-table td:nth-child(2),
	.price-table th:nth-child(3),
	.price-table td:nth-child(3),
	.price-table th:nth-child(4),
	.price-table td:nth-child(4) {
		width: 23%;
	}

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

	.price-table tbody {
		display: table-row-group;
	}

	.price-table tr {
		display: table-row;
	}

	.price-table th,
	.price-table td {
		display: table-cell;
		padding: 0.75rem;
		vertical-align: top;
		text-align: left;
	}

	.price-table thead th {
		font-weight: 400;
	}

	.price-table th[scope="row"] {
		margin: 0;
		font-weight: 200;
	}
    
    .th-row-strong {
        font-weight: 400;
    }
    
    .th-row-bold {
        font-weight: 700;
    }

	.price-table tbody tr {
		padding: 0;
		border-bottom: 1px solid currentColor;
	}

	.price-table tbody tr:first-child {
		border-top: 1px solid currentColor;
	}

	.mobile-label {
		display: none;
	}
    
    .table-header-note {
        display: block;
    }

}