.calendarpopup {
	position: relative;
	background: #FFF;
	padding: 5px;
	width: auto;
	max-width: 500px;
	margin: 20px auto;
	text-align:center;
}

.calendarcontrols{
	margin:10px 10px 0;
}

#calendar_month_select,
#calendar_year_select{
	height:22px;
	font-size:14px;
}

#previous_month,
#next_month{
	font-size:30px;
	line-height:22px;
	width:22px;
	cursor:pointer;
	opacity:0.6;
}

#previous_month:hover,
#next_month:hover{
	opacity:1;
}

#previous_month{
	float:left;
}

#next_month{
	float:right;
}

.calendarcells{
	margin:15px auto;
}

.calendarcells ul li{
	float:left;
	list-style:none;
	width:14.2%;
	border:1px solid #ccc;
	box-sizing:border-box;
	font-size:10px;
	line-height: 12px;
	height: 50px;
	background:#f5f5f5;
	cursor:pointer;
}

.dayofweek{
	background:#ddd !important;
}

.dayofweek .daynames{
	vertical-align:middle;
	display:table-cell;
	width: 64px;
	height:50px;
	font-weight:bold;
	color: #666;
}

.datecell .primarydate{
	color: #D14B4B;
    display: block;
    font-size: 15px;
    padding: 5px;
    text-align: right;
}

.datecell .secondarydate{
	color: #aaa;
}

.datecell:hover{
	background:#e9e9e9 !important;
}

.selectedcell{
	background:#D14B4B !important;
}

.selectedcell:hover{
	background:#DD5D5D !important;
}

.selectedcell .primarydate{
	color:#fff !important;
}

.selectedcell .secondarydate{
	color:#ccc !important;
}


@media screen and (max-width: 499px) {	
.datecell .secondarydate{
	display:none;
}
}