.tiles {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: stretch;

	.tiles-inner {
		display: flex;
		flex: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-self: stretch;
		padding: 2px;

		.tiles-empty {

		}

		.tile-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			align-self: stretch;
			color: $white;
			margin: 1px;
			padding: 15px 10px 15px 15px;
			border-radius: $baseRadius;
			border-bottom: 1px solid transparent;

			&:hover,
			&.active {
				border-left: 4px solid $seaBlue;
				border-radius: $baseRadius;
				border-bottom: 2px solid #171717;
				background: #222;

				&:hover {
					opacity: 1;
				}
			}


			&.disabled {

				.tile-tail {
					.head-icon {
						i {
							color: #444;
						}
					}
				}
			}

			.tile-tail {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				align-self: stretch;
				margin-left: 10px;


				.head-icon {
					flex: 1;

					i {
						font-size: 6px;
						color: white;
						opacity: .8;
						display: flex;
					}
				}

				.status-icons {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					i {
						font-size: 16px;
						margin-left: 10px;
					}
				}
			}

			.tile-body {
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 15px;
				font-weight: normal;
				letter-spacing: 0.8px;
				line-height: 22px;
				margin: 0;
				flex-wrap: nowrap;
			}

			.tile-metrics {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				margin: 0;

				.foot-span span,
				.foot-span {
					opacity: .8;
					font-size: 13px;
					font-family: "Courier New";
				}
			}



		}
	}
}