.history {
	width: 100%;
	height: 100%;
}

.history .top {
	padding: 10px;
	border-bottom: 1px solid #f0f0f0;
}

.history .monthContainer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.history.month .monthContainer {
	display: block;
}

.history .inactiveBubble {
	position: absolute;
	background-color: #E5E5E5;
	border-radius: 50%;
	text-align: center;
}

.history .inactiveBalloon {
	position: absolute;
	background-color: #d0d0d0;
	border-radius: 50%;
}

.history .activeBalloon {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #A5DC82;
	border-radius: 50%;
}

.history .balloonText {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.history .yearContainer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.history.year .yearContainer {
	display: block;
}

.history .yearContainer .label {
	position: absolute;
	line-height: 20px;
	text-align: center;
}

.history .cell {
	position: absolute;
}

.history .activityIcon, .history .sessionIcon {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 50%;
	background-size: 100%;
}

.history .toggleSection {
	width: 130px;
}

.history.year .filterBySection {
	display: none;
}

.history .label {
	text-align: center;
}

.history .toggle  {
	float: left;
	width: 50%;
	border: 1px solid #e0e0e0;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
}

.history .toggle.selected  {
	background-color: #0eb3fc;
	color: #ffffff;
	cursor: auto;
}

.history .left  {
	border-radius: 5px 0 0 5px;
}

.history .right {
	border-radius: 0 5px 5px 0;
	border-left: none;
}