#dashboardMain {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	align-content: center;
	max-width: 80rem;
	margin: 0 auto;
}
#dashboardMain h1 {
	text-align: center;
	margin: 1rem auto;
}
.dashboardText {
	max-width: 54rem;
	margin-left: 2rem;
	padding: 1rem 1rem;
}
.tiles {
	margin: 1rem auto 1rem auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	max-width: 60rem;
	margin: auto;
	padding: 1rem;
}
.tiles h2 {
	/* background-color: #f2f2f2; */
	z-index: 99;
	margin: 0rem auto 1rem auto;
	font-size: 2rem;
	text-align: center;
}
.tileRow {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin: auto;
	max-width: 18rem;
}
.tile {
	margin: 3rem 1rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border: 0.0625rem solid teal;
	background-color: white;
	padding: 1.125rem;
	min-height: 14rem;
	width: 16rem;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 7px, rgba(0, 0, 0, 0.24) 0px 3px 6px;
	user-select: none;
}
a.tile {
	cursor: pointer;
}
.tile:hover {
	border: 0.1875rem solid teal;
	padding: 1rem;
}
.tile.noClick:hover .tile:hover .trIcon,
.tile:hover .tileElement {
	color: teal;
}
.tile h3,
.tile h2 {
	margin: -2.5rem auto 0rem auto;
	text-align: center;
}
.tileIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 5rem;
	top: -3rem;
	width: 4rem;
	height: 4rem;
	background-color: white;
	border: 0.0625rem solid teal;
	border-radius: 2rem;
	font-size: 2rem;
	color: teal;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 7px, rgba(0, 0, 0, 0.12) 0px 3px 6px;
}
.tileElement {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border: 0.0625rem solid #ccc;
	background-color: white;
	margin: 0.25rem auto;
	width: 95%;
	/* border-radius:0.25rem; */
}
a.tileElement:hover {
	border-color: teal;
}
.tileEl{
	font-size:0.9rem;
}
.lockedTile {
	color: #ccc;
	border-color: #ccc;
	cursor: default;
}
.lockedTile:hover {
	color: #ccc;
	border-color: #ccc;
	cursor: default;
	border-width: 0.0625rem;
	padding: 1.125rem;
}
a.lockedTile:hover {
	padding: 0.25rem 1rem;
	background-color: white;
}
.tile:hover .tileIcon {
	border: 0.1875rem solid teal;
}
.lockedTile:hover .tileIcon,
.lockedTile .tileIcon {
	border: 0.0625rem solid #ccc;
	color: #ccc;
}
.lockedTile h3,
.lockedTile .tileElement,
.lockedTile:hover .tileElement,
.lockedTilehover .trIcon {
	color: #ccc;
}
.noClick:hover {
	cursor: default;
	padding: 1.125rem;
	border: 0.0625rem solid teal;
}
.tileElement .trIcon {
	margin-right: 0.5rem;
	color: #ccc;
	background-color: white;
	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
	font-size: 1.25rem;
	height: 100%;
}
a.tileElement,
button.tileElement,
div.tileElement {
	display: flex;
	flex-flow: row wrap;
	margin: 0.25rem 0.25rem 0.25rem 0.25rem;
	color: #666;
	font-size: 0.9rem;
	padding: 0;
	text-align: left;
}
.largeButton {
	font-size: 2.5rem;
	border-radius: 1rem;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0.75rem 1.5rem;
	display:flex;
	justify-content: center;
	align-items: center;
}
a.tileElement:hover,
button.tileElement:hover {
	text-decoration: none;
}
div.tileElement {
	border: none;
	color: #666;
	font-size: 1rem;
	/* font-weight:bold; */
}
.tutorialDetails {
	margin: 1rem auto;
	color: teal;
	font-weight: bold;
}
.tutorialDetails td {
	padding: 0.25rem;
}
.tutorialField {
	display: none;
}
.tutorialLabel {
	text-align: left;
	padding: 0 0.25rem 0 0.25rem;
	white-space: nowrap;
}
#loadTutorial{
	display:none;
}
@media (min-width: 39rem) {
	.tileRow {
		max-width: 36rem;
	}
	.tileWide {
		width: 31.625rem;
	}
	.tileWide .tileIcon {
		left: 12.8125rem;
	}
	.tutorialField {
		display: flex;
		padding: 0 0.5rem 0 0.5rem;
		width: 7rem;
	}
	#loadTutorial{
		display:flex;
	}
}
@media (min-width: 40rem) {
	
}
@media (min-width: 60rem) {
	.tileRow {
		max-width: 54rem;
	}
	
}
@media (min-width: 82rem) {
	.tile {
		margin: 3rem 1rem 1rem 1rem;
	}
}