:root {
	--k-cal: 1.57;
}

.periods {
	text-align: center;
	font-size: 20px;
}

.year li {
	font-size: 72px !important;
}

.relative {
	position: relative;
}

.months ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.months li {
	display: inline-block;
	padding: 15px 25px;
	color: #888888;
	font-size: 45px;
	text-transform: uppercase;
	cursor: pointer;
}

.months ul li:hover, .months ul li.active {
	color: #D90000;
}

.month {
	text-align: -webkit-center;
}

.month thead th {
	text-align: center;
	font-weight: bold;
}

.month table {
	border-collapse: collapse;
	margin: 4px;
}

.month table td {
	border: 2px solid #A3A3A3;
	width: 100px;
	height: 100px;
}

.month table td.today {
	border: 4px solid #D90000;
}

.month table td.pas_de_place {
	background-image: repeating-linear-gradient(135deg, black, transparent 1px, transparent 11.5px);
	cursor: not-allowed !important;
}

.month table td.padding {
	border: none;
}

.month table td:hover:not(.padding) {
	background-color: #DFDFDF;
	cursor: pointer;
}

.month table th {
	font-weight: normal;
	color: #A8A8A8;
}

.month table td .day {
	position: absolute;
	color: #8C8C8C;
	bottom: -45px;
	right: 6px;
	font-weight: bold;
	font-size: 32pt;
}

.month table td .events {
	position: relative;
	padding-left: 0 !important;
	height: 0;
	margin-top: -52px;
	padding: 0;
}

.month table td .events li {
	display: block;
	height: 14px;
	background-color: limegreen;
	border-radius: 7px;
	margin: 8px;
	color: transparent;
}

.month table td:not(.active) .events li:not(:first-child) {
	display: none;
}

.month table td.active {
	outline: 6px dotted blue;
	background-color: powderblue !important;
}

.month table td.active .day {
	color: black;
}

.month table td .daytitle {
	display: none;
}

.month table td.active .events {
	position: absolute;
	top: 12em;
	list-style: none;
	margin: 22em 0 0 -38em;
	padding: 1em;
}

.month table td.active .events li {
	float: left;
	width: 4em;
	height: 3em;
	border: 3px solid black;
	text-align: center;
	line-height: 3em;
	font-weight: bold;
	font-size: 2em;
	background: none;
	color: black;
}

.month table td.active .events li:hover {
	background: lightgreen;
}

.month table td.active .events li:active {
	background: orange;
}

.month table td.active .daytitle {
	position: absolute;
	top: 1.5em;
	list-style: none;
	margin: 17em 0 0 -20em;
	color: #D90000;
	font-size: 36px;
	display: block;
	font-weight: bold;
	white-space: nowrap;
}


@media all and (min-width: 1000px) {

	:root {
		--k-cal: 1;
	}

	.year li {
		font-size: 35px !important;
	}

	.months li {
		padding: 10px 10px 0 10px;
		font-size: 20px;
	}

	.month table {
		margin: 2px;
	}

	.month table td {
		border-width: 1px;
		width: 64px;
		height: 64px;
	}

	.month table td.today {
		border-width: 2px;
	}

	.month table td .day {
		bottom: -27px;
		right: 3px;
		font-size: 16pt;
	}

	.month table td .events {
		margin-top: -26px;
	}

	.month table td .events li {
		height: 7px;
		margin: 4px;
	}

	.month table td.active {
		outline-width: 3px;
	}

	.month table td.active .daytitle {
		margin: 0 0 0 2em;
		font-size: 18px;
	}

	.month table td.active .events {
		top: 2em;
		margin: 0 0 0 1em;
	}

	.month table td.active .events li {
		height: 1.5em;
		padding: 0 0.5em;
		border-width: 1px;
		font-size: 40px;
		line-height: 1.5em;
	}

	.month table td.active .events li {
		width: 4em;
		height: 1.5em;
		border-width: 1px;
		text-align: center;
		line-height: 1.5em;
		font-size: 20px;
	}

}