.calendar-sidebar { width: 25%; border: 1px solid grey; float:left; padding: 20px; font-size: 18px; }
.calendar-main { width: 75%; border: 1px solid grey; float:left; }

#calendar .box { width:100%; height:40px; background-color: #787878; }
#calendar .header{ line-height:40px; margin: 0px 12px; color: #fff; text-align:center; }
#calendar .prev { float:left; color: #fff; }
#calendar .next { float:right; color: #fff; }
#calendar .title { font-size: 18px; }
 
#calendar .box-content { border:1px solid #787878; }
#calendar .dates { width: calc(100% - 10px); margin: 5px; padding: 0; }
#calendar > .box-content > ul > li, .week .day{ 
	float: left; list-style-type: none; width: calc(14.28% - 10px); margin:5px;
	vertical-align: middle; text-align: center; color: #000; font-size: 15px;
}

#calendar .week { width: 100%; display:flex; }
 
#calendar .dates .day { background-color: #efefef; position:relative; }
#calendar .dates .mask { background-color: transparent; }
#calendar .label .day { line-height: 40px; }
#calendar .day .num { border: 1px solid grey; border-left:none; border-top:none; width:30px; }
#calendar .day .plusEvent { border: 1px solid grey; border-right:none; border-top:none; width:30px; position:absolute; top:0; right:0; cursor:pointer; }
#calendar .mask .num { border:none; }
#calendar .mask .plusEvent { display:none; }
#calendar .today .num { color: red; }
#calendar .dates .today { background-color: #ddd; }
#calendar .events { min-height:40px; }
#calendar .eventPopup {
	position:fixed; left:25%; width:50%; margin: 0px auto; top: 25%;
	background-color: #fff; border-radius: 15px; border-color: black; padding: 20px;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75); overflow: hidden; }
.headPop { padding: 40px 20px 10px; margin: -35px -20px 15px; position: relative; }
#calendar .description {
	display: none; position:fixed; left:25%; width:50%; margin: 0px auto; top: 25%;
	background-color: #fff; border-radius: 15px; border-color: black; padding: 20px;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);	}
#calendar .event-title { cursor:pointer; text-align:left }
#calendar .event-list li { margin: 0; }
#calendar .date, #calendar .time { width: 30%; margin:1%; float:left; }
#calendar .date input, #calendar .time input { width: 95%; }
#calendar .details { text-align: left; }
#calendar .notes { text-align:justify; }
#calendar .event-close, #calendar .addEvent-close, #calendar .editEvent-close, .calPop-close { cursor: pointer; position: absolute; right:20px; top: 2px; font-size:18px; z-index:5; }
#calendar .eventPopup .title, #calendar .eventPopup .location, .calPop .title { width: 100%; } 

.calPop {
	position:fixed; left:25%; width:50%; margin: 0px auto; top: 25%; z-index: 5;
	background-color: #fff; border-radius: 15px; border-color: black; padding: 20px;
	overflow: hidden; -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75);	}

.calendar-item { margin: 5px 0; position: relative; }
.calendar-options { float: right; cursor: pointer; position:absolute; top:0; right:0; padding: 0 5px; }

/* Color Coding */
.color-box { width:20px; height:20px; float:left; margin-right: 8px; }
.color-dot { width: 5px; height:5px; margin: 8px 5px 5px; float:left; border-radius: 5px; }

.color-box.green, .color-dot.green, .headPop.green { background-color: green; }
.event-title.green, h3.green { color: green; }

.color-box.blue, .color-dot.blue, .headPop.blue { background-color: blue; }
.event-title.blue, h3.blue { color: blue; }