.tron {
	position: relative;
	
	.kitkat-chart {
		height: 250px;
	}
	&.focus {
		.kitkat-chart {
			height: 300px;
		}
	}
	h5 {
		text-transform: uppercase;
		font-weight: bold;
	}
	.message {
		text-align: center;
		padding: 15px 0px;
		.bold {
			font-weight: bold;
		}
	}
	.metric {
		&.selected {
			ul li div {
				&:before {
					content: '\25cf';
					display: inline-block;
					position: relative;
					font-size: 24px;
					line-height: 16px;
					top: 1px;
					margin-right: 2px;
				}
				span {
					color: @gray-dark;
				}
			}
		}
		ul li {
			padding: 5px 20px;
			div {
				font-size: 16px;
				min-height: 22px;
			}
			&.clear-left {
				clear: left
			}
		}
	}
	.last-updated {
		text-align: center;
		padding: 5px 0;
	}
	.error {
		position: absolute;
		width: 100%;
		height: 250px; // Same height as chart
		.error-overlay {
			position: absolute;
			background: #FFF;
			opacity: 0.5;
			width: 100%;
			height: 100%;
		}
		.error-content {
			position: relative;
			display: inline-block;
			width: 100%;
			top: 50%;
			margin-top: -25%;
			text-align: center;
			padding: 0px 20%;
		}
	}
	.overlay,
	.loading {
		position: absolute;
		width: 100%;
		height: 300px;
		.content {
			display: flex;
			align-items: center;
	  		justify-content: center;
	  		flex-direction: row;
	  		flex-wrap: wrap;
		    height: 100%;
		    padding: 30px 100px 115px;
		    background: rgba(255,255,255, 0.5);
		    .message {
		    	width: 100%;
		    }
		}
	}
}