/*
=============
EVENTS CALENDAR
=============
*/

.events_calendar_holder {
	display:grid;
	grid-gap:6px;

}

.events_calendar_holder .changemonth {
	cursor:pointer;
	background:rgba(38, 87, 92, .7);
	color:#fff;
	text-align:center;
	font-size:1.5em;
}

.events_calendar_holder.monthly .calendar_head {
	display:grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-gap:6px;
}

.events_calendar_holder.monthly .calendar_days {
	display:none;
}
	.events_calendar_holder.monthly .calendar_days>span {
		background: rgba(113, 72, 101, .7);
		color:#fff;
		text-align:center;
		padding:5px;
	}
.events_calendar_holder.monthly .calendar_body {
	display:grid;
	grid-template-columns: 1fr;
	grid-gap:6px;
}
	.events_calendar_holder.monthly>div>div {
		background-color:#fff;
		color:#333;
	}
		.events_calendar_holder.monthly>div>div>span,
		.events_calendar_holder.monthly>div>div>a {
			display:block;
			text-align:center;
			background-color:rgba(93, 95, 144, .7);
			color:#fff;
			padding:4px;
		}
			.events_calendar_holder.monthly>div>div>span:not(:first-child),
			.events_calendar_holder.monthly>div>div>a:not(:first-child) {
				font-size:0.8em;
				background:#ccc;
				color:#444;
				font-weight:bold;
			}
				.events_calendar_holder.monthly>div>div>span:not(:first-child):nth-child(even),
				.events_calendar_holder.monthly>div>div>a:not(:first-child):nth-child(even) {
					background:#bbb;
				}
				.events_calendar_holder.monthly>div>div>a:not(:first-child):hover,
				.events_calendar_holder .changemonth:hover {
					background:rgba(113, 72, 101, .7);
					color:#fff;
					text-decoration:none;
				}
	.events_calendar_holder.monthly span.monthname {
		text-align:center;
		background:rgba(38, 87, 92, .7);
		color:#fff;
		padding:6px;
	}
	.events_calendar_holder.monthly span i {
		display:none;
	}
	.events_calendar_holder .no_events {
		display:none;
	}
	.events_calendar_holder #calendar_today span {
		background-color:rgba(142, 175, 84, .7);
		color:#000;
	}
	.events_calendar_holder.monthly>div>div>a>span {
		display:block;
		font-weight:normal;
		font-size:10px;
		background-color:transparent;
	}

@media only screen and (min-width: 1024px) {

	.events_calendar_holder.monthly .calendar_body>div {
		min-height:80px;
		background:#ddd;
	}

	.events_calendar_holder.monthly .calendar_head,
	.events_calendar_holder.monthly .calendar_days,
	.events_calendar_holder.monthly .calendar_body {
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-gap:6px;
	}

	.events_calendar_holder.monthly span.monthname {
		grid-column: span 5;
	}

	.events_calendar_holder .no_events {
		display:block;
	}

	/* this is where we set the placement so that the first day sits under the correct weekday */

	.events_calendar_holder .monthstart2 div:first-child {
		grid-column:2;
	}
	.events_calendar_holder .monthstart3 div:first-child {
		grid-column:3;
	}
	.events_calendar_holder .monthstart4 div:first-child {
		grid-column:4;
	}
	.events_calendar_holder .monthstart5 div:first-child {
		grid-column:5;
	}
	.events_calendar_holder .monthstart6 div:first-child {
		grid-column:6;
	}
	.events_calendar_holder .monthstart7 div:first-child {
		grid-column:7;
	}
}