/* CSS Document */
.calendar {
	display: flex;
	flex-flow: column;
	padding: 2.5rem 0;
}
.calendar .header .month-year {
	font-weight: bold;
	color: var(--defaultColor);
	padding-bottom: calc(var(--defaultPadding) / 2);
}
.calendar .header .month-year h2 {
	text-align: center;
}
.calendar .header .month-year h2 a {
	text-decoration: none;
	display: inline-block;
	margin: 0 3rem;
}
.calendar .container {
	overflow-x: auto;
}
.calendar .days {
	display: flex;
	flex-flow: wrap;
	background: var(--whiteColor);
	font-size: var(--smallerFontSize);
	min-width: calc(100px * 7);
}
.calendar .days .day_name {
	width: calc(100% / 7);
	border-right: 1px solid var(--whiteColor);
	padding: 1rem;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--whiteColor);
	background-color: var(--brandColor2);
	min-width: 100px;
}
.calendar .days .day_name:nth-child(7) {
	border: none;
}
.calendar .days .day_num {
	display: flex;
	flex-flow: column;
	width: calc(100% / 7);
	border-right: 1px solid var(--brandColor2);
	border-bottom: 1px solid var(--brandColor2);
	padding: 1rem;
	font-weight: bold;
	color: var(--defaultColor);
	min-height: 100px;
	min-width: 100px;
}
.calendar .days .day_num span {
	display: inline-flex;
	width: 30px;
}
.calendar .days .day_num .event {
	word-wrap: break-word;
	margin-top: 10px;
	padding: 3px 6px;
	border-radius: var(--radiusBox);
	background-color: var(--brandColor1);
	color: var(--whiteColor);
	font-weight: normal;
	text-align: left;
}
.calendar .days .day_num:nth-child(7n+1) {
	border-left: 1px solid var(--brandColor2);
}
.calendar .days .day_num:hover {
	background-color: transparent;
}
.calendar .days .day_num.ignore {
	color: var(--lightColor);
}
.calendar .days .day_num.selected {
	background-color: var(--brandColor3);
}
.calendar .event {
	cursor: pointer;
}
.calendar .modal {
	position: fixed; z-index: 1;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	padding: 0 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}
.calendar .modal * {
	color: var(--whiteColor);
}
.calendar .modal .content {
	height: auto;
	padding: calc(var(--defaultPadding) / 2);
	background: var(--brandColor2);
	border: 1px solid var(--brandColor2);
	border-radius: var(--radiusBox);
	font-weight: normal;
	text-align: left;
}
.calendar .modal h4 {
	padding-top: 0;
}
.calendar .modal span {
	display: block !important;
	width: auto !important;
}
.calendar .modal .close {
	line-height: 1;
	font-size: 150%;
	display: block;
	position: absolute; z-index: 1;
	top: 0; right: 0;
	padding: 1rem;
	cursor: pointer;
}

@media screen and (max-width:640px) {
	.calendar .modal {
		padding: 0 10%;
	}
}