/*
 * Modern 16-column compatibility grid.
 *
 * Existing grid_* classes are retained while the layout engine uses CSS Grid.
 * The 1% item margins preserve the proportions of the former 960 grid.
 */

.container_12,
.container_16 {
	display: grid;
	justify-content: center;
}

.container_12 {
	grid-template-columns: repeat(12, 6.333333%);
	column-gap: 2%;
}

.container_16,
.chart-box,
.formtastic fieldset > ol:has(> [class*="grid_"]),
.formtastic [class*="grid_"]:has(> [class*="grid_"]) {
	display: grid;
	grid-template-columns: repeat(16, 4.25%);
	column-gap: 2%;
	justify-content: center;
}

.container_12,
.container_16 {
	width: 92%;
	margin-right: 4%;
	margin-left: 4%;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
	min-width: 0;
}

.grid_1 { grid-column-end: span 1; }
.grid_2 { grid-column-end: span 2; }
.grid_3 { grid-column-end: span 3; }
.grid_4 { grid-column-end: span 4; }
.grid_5 { grid-column-end: span 5; }
.grid_6 { grid-column-end: span 6; }
.grid_7 { grid-column-end: span 7; }
.grid_8 { grid-column-end: span 8; }
.grid_9 { grid-column-end: span 9; }
.grid_10 { grid-column-end: span 10; }
.grid_11 { grid-column-end: span 11; }
.grid_12 { grid-column-end: span 12; }
.grid_13 { grid-column-end: span 13; }
.grid_14 { grid-column-end: span 14; }
.grid_15 { grid-column-end: span 15; }
.grid_16 { grid-column-end: span 16; }

.prefix_1 { grid-column-start: 2; }
.prefix_2 { grid-column-start: 3; }
.prefix_3 { grid-column-start: 4; }
.prefix_4 { grid-column-start: 5; }
.prefix_5 { grid-column-start: 6; }
.prefix_6 { grid-column-start: 7; }
.prefix_7 { grid-column-start: 8; }
.prefix_8 { grid-column-start: 9; }
.prefix_9 { grid-column-start: 10; }
.prefix_10 { grid-column-start: 11; }
.prefix_11 { grid-column-start: 12; }
.prefix_12 { grid-column-start: 13; }
.prefix_13 { grid-column-start: 14; }
.prefix_14 { grid-column-start: 15; }
.prefix_15 { grid-column-start: 16; }