div.appTilesTitle {
	font-family: "TitleFontRegular", "Arial", sans-serif;
	font-size: 60px;
	letter-spacing: 15px;
	color: hsl(0, 0%, 100%);
	text-align: center;
	height: 50px;
	line-height: 50px;
	margin-top: 30px;
}

.phoneView div.appTilesTitle {
	font-size: 50px;
	height: 40px;
	line-height: 40px;	
}

div.appTilePanel, div.appTilePanelWithTitle {
	position: absolute;
	z-index: 1;
	width: auto;
	left: 0px;
	right: 0px;
	height: auto;
	top: 0px;
	bottom: 0px;
	display: flex;
  justify-content: center;
  align-items: center;
}

div.appTilePanelWithTitle {
	top: 80px;
}

.phoneView div.appTilePanelWithTitle {
	top: 70px;
}

div.appTileContainer {
  display: grid;
  width: 100%;
  max-width: calc((4 * 180px) + (3 * 40px) + (2 * 20px) + 10px); /* limit to 4 columns by setting max-width to 4 grid cells + 3 gaps + 2 padding + xtra */
	grid-template-columns: repeat(auto-fill, 180px);
	/*grid-template-columns: auto auto;*/
	/*grid-template-columns: repeat(auto-fit, 200px);*/
	/*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
	justify-content: center;
  gap: 40px;
  padding: 0px 20px;
}

.phoneView div.appTileContainer {
	grid-template-columns: repeat(auto-fill, 150px);
	gap: 20px;
}

.appGridMenu div.appTileContainer {
	grid-template-columns: repeat(auto-fill, 140px);
	gap: 20px;
}



/*** APP TILE - GRID ***/
div.appTile, div.appTileActive, div.appTileCurrentApp {
	position: relative;
	width: 100%;
	background-color: hsl(205, 75%, 30%);
	padding: 20px;
	border-radius: 20px;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView div.appTile, .phoneView div.appTileActive, .phoneView div.appTileCurrentApp {
	padding: 15px;
	border-radius: 15px;
}

.appGridMenu div.appTile, .appGridMenu div.appTileActive, .appGridMenu div.appTileCurrentApp {
	padding: 12px;
	border-radius: 12px;
}

/*
.standardView div.appTile:hover {
	background-color: hsl(205, 85%, 35%);
}
*/

div.appTileActive {
	background-color: hsl(205, 100%, 50%);
	cursor: default;
	pointer-events: none;
}

div.appTileCurrentApp {
	background-color: hsl(50, 100%, 55%);
	cursor: default;
	pointer-events: none;
}

div.appTileImageWrapper {
	position: relative;
}

div.appTileImage {
	/*width: 200px;*/
	/*height: 160px;*/
	width: 100%;
	aspect-ratio: 5/4;
	background-color: hsl(205, 15%, 35%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: solid 1px hsl(205, 25%, 90%);
	border-radius: 10px;
	pointer-events: none;
}

div.appTileCurrentApp div.appTileImage {
	border-color: hsl(50, 10%, 20%);
}

div.appTileLabel {
	font-size: 20px;
	line-height: 145%;
	color: hsl(0, 0%, 100%);
	text-align: center;
	margin-top: 15px;
	pointer-events: none;
}

.phoneView div.appTileLabel {
	font-size: 18px;
	margin-top: 10px;
}

.appGridMenu div.appTileLabel {
	font-size: 16px;
	margin-top: 10px;
}

div.appTileCurrentApp div.appTileLabel {
	color: hsl(50, 10%, 20%);
}

img.appTileBadge {
	position: absolute;
	z-index: 5;
	width: 40px;
	height: 40px;
	left: -6px;
	top: -6px;
}

.phoneView img.appTileBadge {
	width: 36px;
	height: 36px;
	left: -6px;
	top: -6px;
}

.appGridMenu img.appTileBadge {
	width: 34px;
	height: 34px;
	left: -6px;
	top: -6px;
}


/*** APP TILE - LIST ***/
/*
div.appListTile, div.appListTileActive, div.appListTileCurrentApp {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: hsl(205, 75%, 30%);
	padding: 15px;
	border-radius: 15px;
	margin: 30px 10px 0px 10px;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView div.appListTile, .phoneView div.appListTileActive, .phoneView div.appListTileCurrentApp {
	margin: 30px 15px 0px 15px;
}

div.appListTileActive {
	background-color: hsl(205, 100%, 50%);
	cursor: default;
	pointer-events: none;
}

div.appListTileCurrentApp {
	background-color: hsl(50, 100%, 55%);
	cursor: default;
	pointer-events: none;
}

div.appListTileImage {
	width: 40%;
	aspect-ratio: 3 / 2;
	background-color: hsl(205, 15%, 35%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: solid 1px hsl(0, 0%, 100%);
	border-radius: 10px;
	pointer-events: none;
}

div.appListTileCurrentApp div.appListTileImage {
	border-color: hsl(50, 10%, 20%);
}

div.appListTileLabel {
	font-size: 18px;
	line-height: 145%;
	color: hsl(0, 0%, 100%);
	pointer-events: none;
}

div.appListTileCurrentApp div.appListTileLabel {
	color: hsl(50, 10%, 20%);
}

img.appListTileBadge {
	position: absolute;
	z-index: 5;
	width: 36px;
	height: 36px;
	left: -15px;
	top: -15px;
}
*/