@charset "ISO-8859-1";

/* Overall wrapper */
.monthly {
	background: #F3F3F5;
	color: #545454;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
}

/* Top bar containing title, navigation, and buttons */
.monthly-header {
    background: #fff none repeat scroll 0 0;
    box-sizing: border-box;
    float: left;
    height: 4em;
    padding: 0.5em;
    position: relative;
    text-align: center;
    width: 100%;
}
/* Center area of top bar containing title and buttons */
.monthly-header-title {
    float: left;
    margin-right: 20px;
    text-transform: uppercase;
}

/* Buttons for reverting to "today", and closing event list */
.monthly-header-title a:link,
.monthly-header-title a:visited {
	display: inline-block;
}
/* Add some roundy-ness */
.monthly-header-title a:first-of-type, .monthly-reset {
	color:#000!important;
	
}
.monthly-header-title a:last-of-type {
	border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
}
.monthly-header-title a:hover {

}
.monthly-header-title a:active {
}
/* current month/yr block */
.monthly-header-title-date, .monthly-header-title-date:hover{
    color: #000000!important;
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
}
/* Button to reset to current month */
.monthly-reset {
	border-left: 0!important;
}
.monthly-reset::before {
	content: '\21BB';
	margin-right: 0.25em;
}
/* Button to return to month view */
.monthly-cal {
	border-right: 0!important;
}
.monthly-cal::before {
	content: '\2637';
	margin-right: 0.25em;
}

/* wrapper for left/right buttons to make the clickable area bigger */
.monthly-prev,
.monthly-next {
	position: absolute;
	top: 0;
	width: 3em;
	height: 100%;
	opacity: .5;
}
.monthly-prev {
	left: 0;
}
.monthly-next {
	right: 0;
}
.monthly-prev:hover,
.monthly-next:hover {
	opacity: 1;
}

/* Arrows */
.monthly-prev, .monthly-next {
    border: 1px solid #666;
    border-radius: 50%;
    float: left;
    height: 40px;
    position: relative;
    width: 40px;
	margin-right:5px;
}
.monthly-prev::after, .monthly-next::after {
    border-color: #222;
    border-style: solid;
    content: "";
    height: 8px;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 8px;
	color:#000;
}
/* Left Arrow */
.monthly-prev:after{
	border-width: 0 0 0.2em 0.2em;
}
/* Right Arrow */
.monthly-next:after {
	border-width: 0.2em 0.2em 0 0;
}

/* Day of the week headings */
.monthly-day-title-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	background: #fff;
}
.monthly-day-title-wrap div {
    background: #004295 none repeat scroll 0 0;
    box-sizing: border-box;
    color: #fff;
    display: table-cell;
    font-weight: 500;
    padding: 12px 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 14.28%;
}

/* Calendar days wrapper */
.monthly-day-wrap {
    border: 1px solid #cfcfcf;
    display: table;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}
.monthly-week {
	display: table-row;
	width: 100%;
}
/* Calendar Days */
.monthly-day, .monthly-day-blank {
    background: #f3f3f3 none repeat scroll 0 0;
    box-shadow: 0 0 0 1px #cfcfcf;
    box-sizing: border-box;
    color: inherit;
    display: table-cell;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: all 0.25s ease 0s;
    vertical-align: top;
    width: 14.28%!important;
}

/* Trick to make the days' width equal their height */
.monthly-day:before {
	content: '';
	display: block;
	padding-top: 100%;
	float: left;
}

/* Hover effect for non event calendar days */
.monthly-day-wrap > a:hover {
	background: #A1C2E3;
}

/* Days that are part of previous or next month */
.monthly-day-blank {
	background: #F3F3F5;
}

/* Event calendar day number styles */
.monthly-day-event > .monthly-day-number {
    color: #717171;
    font-size: 1.3em;
    font-weight: 700;
    left: 0;
    line-height: 1em;
    position: absolute;
    text-align: center;
    top: 0.5em;
    width: 100%;
}
/* Non-Event calendar day number styles */
.monthly-day-pick > .monthly-indicator-wrap {
	margin: 0;
}

.monthly-day-pick > .monthly-day-number:before,
.monthly-day-pick > .monthly-day-number:after {
	content: '';
	display: block;
	padding-top: calc(50% - 0.8em);
	width: 0;
	height: 0;
}

/* Days in the past in "picker" mode */
.monthly-past-day:after{
	content: '';
	width: 150%;
	height: 2px;
	-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
	        transform-origin: left top;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	background: rgba(0, 0, 0, 0.1);
	position: absolute;
	left: 0;
	top: 0;
}
.monthly-past-day:hover {
	background: #fff!important;
}

/* Current day style */

.monthly-day-pick.monthly-today .monthly-day-number {
	padding: 0.15em;
	margin: calc(50% - 0.7em) auto auto auto;
	font-size: 1em;
}

/* Wrapper around events */
.monthly-indicator-wrap {
	position: relative;
	text-align: center;
	line-height: 0;
	margin: 0 auto;
	padding-top: 1.2em;
}

