:root {
	/*--vision-ui-red-navy-grad: linear-gradient(160deg,rgba(230, 52, 51, 1) 0%, rgba(140, 28, 28, 1) 50%, rgba(23, 36, 52, 1) 100%);*/
	--vision-ui-grey-grad: linear-gradient(322deg, var(--vision-ui-lightest-grey), rgba(238,238,238,0.6) 70%), linear-gradient(178deg, var(--vision-ui-lightest-grey), rgba(238,238,238,0.6) 70%), linear-gradient(24deg, var(--vision-ui-lightest-grey), rgba(238,238,238,0.6) 70%);
	--vision-ui-heat-grad: linear-gradient(90deg,rgba(0, 106, 220, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(150, 0, 0, 0.6) 100%);
	--vision-ui-anim-fast: 150ms;
	--vision-ui-anim-slow: 300ms;
	--vision-ui-tran-all: all var(--vision-ui-anim-slow) ease-in-out;
	--font-size-xxl: 1.5rem; /* 24px standard */
	--font-size-xl: 1.25rem; /* 24px standard */
	--font-size-l: 1rem; /* 16px standard */
	--font-size-m: 0.875rem; /* 14px standard */
	--font-size-s: 0.75rem; /* 12px standard */
	--font-size-xs: 0.6875rem; /* 11px standard */
	--font-size-xxs: 0.625rem; /* 10px standard */
	--font-size-xxxs: 0.5625rem; /* 9px standard */
	--vision-ui-lilac-very-light: #F6F2F9;
	--vision-ui-lilac-light: #ECE6F0;
	--vision-ui-lilac-medium: #CBBFD1;
	--vision-ui-green-very-light: #F6FAF6;
	--vision-ui-green-light: #E9F0EA;
	--vision-ui-green-medium: #C6D0C9;
}

/*
	Flexing
*/
.am-flex {
	display: flex;
}

	.am-flex.am-flex-col {
		flex-direction: column;
	}

	.am-flex.am-flex-row {
		flex-direction: row;
	}

	.am-flex.am-flex-row-rev {
		flex-direction: row-reverse;
	}

.am-flex-grow {
	flex-grow: 1;
}

.am-flex.am-flex-start {
	align-self: flex-start;
}

.am-flex.am-flex-end {
	align-self: flex-end;
}

.am-flex.am-flex-wrap {
	flex-wrap: wrap;
}

/*
	Grids
*/
.am-grid {
	display: grid;
}

	.am-grid.am-grid-2-col {
		grid-template-columns: repeat(2, 1fr);
	}

	.am-grid.am-grid-3-col {
		grid-template-columns: repeat(3, 1fr);
	}

	.am-grid.am-grid-4-col {
		grid-template-columns: repeat(4, 1fr);
	}

	.am-grid.am-grid-5-col {
		grid-template-columns: repeat(5, 1fr);
	}

	.am-grid.am-grid-6-col {
		grid-template-columns: repeat(6, 1fr);
	}

	.am-grid.am-grid-7-col {
		grid-template-columns: repeat(7, 1fr);
	}

	.am-grid.am-grid-8-col {
		grid-template-columns: repeat(8, 1fr);
	}

/*
	Content control
*/
.am-justify-space {
	justify-content: space-between;
}

.am-justify-start {
	justify-content: start;
}

.am-justify-end {
	justify-content: end;
}

.am-align-content-start {
	align-content: start;
}

.am-align-content-mid {
	align-content: center;
}

.am-align-items-mid {
	align-items: center; /* Handles vertical centering in a flexbox. */
}

.am-justify-items-mid {
	justify-content: center; /* Handles horizontal alignment in a flexbox. */
}

/*
	Spacing control
*/

.am-gap-s {
	gap: 0.25rem;
}

.am-gap-m {
	gap: 0.5rem;
}

.am-gap-l {
	gap: 0.75rem;
}

.am-gap-xl {
	gap: 1rem;
}

/*
	Padding styles
*/
.am-pad-s {
	padding: 0.25rem;
}

.am-pad-m {
	padding: 0.5rem;
}

.am-pad-l {
	padding: 0.75rem;
}

.am-pad-xl {
	padding: 1rem;
}

/*
	Horizontal padding styles
*/
.am-pad-h-s {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.am-pad-h-m {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.am-pad-h-l {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.am-pad-h-xl {
	padding-left: 1rem;
	padding-right: 1rem;
}

/*
	Vertical padding styles
*/
.am-pad-v-s {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.am-pad-v-m {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.am-pad-v-l {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.am-pad-v-xl {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/*
	Positioning Styles
*/
.am-pos-abs {
	position: absolute;
}

.am-pos-rel {
	position: relative;
}

/*
	Margin styles
*/
.am-mar-s {
	margin: 0.25rem;
}

.am-mar-m {
	margin: 0.5rem;
}

.am-mar-l {
	margin: 0.75rem;
}

.am-mar-h {
	margin: 1rem;
}

/*
	Horizontal margin styles
*/
.am-mar-h-s {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.am-mar-h-m {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.am-mar-h-l {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
}

.am-mar-h-xl {
	margin-left: 1rem;
	margin-right: 1rem;
}

/*
	Vertical margin styles
*/
.am-mar-v-s {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.am-mar-v-m {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.am-mar-v-l {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

.am-mar-v-xl {
	margin-top: 1rem;
	margin-bottom: 1rem;
}


/*
	Size control
*/
.am-full-h {
	height: 100%;
}

.am-full-w {
	width: 100%;
}

.am-min-h-0 {
	min-height: 0; /* Required when sitting in a flexbox to constrain the child as default in flex containers is min-height: auto. */
}

.am-max-h-100pc {
	max-height: 100%;
}

.am-h-0 {
	height: 0;
}

/*
	Overflow control
*/
.am-no-spill {
	overflow: hidden;
}

.am-one-line {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/* When one-line is applied, there is no need for the added space applied by default. */
	line-height: 1.2; /* Cannot be less than this or lowercase letters will lose their "below the line" parts. */
}

/*
	Text control
*/
.am-txt-spaced {
	letter-spacing: 1px;
}

.am-txt-left {
	text-align: left;
}

.am-txt-center {
	text-align: center;
}

.am-txt-right {
	text-align: right;
}

/*
	Display control
*/
.hidden {
	display: none !important; /* Important should be used sparingly. But in this case, we want to ensure hidden with this class. */
}

/*
	Styles for tiles.
*/

.tile {
	flex: 1; /* Equivalent to "flex: 1 1 0%" where starting width is 0% and determined by grow. */
	border-radius: 0.5rem;
	background-color: var(--vision-ui-almost-white-grey);
	/*position: relative;*/ /* Allows the positioning of hover menus. */

	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center right;
}

	.tile:hover {
		background-color: var(--vision-ui-lightest-grey);
	}

	.tile.full-width {
		flex-basis: 100%; /* Forces the tile to full width. */
	}