/*
 * This CSS technique is a kind of CSS classname wildcard. This rule matches
 * .gridwrap or .gridwrap_*. It means you don't need to use both classnames
 * when you have a custom wrapper
 */
:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/*grid-auto-flow: column;*/
	justify-content: space-between;
	grid-gap: 1em;
}

/*
 * This CSS technique is a kind of CSS classname wildcard. This rule matches
 * .griditem or .griditem_*. It means you don't need to use both classnames
 * when you have a custom wrapper
 */
:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > *,
:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem, [class^="griditem_"], [class*=" griditem_"]) {
	/* YAY */
	grid-column: span 12;
	padding: 0.8em;
	margin-bottom: 0;
}

/* Turn off cell padding for all cells */
.gridwrap_np > :is(*, .griditem, [class^="griditem_"], [class*=" griditem_"]),
/* Or, turn off cell padding for an individual cell */
:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > .griditem_np {
	padding: 0;
}

/* Apply a border for all cells */
.gridwrap_b > :is(*, .griditem, [class^="griditem_"], [class*=" griditem_"]):not(.griditem_nb),
/* Apply a border around an individual cell */
:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > .griditem_b {
	border: solid 1.4px #cccccc;
	border-radius: 6px;
}

@media screen and (min-width: 40em) {
	/*
	 * Now, lett's introduce a littl ebit of grid-sizing but
	 * by default, in "TABLET" mode we just make it all half and half
	 */
	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_1c, .griditem_2c, .griditem_3c, .griditem_4c, .griditem_6c, .griditem_8c) {
		grid-column: span 6;
	}
}

@media screen and (min-width: 64em) {
	/**
	 * Now, the screen is starting to get wide enough that we can let things
	 * inherit their correct grid size
	 */

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_1c) {
		grid-column: span 1;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_2c) {
		grid-column: span 2;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_3c) {
		grid-column: span 3;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_4c) {
		grid-column: span 4;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_6c) {
		grid-column: span 6;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_8c) {
		grid-column: span 8;
	}

	:is(.gridwrap,[class^="gridwrap_"],[class*=" gridwrap_"]) > :is(.griditem_9c) {
		grid-column: span 9;
	}
}

/* endregion GRID */

/* region FLEXBOX */
/*
 * This CSS technique is a kind of CSS classname wildcard. This rule matches
 * .flexwrap or .flexwrap_*. It means you don't need to use both classnames
 * when you have a custom wrapper
 */
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) {
	display: flex;
}


:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]):not(.flexwrap_nowrap) {
	flex-wrap: wrap;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]).flexwrap_nowrap {
	flex-wrap: nowrap;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > *,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	transition: flex-grow .25s;
	margin-bottom: 0;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > * > *:last-child,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) > *:last-child {
	margin-bottom: 0;
}

.flexwrap_g {
	gap: 1em;
	/* Gap means both of these
	row-gap: 1em;
	column-gap: 1em;
	*/
}

.flexwrap_g1 {
	gap: 6px;
}

.flexwrap_cg {
	column-gap: 1em;
}

.flexwrap_rg {
	row-gap: 1em;
}

.flexwrap_row {
	flex-direction: row;
}

.flexwrap_col {
	flex-direction: column;
}

.flexwrap_end {
	justify-content: flex-end;
}

.flexwrap_aicenter {
	align-items: center;
}

.flexwrap_spacebetween {
	justify-content: space-between;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > *,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	/* This is left commented out beacuse this is the default as defined above for flexwrap children anyway
	/*flex-basis: auto;*/
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_p {
	padding: 1em;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_b {
	border: solid 1px #cccccc;
	border-radius: 6px;
}

.flexwrap_col > *,
.flexwrap_col > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	/*flex: 1 0 auto;*/
	max-width:100%;
}

.flexwrap_row > *,
.flexwrap_row > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	flex: 1 0 auto;
}

/* region Experimenting with making bigger flexitem zones bigger by default */
/*
  From Paul 2 Lou: IF you're here wondering why things aren't lining up then this is my fault
  and it's these 2 rules below. Let's hope you stumble across this in a few years time and
  it's actually 100% fine.
 */
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > :is(.flexitem_1c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c, .flexitem_9c) {
	flex-basis: 100%;
}

:is(.flexwrap_g, .flexwrap_cg) > :is(.flexitem_1c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c, .flexitem_9c) {
	flex-basis: calc(100% - 1em);
}

:is(.flexwrap_g1) > :is(.flexitem_1c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c, .flexitem_9c) {
	flex-basis: calc(100% - 6px);
}
/* endregion Experimenting with making bigger flexitem zones bigger by default */

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_fill {
	flex-grow: 1;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]).flexwrap_snug > *,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_snug {
	flex-grow: 0;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]).flexwrap_shrink > *,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_shrink {
	flex-shrink: 1;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_snug.flexitem_growhover:focus,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_snug.flexitem_growhover:focus-within,
:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_snug.flexitem_growhover:hover {
	flex-grow: 1 !important;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]).flexwrap_aiend {
	align-items: flex-end;
}

:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_aiend {
	align-self: flex-end;
}

@media screen and (min-width: 50em) {
	/*
	 * Now, lett's introduce a littl ebit of grid-sizing but
	 * by default, in "TABLET" mode we just make it all half and half
	 */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > :is(.flexitem_1c, .flexitem_1p5c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c) {
		flex-basis: 50%;
	}

	:is(.flexwrap_g, .flexwrap_cg) > :is(.flexitem_1c, .flexitem_1p5c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c) {
		flex-basis: calc(50% - 1em);
	}

	:is(.flexwrap_g1) > :is(.flexitem_1c, .flexitem_1p5c, .flexitem_2c, .flexitem_3c, .flexitem_4c, .flexitem_6c) {
		flex-basis: calc(50% - 6px);
	}
}

@media screen and (min-width: 64em) {
	/**
	 * Now, the screen is starting to get wide enough that we can let things
	 * inherit their correct grid size
	 */

	/* Regular rule for 1 cell wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_1c {
		flex-basis: 8.33%;
	}

	/* Override rule for 1 cell wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_1c {
		flex-basis: calc(8.33% - 1em);
	}

	/* Override rule for 1 cell wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_1c {
		flex-basis: calc(8.33% - 6px);
	}

	/* Regular rule for 2 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_2c {
		flex-basis: 16.66%;
	}

	/* Override rule for 2 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_2c {
		flex-basis: calc(16.66% - 1em);
	}

	/* Override rule for 2 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_2c {
		flex-basis: calc(16.66% - 6px);
	}

	/* Regular rule for 3 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_1p5c {
		flex-basis: 12.5%;
	}

	/* Regular rule for 3 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_3c {
		flex-basis: 25%;
	}

	/* Override rule for 3 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_1p5c {
		flex-basis: calc(12.5% - 6px);
	}

	/* Override rule for 3 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_1p5c {
		flex-basis: calc(12.5% - 1em);

	}

	/* Override rule for 3 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_1p5c {
		flex-basis: calc(12.5% - 1em);

	}
	/* Override rule for 3 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_3c {
		flex-basis: calc(25% - 1em);
	}

	/* Override rule for 3 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_3c {
		flex-basis: calc(25% - 6px);
	}

	/* Regular rule for 4 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_4c {
		flex-basis: 33.33%;
	}

	/* Override rule for 4 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_4c {
		flex-basis: calc(33.33% - 1em);
	}

	/* Override rule for 4 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_4c {
		flex-basis: calc(33.33% - 6px);
	}

	/* Regular rule for 6 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_6c {
		flex-basis: 50%;
	}

	/* Override rule for 6 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_6c {
		flex-basis: calc(50% - 1em);
	}

	/* Override rule for 6 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_6c {
		flex-basis: calc(50% - 6px);
	}

	/* Regular rule for 9 cells wide */
	:is(.flexwrap,[class^="flexwrap_"],[class*=" flexwrap_"]) > .flexitem_9c {
		flex-basis: 75%;
	}

	/* Override rule for 9 cells wide with column gaps enabled */
	:is(.flexwrap_g, .flexwrap_cg) > .flexitem_9c {
		flex-basis: calc(75% - 1em);
	}

	/* Override rule for 9 cells wide with column gaps enabled */
	:is(.flexwrap_g1) > .flexitem_9c {
		flex-basis: calc(75% - 6px);
	}
}

/* Is it a left stretch flex region */
.flexwrap_lstretch {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Is it an item in a left stretch flex region */
.flexwrap_lstretch > *,
.flexwrap_lstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	flex: 0 0 auto;
}

/* Is it the fdirst item in a left stretch flex region */
.flexwrap_lstretch > *:first-child,
.flexwrap_lstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]):first-child {
	flex-grow: 1;
}

/* Is it a right stretch flex region */
.flexwrap_rstretch {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Is it an item in a right stretch flex region */
.flexwrap_rstretch > *,
.flexwrap_rstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	flex: 0 0 auto;
}

/* Is it the last item in a right stretch flex region */
.flexwrap_rstretch > *:last-child,
.flexwrap_rstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]):last-child {
	flex-grow: 1;
}

/* Is it a centre stretch flex region */
.flexwrap_cstretch {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Is it an item in a centre stretch flex region */
.flexwrap_cstretch > *,
.flexwrap_cstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]) {
	flex: 1 0 auto;
}

/* Is it either the first or last child in the stretch region */
.flexwrap_cstretch > :is(:last-child,:last-child),
.flexwrap_cstretch > :is(.flexitem, [class^="flexitem_"], [class*=" flexitem_"]):is(:last-child,:first-child) {
	flex-grow: 0;
}

/* endregion FLEXBOX */


/* @Lou, we should probably get rid of this rule so you can tweak it elsewhere */
html > body .griditem input, html > body .griditem select {
	width: 100%;
}