.calendar {
	position: relative;
}
.calendar a {
    text-decoration: none;
    color: inherit;
}
.calendar .header  {
	position: relative;
	margin: .5rem 0;
	border-bottom: 3px solid #f7f7f7;
	padding: 0 0 20px;
	font: normal 14px/14px 'roboto medium', sans-serif;
	color: #aa4796;
}
.calendar .header .date  {
	position: relative;
	text-transform: uppercase;
}
.calendar .header .buttons {
	position: absolute;
	right: 0;
	top: 0;
}
.calendar .header .btn-calendar {

}
.calendar .header .btn-calendar:hover {
	color: #f4297e;
}
.calendar .header .btn-calendar.disabled {
	opacity: .3;
	pointer-events: none;
}
.calendar .header .btn-prev {
	padding: 0 10px 0;
}
.calendar .header .btn-next {
	padding: 0 3px 0 10px;
}
.calendar table {
	text-align: center;
	text-transform: capitalize;
    width: 100%;
    margin: 20px 0;
    border-spacing: 0px;
}
.calendar thead {
    font-size: 1.2em;
    font-weight: 600;
}
.calendar thead td {
	padding: .2em 0;
	font: normal 14px/14px roboto, sans-serif;
	color: #555;
}
.calendar tbody td {
    padding: .2em .1em;
	font: normal 17px/17px 'source sans pro bold', sans-serif;
	color: #bbb;
}
.calendar .day {
    display: inline-block;
    line-height: 1.9em;
    border-radius: 15%;
    border: 2px solid transparent;
	-webkit-transition: all 300ms;
	transition: all 300ms;
	position: relative;
	padding: 0 .4em;
}
.calendar .day.today {
    background: #6691CC;
    color: white;
}
.calendar .day.event {
	cursor: pointer;
}
.calendar .day.event:hover {
    background: #ececec;
}
.calendar .day.event:before {
	content: '';
	position: absolute;
	top: 47%;
	right: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #aa4796;
}
/*.calendar .day.event:hover:before {
    color: rgb(22, 23, 24);
}*/
.calendar .day.active {
    background: #aa4796;
    color: white;
}
.calendar .day.active:before {
    background-color: #fff;
}
.calendar .day.wrong-month {
	font-style: italic;
	color: #e6e6e6;
}
.calendar .day.wrong-month:hover {
    border: 2px solid transparent;
}
.calendar .event-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    background: #545A5C; }
.calendar .filler {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #545A5C;
    transform: translate(-50%, -50%); }

/* Event Close button - ref : https://codepen.io/brissmyr/pen/egidw */
.event-container>p{
	margin-top: 35%;
	font-size: 1.2rem;
}
.event-container>.close {
	position: absolute;
	right: 32px;
	top: 32px;
	width: 32px;
	height: 32px;
	opacity: 0.3;
}
.event-container>.close:hover {
	opacity: 1;
}
.event-container>.close:before, .event-container>.close:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: rgb(235, 235, 235);
}
.event-container>.close:before {
	transform: rotate(45deg);
}
.event-container>.close:after {
	transform: rotate(-45deg);
}