/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
 *
 *
 * Nomenclature modification map:
 *
 * mdc-layout-grid								Grid
 * mdc-layout-grid__inner						Grid-inner
 * mdc-layout-grid__cell						Grid-cell
 * mdc-layout-grid__cell--span-1				Grid-cell--1
 * mdc-layout-grid__cell--span-1-desktop		Grid-cell--1-lg
 * mdc-layout-grid__cell--span-1-tablet			Grid-cell--1-md
 * mdc-layout-grid__cell--span-1-phone			Grid-cell--1-sm
 * mdc-layout-grid__cell--align-top				Grid-cell--alignTop
 * mdc-layout-grid__cell--align-middle			Grid-cell--alignMiddle
 * mdc-layout-grid__cell--align-bottom			Grid-cell--alignBottom
 * mdc-layout-grid--fixed-column-width			Grid--fixedWidth
 * mdc-layout-grid--align-left					Grid--alignLeft
 * mdc-layout-grid--align-right					Grid--alignRight
 */

:root {
	--grid-margin-lg: var(--orbe-spacing-4);
	--grid-gutter-lg: var(--orbe-spacing-2);
	--grid-column-width-lg: 72px;
	--grid-margin-md: var(--orbe-spacing-4);
	--grid-gutter-md: var(--orbe-spacing-4);
	--grid-column-width-md: 72px;
	--grid-margin-sm: var(--orbe-spacing-4);
	--grid-gutter-sm: var(--orbe-spacing-4);
	--grid-column-width-sm: 72px;
}

@media (min-width: 840px) {
	.Grid {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 24px;
		padding: var(--grid-margin-lg, 24px);
	}
}
@media (min-width: 480px) and (max-width: 839px) {
	.Grid {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 16px;
		padding: var(--grid-margin-md, 16px);
	}
}
@media (max-width: 479px) {
	.Grid {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 16px;
		padding: var(--grid-margin-sm, 16px);
	}
}

