#current_bonus_points {
	margin: 1.5em 0;
	font-size: 1.5em;
	text-align: center;
}

#current_bonus_points .points {
	font-weight: bold;
	font-size: 1.2em;
}

#current_bonus_points .current_bonuspoints_date {
	font-size: 0.7em;
}

#bonus_points_details {
	text-align: center;
}

#bonus_points_details > * {
	text-align: left;
}

.year_container {
	margin: 1em auto;
	border: 1px solid transparent;
	max-width: 50em;
}

.year_container.visible_year {
	border-color: #CCCCCC;
}

.year_container .year_header {
	border: 1px solid #DDDDDD;
	padding: 0.8em;
	background-color: #ECECEC;
}

.year_container .year_header:hover {
	border: 1px solid #AAAAAA;
	background-color: #F3F3F3;
}

.year_container.visible_year .year_header {
	background-color: #DCDCDC;
	border-color: transparent;
}

.year_container .year_header .year_header_text {
	float: left;
	font-weight: bold;
	font-size: 1.2em;
}

.year_container .year_header .year_button_container {
	float: right;
}

.year_container .year_header:after {
	content: "";
	display: block;
	clear: both;
}

.year_content .progress_bar_animation_container {
	margin: 2em 0;
}


.month_container .month_header {
	margin-bottom: 0.3em;
	font-weight: bold;
	font-size: 1.3em;
	padding: 0 0.5em;
}

.month_container .month_content {
	margin-bottom: 1em;
}

table.bonus_points_list {
	border-collapse: collapse;
	border: 1px solid #AAAAAA;
	width: 100%;
}

table.bonus_points_list td {
	padding: 0.3em;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	vertical-align: middle;
}

table.bonus_points_list .header td {
	background-color: #0E3786;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}

table.bonus_points_list td.date {
	width: 20%;
}

table.bonus_points_list td.reason {
	font-size: 0.9em;
}

table.bonus_points_list td.reason .vorst_bez{
	font-weight: bold;
}

table.bonus_points_list td.points {
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	max-width: 5em;
	width: 11%;
}

table.bonus_points_list .bp_entry td.result {
	text-align: center;
	max-width: 5em;
}

table.bonus_points_list .bp_entry.positive td {
	background-color: #D9F2D9;
}

table.bonus_points_list .bp_entry.negative td {
	background-color: #FFE0CC;
}

table.bonus_points_list .bp_entry.positive td.result ,
table.bonus_points_list .bp_entry.negative td.result {
	background-color: #ECECEC;
}

table.bonus_points_list .bp_entry.positive:hover td {
	background-color: #FFFFFF;
}

table.bonus_points_list .bp_entry.negative:hover td {
	background-color: #FFFFFF;
}



@media (min-width: 40em) {
	#current_bonus_points {
		margin: 3em 0;
	}

	.month_container {
		padding: 0.5em;
	}

	.month_container .month_header {
		padding: 0;
	}
}