/* Event indicator dots */
.monthly-day .monthly-event-indicator {
	display: inline-block;
	border-radius: 50%;
    height: 12px;
    margin: 3px;
    padding: 0;
    width: 12px;
	vertical-align: middle;
	background: #7BA7CE;
}



.monthly-day .monthly-event-indicator span {
	color: transparent;
}


.monthly-header a {
    margin: 0 5px;
    vertical-align: middle;
}
/* Listing of events under calendar */
.monthly-event-list {
	background: rgba(233, 235, 236, 0.9);
	overflow: auto;
	position: absolute;
	top: 4em;
	width: 100%;
	height: calc(100% - 4em);
	display: none;
	-webkit-transition: .25s;
	transition: .25s;
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
	        transform: scale(0);
}

/* Days in Events List */
.monthly-list-item {
	position: relative;
	padding: 0.5em 0.7em 0.25em 4em;
	display: none;
	border-top: 1px solid #D6D6D6;
	text-align: left;
}

.monthly-list-item:after{
    padding: 0.4em 1em;
    display: block;
    margin-bottom: 0.5em;
 }


/* Events in Events List */
.monthly-event-list .listed-event {
	display: block;
	color: #fff;
	padding: 0.4em 1em;
	border-radius: 0.2em;
	margin-bottom: 0.5em;
}

.monthly-list-item a:link, .monthly-list-item a:visited {
	text-decoration: none;
}

.item-has-event {
	display: block;
}

.item-has-event:after{
    display: none!important;
}

.monthly-event-list-date {
	width: 4em;
	position: absolute;
	left: 0;
	top: 1.2em;
	text-align: center;
    font-weight: bold;
    line-height: 1.2em;
}

.monthly-list-time-start,
.monthly-list-time-end {
	font-size: .8em;
	display: inline-block;
}
.monthly-list-time-end:not(:empty):before {
	content: '\2013';
	padding: 0 2px;
}

/* Events List custom webkit scrollbar */
.monthly-event-list::-webkit-scrollbar {width: 0.75em;}

/* Track */
.monthly-event-list::-webkit-scrollbar-track {background: none;}

/* Handle */
.monthly-event-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border: 1px solid #E9EBEC;
	border-radius: 0.5em;
}
.monthly-event-list::-webkit-scrollbar-thumb:hover {background: #555;}

/* Language-specific. Default is English. */
.monthly-reset:after		{ content: 'Today'; }
.monthly-cal:after			{ content: 'Month'; }
.monthly-list-item:after	{ content: 'No Events'; }

.monthly-locale-fr .monthly-reset:after		{ content: "aujourd'hui"; }
.monthly-locale-fr .monthly-cal:after		{ content: "mois"; }
.monthly-locale-fr .monthly-list-item:after	{ content: 'aucun événement'; }

#eventList {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
	list-style:none;
	padding:0;
	margin-top:30px;
}
#eventList > li {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
	 position: relative;
	 padding-left:30px;
	  margin-bottom: 15px;
}

#eventList > li:hover{ cursor:pointer;}

#eventList > li a{ color:#333;}
#eventList > li .dates, #eventList > li .timings {
    color: #666;
	margin:0;
}
#eventList > li span.eventBG {
    border-radius: 50%;
    display: block;
    height: 12px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 12px;
}


.monthly-today {
    border-top: 4px solid #004295;
}
#events-for-month {
    margin-top: 53px;
}
#events-for-month {
    background: #737373 none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}

/*
Calendar shows event titles if the device width allows for at least 3em per day (rounded
up to 25em total). This assumes the calendar font is close to the baseline font size and
the calendar takes up close to the full media width as the window is made smaller or the
font is zoomed. If one or both of these is not true, this will need to be overridden by
a layout-specific width, or you will need to use a library like css-element-queries to 
establish the rules based on the calendar element width rather than the device width.
*/
@media (min-width: 25em) {
	.monthly-day-event {
		padding-top: 1.3em;
	}

.monthly-indicator-wrap {
    bottom: 1em;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
	.monthly-day:before {
		padding-top: calc(100% - 1.2em);
	}

	.monthly-day .monthly-event-indicator.monthly-event-continued {
		box-shadow: -1px 0 0 0;
	}
	.monthly-day .monthly-event-indicator span {
		display: block;
		width: auto;
		margin: 0;
		color: #fff;
		padding: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

}
@media (max-width:991px) {
#events-for-month {
    background: #737373 none repeat scroll 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 10px;
    text-align: center;
    text-transform: uppercase;
}


}
@media (max-width:500px) {
.monthly-header-title {
    display: block;
    text-align: center;
    width: 100%;
}
.monthly-header {
    height: 8em!important;

}
.monthly-day .monthly-event-indicator {
    clear: both;
    display: block;
}
.monthly-indicator-wrap {
    padding-top: 2.2em;
}
.monthly-prev, .monthly-next {
    display: inline-block;
    float: none;
}

.monthly-event-list{ top:8em!important; height: calc(100% - 8em)!important;}
}