@media (min-width: 840px) {
	.Grid-inner {
		display: flex;
		flex-flow: row wrap;
		align-items: stretch;
		margin: -12px;
		margin: calc(var(--grid-gutter-lg, 24px) / 2 * -1);
	}
	@supports (display: grid) {
		.Grid-inner {
			display: grid;
			margin: 0;
			grid-column-gap: 16px;
			grid-row-gap: var(--grid-gutter-lg, 24px);
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
	}
}
@media (min-width: 480px) and (max-width: 839px) {
	.Grid-inner {
		display: flex;
		flex-flow: row wrap;
		align-items: stretch;
		margin: -8px;
		margin: calc(var(--grid-gutter-md, 16px) / 2 * -1);
	}
	@supports (display: grid) {
		.Grid-inner {
			display: grid;
			margin: 0;
			grid-gap: 16px;
			grid-gap: var(--grid-gutter-md, 16px);
			grid-template-columns: repeat(8, minmax(0, 1fr));
		}
	}
}
@media (max-width: 479px) {
	.Grid-inner {
		display: flex;
		flex-flow: row wrap;
		align-items: stretch;
		margin: -8px;
		margin: calc(var(--grid-gutter-sm, 16px) / 2 * -1);
		padding-bottom: var(--fixed-bar-height, 0px);
	}
	@supports (display: grid) {
		.Grid-inner {
			display: grid;
			margin: 0;
			grid-gap: 16px;
			grid-gap: var(--grid-gutter-sm, 16px);
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}

@media (min-width: 840px) {
	.Grid-cell {
		width: auto;
		width: calc(33.3333333333% - var(--grid-gutter-lg, 24px));
		box-sizing: border-box;
		margin: 12px;
		margin: calc(var(--grid-gutter-lg, 24px) / 2);
	}
	@supports (display: grid) {
		.Grid-cell {
			width: auto;
			grid-column-end: span 4;
		}
	}
	@supports (display: grid) {
		.Grid-cell {
			margin: 0;
		}
	}
	.Grid-cell--1,
	.Grid-cell--1-lg {
		width: calc(8.3333333333% - 24px);
		width: calc(8.3333333333% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--1,
		.Grid-cell--1-lg {
			width: auto;
			grid-column-end: span 1;
		}
	}

	.Grid-cell--2,
	.Grid-cell--2-lg {
		width: calc(16.6666666667% - 24px);
		width: calc(16.6666666667% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--2,
		.Grid-cell--2-lg {
			width: auto;
			grid-column-end: span 2;
		}
	}

	.Grid-cell--3,
	.Grid-cell--3-lg {
		width: calc(25% - 24px);
		width: calc(25% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--3,
		.Grid-cell--3-lg {
			width: auto;
			grid-column-end: span 3;
		}
	}

	.Grid-cell--4,
	.Grid-cell--4-lg {
		width: calc(33.3333333333% - 24px);
		width: calc(33.3333333333% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--4,
		.Grid-cell--4-lg {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--5,
	.Grid-cell--5-lg {
		width: calc(41.6666666667% - 24px);
		width: calc(41.6666666667% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--5,
		.Grid-cell--5-lg {
			width: auto;
			grid-column-end: span 5;
		}
	}

	.Grid-cell--6,
	.Grid-cell--6-lg {
		width: calc(50% - 24px);
		width: calc(50% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--6,
		.Grid-cell--6-lg {
			width: auto;
			grid-column-end: span 6;
		}
	}

	.Grid-cell--7,
	.Grid-cell--7-lg {
		width: calc(58.3333333333% - 24px);
		width: calc(58.3333333333% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--7,
		.Grid-cell--7-lg {
			width: auto;
			grid-column-end: span 7;
		}
	}

	.Grid-cell--8,
	.Grid-cell--8-lg {
		width: calc(66.6666666667% - 24px);
		width: calc(66.6666666667% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--8,
		.Grid-cell--8-lg {
			width: auto;
			grid-column-end: span 8;
		}
	}

	.Grid-cell--9,
	.Grid-cell--9-lg {
		width: calc(75% - 24px);
		width: calc(75% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--9,
		.Grid-cell--9-lg {
			width: auto;
			grid-column-end: span 9;
		}
	}

	.Grid-cell--10,
	.Grid-cell--10-lg {
		width: calc(83.3333333333% - 24px);
		width: calc(83.3333333333% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--10,
		.Grid-cell--10-lg {
			width: auto;
			grid-column-end: span 10;
		}
	}

	.Grid-cell--11,
	.Grid-cell--11-lg {
		width: calc(91.6666666667% - 24px);
		width: calc(91.6666666667% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--11,
		.Grid-cell--11-lg {
			width: auto;
			grid-column-end: span 11;
		}
	}

	.Grid-cell--12,
	.Grid-cell--12-lg {
		width: calc(100% - 24px);
		width: calc(100% - var(--grid-gutter-lg, 24px));
	}
	@supports (display: grid) {
		.Grid-cell--12,
		.Grid-cell--12-lg {
			width: auto;
			grid-column-end: span 12;
		}
	}
}
@media (min-width: 480px) and (max-width: 839px) {
	.Grid-cell {
		width: calc(50% - 16px);
		width: calc(50% - var(--grid-gutter-md, 16px));
		box-sizing: border-box;
		margin: 8px;
		margin: calc(var(--grid-gutter-md, 16px) / 2);
	}
	@supports (display: grid) {
		.Grid-cell {
			width: auto;
			grid-column-end: span 4;
		}
	}
	@supports (display: grid) {
		.Grid-cell {
			margin: 0;
		}
	}
	.Grid-cell--1,
	.Grid-cell--1-md {
		width: calc(12.5% - 16px);
		width: calc(12.5% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--1,
		.Grid-cell--1-md {
			width: auto;
			grid-column-end: span 1;
		}
	}

	.Grid-cell--2,
	.Grid-cell--2-md {
		width: calc(25% - 16px);
		width: calc(25% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--2,
		.Grid-cell--2-md {
			width: auto;
			grid-column-end: span 2;
		}
	}

	.Grid-cell--3,
	.Grid-cell--3-md {
		width: calc(37.5% - 16px);
		width: calc(37.5% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--3,
		.Grid-cell--3-md {
			width: auto;
			grid-column-end: span 3;
		}
	}

	.Grid-cell--4,
	.Grid-cell--4-md {
		width: calc(50% - 16px);
		width: calc(50% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--4,
		.Grid-cell--4-md {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--5,
	.Grid-cell--5-md {
		width: calc(62.5% - 16px);
		width: calc(62.5% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--5,
		.Grid-cell--5-md {
			width: auto;
			grid-column-end: span 5;
		}
	}

	.Grid-cell--6,
	.Grid-cell--6-md {
		width: calc(75% - 16px);
		width: calc(75% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--6,
		.Grid-cell--6-md {
			width: auto;
			grid-column-end: span 6;
		}
	}

	.Grid-cell--7,
	.Grid-cell--7-md {
		width: calc(87.5% - 16px);
		width: calc(87.5% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--7,
		.Grid-cell--7-md {
			width: auto;
			grid-column-end: span 7;
		}
	}

	.Grid-cell--8,
	.Grid-cell--8-md {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--8,
		.Grid-cell--8-md {
			width: auto;
			grid-column-end: span 8;
		}
	}

	.Grid-cell--9,
	.Grid-cell--9-md {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--9,
		.Grid-cell--9-md {
			width: auto;
			grid-column-end: span 8;
		}
	}

	.Grid-cell--10,
	.Grid-cell--10-md {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--10,
		.Grid-cell--10-md {
			width: auto;
			grid-column-end: span 8;
		}
	}

	.Grid-cell--11,
	.Grid-cell--11-md {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--11,
		.Grid-cell--11-md {
			width: auto;
			grid-column-end: span 8;
		}
	}

	.Grid-cell--12,
	.Grid-cell--12-md {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-md, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--12,
		.Grid-cell--12-md {
			width: auto;
			grid-column-end: span 8;
		}
	}
}
@media (max-width: 479px) {
	.Grid-cell {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
		box-sizing: border-box;
		margin: 8px;
		margin: calc(var(--grid-gutter-sm, 16px) / 2);
	}
	@supports (display: grid) {
		.Grid-cell {
			width: auto;
			grid-column-end: span 4;
		}
	}
	@supports (display: grid) {
		.Grid-cell {
			margin: 0;
		}
	}
	.Grid-cell--1,
	.Grid-cell--1-sm {
		width: calc(25% - 16px);
		width: calc(25% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--1,
		.Grid-cell--1-sm {
			width: auto;
			grid-column-end: span 1;
		}
	}

	.Grid-cell--2,
	.Grid-cell--2-sm {
		width: calc(50% - 16px);
		width: calc(50% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--2,
		.Grid-cell--2-sm {
			width: auto;
			grid-column-end: span 2;
		}
	}

	.Grid-cell--3,
	.Grid-cell--3-sm {
		width: calc(75% - 16px);
		width: calc(75% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--3,
		.Grid-cell--3-sm {
			width: auto;
			grid-column-end: span 3;
		}
	}

	.Grid-cell--4,
	.Grid-cell--4-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--4,
		.Grid-cell--4-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--5,
	.Grid-cell--5-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--5,
		.Grid-cell--5-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--6,
	.Grid-cell--6-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--6,
		.Grid-cell--6-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--7,
	.Grid-cell--7-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--7,
		.Grid-cell--7-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--8,
	.Grid-cell--8-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--8,
		.Grid-cell--8-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--9,
	.Grid-cell--9-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--9,
		.Grid-cell--9-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--10,
	.Grid-cell--10-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--10,
		.Grid-cell--10-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--11,
	.Grid-cell--11-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--11,
		.Grid-cell--11-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}

	.Grid-cell--12,
	.Grid-cell--12-sm {
		width: calc(100% - 16px);
		width: calc(100% - var(--grid-gutter-sm, 16px));
	}
	@supports (display: grid) {
		.Grid-cell--12,
		.Grid-cell--12-sm {
			width: auto;
			grid-column-end: span 4;
		}
	}
}

.Grid-cell--alignTop {
	align-self: flex-start;
}
@supports (display: grid) {
	.Grid-cell--alignTop {
		align-self: start;
	}
}
.Grid-cell--alignMiddle {
	align-self: center;
}
.Grid-cell--alignBottom {
	align-self: flex-end;
}
@supports (display: grid) {
	.Grid-cell--alignBottom {
		align-self: end;
	}
}

@media (min-width: 840px) {
	.Grid--fixedWidth {
		width: 1176px;
		width: calc( var(--grid-column-width-lg, 72px) * 12 + var(--grid-gutter-lg, 24px) * 11 + var(--grid-margin-lg, 24px) * 2 );
	}
}
@media (min-width: 480px) and (max-width: 839px) {
	.Grid--fixedWidth {
		width: 720px;
		width: calc( var(--grid-column-width-md, 72px) * 8 + var(--grid-gutter-md, 16px) * 7 + var(--grid-margin-md, 16px) * 2 );
	}
}
@media (max-width: 479px) {
	.Grid--fixedWidth {
		width: 368px;
		width: calc( var(--grid-column-width-sm, 72px) * 4 + var(--grid-gutter-sm, 16px) * 3 + var(--grid-margin-sm, 16px) * 2 );
	}
}

.Grid--alignLeft {
	margin-right: auto;
	margin-left: 0;
}

.Grid--alignRight {
	margin-right: 0;
	margin-left: auto;
}