.dashboard {
	max-width: 1680px;

	.panel {
		max-width: 100% !important;
	}

	#analytics-panel .panel-heading i {
		&.fa-expand {
			display: none;
		}

		&.fa-terminal::after {
			content: 'JSON';
			font-family: @font-family-sans-serif;
			font-weight: 600;
			color: @gray-dark;
			padding-left: .5em;
		}

		padding: .75em;
		background-color: @gray-lighter;
		color: @gray-base;
		cursor: pointer;
		.transition(all .4s);

		&.active {
			display: inline;
		}
	}

	.graph-container {
		padding-right: 50px;
		position: relative;
		background: @body-bg;

		&:hover {
			.fa-expand {
				color: @gray-lighter;
				background-color: @gray-base;
			}
		}

		&.fullscreen {
			width: 100%;
			padding: 40px;

			.fa-expand {
				top: 20px;
			}

			.graph-legend {
				top: 7rem;
				left: 12rem;
			}
		}

		&.pie-chart {
			padding-right: 0px;
			padding-left: 50px;
			min-height: 180px;

			.graph-legend {
				top: -10px;
				left: 0px;
			}

			&.compact {
				padding-left: 0px;
				padding-top: 60px;
			}

			&.legend-down {
				padding-left: 0px;
				padding-top: 0px;

				canvas {
					margin-bottom: 25px;
				}

				.graph-legend {
					position: relative;

					li {
						float: left;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						&:nth-child(odd) {
							margin-right: 2%;
						}
					}
				}
			}
		}

		.graph-legend {
			.box-header-font;
			display: inline-block;
			max-width: 100%;
			position: absolute;
			top: 2rem;
			left: 7rem;
			list-style-type: none;
			padding: 0.5rem 1rem;
			margin: 0;
			background: rgba(255, 255, 255, 0.66);
			border: 1px solid #ddd;

			li {
				div {
					border: 1px solid;
					width: 12px;
					height: 12px;
					vertical-align: -41%;
					margin-bottom: 5px;
					display: inline-block;
					margin-right: 5px;

					&.page-views {
						border-color: rgba(220,220,220,1);
						background-color: rgba(220,220,220,0.2);
					}
					&.unique-visitors {
						border-color: rgba(151,187,205,1);
						background-color: rgba(151,187,205,0.2);
					}
					&.anonymous {
						border-color: #46BFBD;
						background-color: #5AD3D1;
					}
					&.registered {
						border-color: #F7464A;
						background-color: #FF5A5E;
					}
					&.reading-posts {
						border-color: #46BFBD;
						background-color: #5AD3D1;
					}
					&.on-categories {
						border-color: #F7464A;
						background-color: #FF5A5E;
					}
					&.browsing-topics {
						border-color: #FDB45C;
						background-color: #FFC870;
					}
					&.recent {
						border-color: #949FB1;
						background-color: #A8B3C5;
					}
					&.unread {
						border-color: #949FB1;
						background-color: #9FB194;
					}
				}
			}
		}


	}

	.version-check {
		-webkit-transition: background, color 500ms ease-in;
		-moz-transition: background, color 500ms ease-in;
		-ms-transition: background, color 500ms ease-in;
		-o-transition: background, color 500ms ease-in;
		transition: background, color 500ms ease-in;
	}

	#unique-visitors, #active-users {
		margin-left: -15px;
		> div {
			width: 25%;
			font-size: 13px;
		}
	}

	.pageview-stats {
		strong {
			font-size: 22px;
		}
	}

	.motd textarea {
		width: 100%;
	}

	.stats {
		.formatted-number {
			font-size: 22px;
		}

		.stat {
			text-transform: uppercase;
			font-weight: 600;
			font-size: 10px;
			color: #999;
		}
	}

	.updatePageviewsGraph.active {
		font-weight: bold;
	}
}
