@maleColor: @infoColor;
@femaleColor: #D67FB0;

.easy-pie-gender {
	.value {
		position: absolute;
		left: 0;
		right: 0;
		top: 27%;
		p { margin: 0; &.sublead { font-size: 18px; font-weight: 300; } }
		.male { color: @maleColor; }
		.female { color: @femaleColor; }
	}
}

#chart_gender {
	height: 100px;
	width: 100%;
}
#chart_metrics {
	height: 400px;
	width: 100%;
}
#metrics {
	table {
		width: 100%;
		tr:hover td { background: #fafafa; }
		td {
			padding: @spacing;
			border-bottom: 1px solid @contentBorder;
			cursor: pointer;
			&.legendColorBox {
				width: 10px;
				> div { width: 14px; margin: 0 auto; }
			}
			&.legendLabel { padding-left: 0; }
			&.legendSelect { width: 10px; }
		}
	}
}

.text-female { color: @femaleColor; }
.text-female-light { color: lighten(@femaleColor, 20%); }
.text-male { color: @maleColor; }
.text-male-light { color: lighten(@maleColor, 20%); }

.timeline-appointments {
	> li {
		background: #fff;
		margin-left: 100px;
		border-left: 1px solid @primaryColor;
		position: relative;
		.time {
			position: absolute;
			left: -90px;
			top: -10px;
			width: 70px;
			text-align: right;
			color: #222;
		}
		.dot {
			position: absolute;
			left: -6px;
			top: -6px;
			background: #fff;
			.rounded(50%, 50%, 50%, 50%);
		}
		.appointments {
			min-height: 60px;
			background: -webkit-linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
			background: -moz-linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
			background: linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
			-webkit-background-size: 100% 30px;
			-moz-background-size: 100% 30px;
			-ms-background-size: 100% 30px;
			background-size: 100% 30px;
			ul li {
				line-height: 30px;
				padding: 0 10px;
				.btn-group-xs {
					margin-top: 4px;
				}
				.apt {
					display: block;
					line-height: 30px;
				}
			}
		}
		&:first-of-type {
			padding-top: 30px;
			.time {
				top: 20px;
			}
			.dot { top: 24px; }
		}
	}
}