.hk-agenda__month {
	border-collapse: separate;
	border-spacing: 3px;
}

.hk-agenda__legend {
	max-width: 800px;
	border-collapse: separate;
	border-spacing: 3px;
}

.hk-agenda__label {
	text-align: center;
	color: #999;
	width: 17px;
	height: 18px;
	font-size: 12px;
}

.hk-agenda__day--inactive {
	border: 1px solid #eee;
	background:#FFF;
	height: 30px;
	width: 30px;
	padding: 0;
}

[class*="hk-agenda__day--"] {
	height: 30px;
	width: 30px;
	padding: 0;
	text-align: center;
	cursor: pointer;
	font-size: 12px;
	transition: background 0.1s, color 0.1s;
}

.hk-agenda__day--past {
	opacity: 0.3;
	cursor: default;
}

.hk-agenda__day--FF {
	border: 1px solid #ccc;
	background: #FFF;
	color: #333;
}

.hk-agenda__day--SS,
.hk-agenda__day--FS,
.hk-agenda__day--SF {
	border: 1px solid #033745;
	background: #033745;
	color: #eee;
}

.hk-agenda__day--PP {
	border: 1px solid #fbb76e;
	background: #fdcc92;
	color: #773500;
}

.hk-agenda__day--FP {
	border: 1px solid #ccc;
	border-bottom: 1px solid #fbb76e;
	border-right: 1px solid #fbb76e;
	background: #fdcc92 url(/img/calendar/provisorisch_start.svg) 50% 50%;
	color: #773500;
}

.hk-agenda__day--PF {
	border: 1px solid #ccc;
	border-top: 1px solid #fbb76e;
	border-left: 1px solid #fbb76e;
	background: #fdcc92 url(/img/calendar/provisorisch_end.svg) 50% 50%;
	color: #773500;
}

.hk-agenda__day--BB {
	border: 1px solid #d74a40;
	background: #f2685d;
	color: #2f0502;
}

.hk-agenda__day--FB {
	border: 1px solid #ccc;
	border-bottom: 1px solid #d74a40;
	border-right: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/besetzt_start.svg) 50% 50%;
	color: #2f0502;
}

.hk-agenda__day--BF {
	border: 1px solid #ccc;
	border-top: 1px solid #d74a40;
	border-left: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/besetzt_end.svg) 50% 50%;
	color: #2f0502;
}

.hk-agenda__day--PB {
	border-top: 1px solid #fbb76e;
	border-left: 1px solid #fbb76e;
	border-bottom: 1px solid #d74a40;
	border-right: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/provisorisch_end-besetzt_start.svg) 50% 50%;
	color: #2f0502;
}

.hk-agenda__day--BP {
	border: 1px solid #fbb76e;
	border-right: 1px solid #fbb76e;
	border-top: 1px solid #d74a40;
	border-left: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/besetzt_end-provisorisch_start.svg) 50% 50%;
	color: #2f0502;
}

.hk-agenda__day--SP {
	border-top: 1px solid #033745;
	border-right: 1px solid #033745;
	border-bottom: 1px solid #fbb76e;
	border-right: 1px solid #fbb76e;
	background: #f2685d url(/img/calendar/selected_end-provisorisch_start.svg) 50% 50%;
	color: #eee;
}

.hk-agenda__day--PS {
	border-bottom: 1px solid #033745;
	border-left: 1px solid #033745;
	border-top: 1px solid #fbb76e;
	border-left: 1px solid #fbb76e;
	background: #f2685d url(/img/calendar/provisorisch_end-selected_start.svg) 50% 50%;
	color: #eee;
}

.hk-agenda__day--SB {
	border-top: 1px solid #033745;
	border-right: 1px solid #033745;
	border-bottom: 1px solid #d74a40;
	border-right: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/selected_end-besetzt_start.svg) 50% 50%;
	color: #eee;
}

.hk-agenda__day--BS {
	border-bottom: 1px solid #033745;
	border-left: 1px solid #033745;
	border-top: 1px solid #d74a40;
	border-left: 1px solid #d74a40;
	background: #f2685d url(/img/calendar/besetzt_end-selected_start.svg) 50% 50%;
	color: #eee;
}

.hk-agenda__day--NN,
.hk-agenda__day--NP,
.hk-agenda__day--NB,
.hk-agenda__day--BN,
.hk-agenda__day--PN,
.hk-agenda__day--NF,
.hk-agenda__day--FN {
	border: 1px solid #999;
	background: #BFBFBF;
	color: #444;
}

.hk-agenda__title {
	padding: 15px 0 10px 3px;
}

.hk-agenda__legend-block {
	width: 26px;
	height: 26px;
	display: inline-block;
	float: left;
	margin-bottom: 10px;
}

.hk-agenda__legend-label {
	display: inline-block;
	line-height: 26px;
	padding-left: 10px;
	margin-bottom: 10px;
}


/* Mobile */

/* sm */
@media (max-width: 767px) {
	.hk-agenda__legend [class*="col-"] {
		margin-bottom: 0;
	}

	.hk-agenda [class*="col-"] {
		margin-bottom: 10px;
	}

	.hk-agenda__title {
		padding: 5px 0 0 3px;
	}
}

/* xs */
@media (max-width: 575px) {

	/* a bit bigger than usual, because its still mobile */
	[class*="hk-agenda__day--"] {
		height: 40px;
		width: 40px;
		font-size: 13px;
	}

	.hk-agenda__legend-block {
		width: 26px;
		height: 26px;
	}
}

/* xs, only for the calendar, different from bootstrap */
/* only make 100% calendar width up to 420px */
@media (max-width: 420px) {
	.hk-agenda__month {
		width: 100%;
	}

	[class*="hk-agenda__day--"] {
		height: 12vw;
		font-size: 4vw;
	}

	.hk-agenda__label {
		font-size: 4vw;
	}

	.hk-agenda__legend-block {
		width: 26px;
		height: 26px;
	}
}