/* calendar widget */
@import "jsCalendar.css";

#calendarevents{border: 1px solid #eee;}
.calendarfilters{float:left; width: 315px; margin-right: 20px;}
.calendarfilter-btn{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.calendarfilter-buttons{background-color: #eee; padding: 10px; font-weight:bold;}
.filterbuttons .button {
    width: 100px ;
    font-size: 15px;
    padding: 6px;
    margin-left: 10px;
    margin-top: 10px;
}
.filterbuttons{
	text-align:center;
}
.event-detail-instructions{
	font-weight:bold;
	color:#0076BE;
	font-size: 2em;
	margin: auto;
	text-align: center;
	margin-top: 180px;
	line-height: 1em;
}
.calendar-widget-prdatepicker{display:none;}
#my-calendar table{width: 310px; }
#my-calendar table td{cursor:pointer; }
#my-calendar table .jsCalendar-title{font-size: 125%; text-align:center;}
#my-calendar table .jsCalendar-week-days th {
    background-color: #eee;
    color: #000;
}
#calendarevents .viewallbutton{
padding-top: 20px;
	clear:both;
	margin: 20px;
}
.eventdetails{width: auto;  border-left: 1px solid #eee; padding: 10px; overflow-y:auto; height: 500px; margin-left: 20px;}

#calendarevents{min-height: 525px;}
#calendarevents .noresults{font-weight:bold; padding-top: 70px;}
#calendarevents .eventtime{
text-align:center;
border-right: 1px solid #eee;
	margin-right: 20px;
	padding-right: 20px;
	display:inline-block;
}
#calendarevents .eventItem {list-style: none; float:left; margin-left:-40px; max-width: 660px; min-width: 660px; }
#calendarevents .eventItem li{padding-top: 8px; margin: 10px; font-size: 105%; white-space: nowrap; overflow: hidden;
text-overflow:ellipsis;}
.event-details{display:none; }
.event-details .label{font-weight: bold;}
#calendar-widget-prdatepicker{
	    padding: 2.5px;
    padding-bottom: 5px;
}
@media only screen and (max-width: 1428px) {
.eventdetails{display:none;}
}
@media only screen and (max-width: 958px) {
	.eventdetails{display:none !important;}
	#calendarevents .eventItem {list-style: none; margin-left: -25px; background-color: #fff; max-width:395px; min-width: 395px; font-size: 90%;}
	#calendareventsDiv{
		clear:both;
	}
	.calendarfilters {
    float: none;
    width: 100%;
    margin-right: 0;
}
		.calendarfilters form, .jsCalendar-title-name{
   text-align: center;
			
}
	.jsCalendar thead .jsCalendar-title-name{width: 70%;}
	#my-calendar table{
		width: 100%;
		max-width:308px;
		margin:auto;
	}
	#calendarevents .eventtime{
border-right: 0px solid #eee;
	margin-right: 10px;
	padding-right: 10px;

}
.eventItem{
display:none;
	margin-left: -40px;
}
}