.calendar_canvas {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;

	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.calendar_row {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.calendar_day {
	background: #76aa62;

	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.calendar_row:first-child .calendar_day:first-child {
	margin-left: auto;
}

.calendar_day.future {
	background: #e8e8e8;
}

.calendar_incident {
	/* bg color and height are set in the html */
	width: 100%;
	border-top: 1px solid white;
}

.calendar_incident.red, .legend_swatch.red {
	background: #f14d32;
}

.calendar_incident.yellow, .legend_swatch.yellow {
	background: #f3a507;
}

.calendar_incident.blue, .legend_swatch.blue {
	background: #79ABE5;
}

.month {
	margin-bottom: 25px;
}

/* legend */
.calendar_legend, .legend_item {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.calendar_legend {
	margin-left: auto;
	font-size: 0.9rem;
	font-weight: bold;
}

.legend_swatch {
	width: 16px;
	height: 16px;
}

.calendar_heading {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}


/* calendar math */
/* boxes are 33x33 with 5px between them and between rows */
/* 261 = 33*7 + 6*5 */

.days, .month {
	width: 261px;
}
.calendar_day {
	width: 33px;
	height: 33px;
}
.calendar_day + .calendar_day {
	margin-left: 5px;
}
.calendar_row {
	margin-bottom: 5px;
}

/* compensate for rows with 2 months */
.calendar_canvas:after {
	content: ' ';
	width: 261px;
	display: block;
}

@media (max-width: 1199px) and (min-width: 736px) {
	.days, .month {
		width: 219px;
	}
	.calendar_day {
		width: 27px;
		height: 27px;
	}
	.calendar_canvas:after {
		width: 219px;
	}
}

@media (max-width: 735px) and (min-width: 610px) {
	.days, .month {
		width: 179px;
	}
	.calendar_day {
		width: 23px;
		height: 23px;
	}
	.calendar_day + .calendar_day {
		margin-left: 3px;
	}
	.calendar_row {
		margin-bottom: 3px;
	}
	.month .float-right {
		/* hides the "% Uptime" message */
		display: none;
	}
	.calendar_canvas:after {
		width: 179px;
	}
}

@media (max-width: 609px) {
	.calendar_canvas {
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;

		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.calendar_heading {
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.calendar_legend {
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;

		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}

	.legend_item {
		margin-left: 0;
		margin-bottom: 0.5rem;
	}
}