/*
 * Grid layout. Basic grid used uniform column widths. Grids with flowchart style arrows
 * have alternating widths to accomodate arrow graphics.
 */
.brickWall {
	display: Grid;  grid-template-columns: repeat(auto-fill, 15em);
	justify-content: Center;
	row-gap: 1em;  column-gap: 1em;
}
.brickWall.withArrows {
	grid-template-columns: repeat(auto-fill, 15em 5em);
}

/*
 * Individual bricks in the grid wall.
 */
.brickWall .brick {
	display: Flex;  flex-direction: Column;  flex-wrap: NoWrap;
	justify-content: Space-Between;

	width: 15em;  min-width: 15em;  max-width: 15em;  min-height: 7em;
	box-sizing: border-box;

	color: var(--buttonTextColour);  background-color: var(--buttonBackgroundColour);
	border: 1px Solid var(--buttonBorderColour);  border-radius: var(--themeBorderRadius);
	padding: 0.5em 1em;
}
.brickWall.withArrows .brick {
	min-height: 10em;
}

.brickWall .brick .title {
	font-weight: Bold;
}
.brickWall .brick .duration {
	display: Block;
	text-align: Right;
	font-size: 80%;
	color: var(--themeColour0Mid);
}
.brickWall .brick .date {
	display: Block;
	color: var(--themeColour0Mid);
	margin-top: 0.25em;  margin-bottom: 0.25em;
}

/* Icons. */
.brickWall .brick .title::before ,
.brickWall .brick .date::before {
	display: Block;  line-height: 1em;  
	text-align: Center;  width: 1.5em;

	font-family: 'FontAwesome';  font-size: 200%;
	float: Left;  margin-right: 0.25em;  margin-bottom: 0.25rem;
	color: var(--themeColour1);
}
.brickWall .brick.async .title::before { content: '\f19d'; }
.brickWall .brick.live .title::before { content: '\f108'; }
.brickWall .brick.live .date::before { content: '\f073'; }

/* Arrow in flowchart grid. */
.brickWall .arrow {
	display: Flex;  flex-direction: Row;
	align-items: Center;  justify-content: Center;
	
	width: 5em;  min-width: 5em;  max-width: 5em;  min-height: 6em;
	box-sizing: border-box;

	background-image: url('../images/vectors/arrow_right.svg');
	background-position: Center;  background-repeat: No-Repeat;  
	background-size: Contain;
}

/*
 * Faded.
 */
.brickWall .arrow.faded {
	background-image: url('../images/vectors/arrow_right_grey.svg');
	opacity: 0.5;
}
.brickWall.withArrows .brick.faded {
	opacity: 0.5;
}
.brickWall.withArrows .brick.faded ,
.brickWall.withArrows .brick.faded .title::before ,
.brickWall.withArrows .brick.faded .date::before {
	color: var(--themeColour0Mid);
	border-color: var(--themeColour0Mid);
}

/*
 * Calculator.
 */
#calculator {
	width: 50%;  min-width: 20em;
	padding: 0.5em 1em;
	border: 1px Solid var(--themeColour1);  border-radius: var(--themeBorderRadius);
	background-color: var(--themeColour1High);
	margin-left: Auto;  margin-top: 1em;
}
#calculator #result {
	color: var(--themeColour1);
}
#calculator #message {
	margin-left: 2em;
	color: var(--themeColour1);
}
#calculator > div {
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;
	justify-content: Space-Between;  align-items: Center;
}
#calculator > div button {
	margin-top: 0px;  margin-bottom: 0px;
	cursor: Pointer;
}

/*
 * Styles in wall to support calculator.
 */
#modules .brick {
	cursor: Pointer;
}
#modules .brick:active ,
#modules .brick:hover {
	background-color: var(--buttonBackgroundColourSelected);
}
#modules .brick.selected {
	background-color: var(--ljmuHighColour);
}