/* Bengin Caleandar Example 1 js */
.cld-main {
	width: 100%;float: left;
}
.cld-datetime {
    width: 190px;
    text-align: center;
    margin: auto;
}
.cld-datetime .today {
    font-weight: 500;
    font-size: 16px;
    float: left;
    margin: 0 3%;

}
.cld-nav:hover {
	cursor: pointer;
}
.cld-nav:hover svg {
	fill: #666;
}
.cld-rwd {
float: left;
width: 30px;
}
.cld-fwd {
float: left;
width: 30px;
}
.cld-labels{float: left; width: 100%; margin-top: 15px;}
.cld-days {float: left; width: 100%;}
.cld-label, .cld-day {
	display: inline-block;
	width: 14.28%;
	text-align: center;
	padding: 5px 0;
}
.cld-day.currMonth:nth-child(7n+7) a {
    color: #db004d;
}
.cld-day.currMonth:nth-child(7n+7) a:hover {
    color: #fff;
}
.cld-label {
	color: #555;
}
.cld-label:last-child {
	color: #db004d;
}
.cld-day.disableDay {
	opacity: 0.5;
}
.cld-day.nextMonth, .cld-day.prevMonth {
	opacity: 0.33;
}
.cld-number {
	position: relative;
	cursor: pointer;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 30px; font-size: 16px; font-weight: 500;
	border-radius: 100%;
	color: #222;
}
.cld-number:hover {
	background:#2196F3;
	color: #fff;
}
.cld-day.today .cld-number {
	background:#2196F3;
	color: #fff;
}
.cld-title {
	position: absolute;
	z-index: 5;
	display: none;
	top: 30px;
	left: 0;
	padding: 5px 10px;
	background: #fff;
	white-space: nowrap;
	box-shadow: 0 0 6px 0 #ccc;
	border-radius: 5px;
	font-size: 12px;
}
.cld-number:hover .cld-title {
	display: block;
}
.cld-title::before {
	content: '';
	position: absolute;
	top: -7.5px;
	left: 7.5px;
	width: 0;
	height: 0;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
	border-bottom: 7.5px solid #ccc;
}
.cld-number.eventday {
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 50px;
	border: 1px solid #999;
}
.cld-number.eventday:hover {
	cursor: pointer;
	background: #eee;
}
.today .cld-number.eventday:hover {
	background: #888;
}
/* End Caleandar Example 1 js */

/* Bengin Caleandar Example 2 css */

.content-caleandar {
    float: left;
    width: 100%;
}
.title-caleandar {margin-bottom: 15px;
    float: left; text-align: left;font-weight: 400;
    width: 100%;color: #666;box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.3);
}
.caleandar-item.heightauto {
    height: auto;
}

.caleandar-item {
	border: solid 1px #fff; border-radius: 5px;
    float: left;
    width: 14.286%;
    padding:10px;

}

.caleandar-item:hover {border: solid 1px #db004d}
.caleandar-item.bgnone {
    border: none; 
}
.caleandar-pm {
    float: left; font-size: 16px;
    width: 100%; text-align: left; font-weight: 500;
}
.caleandar-item:nth-child(7n+7){color: #db004d;}
.caleandar-am {

    float: left;
    width: 100%;
    text-align: right;
    font-size: 10px;
    color: #999;
    font-weight: 300;

}
.icon-hacdao {
    float: right;
    background: #999;
    height: 4px;margin-top: 4px;
    width: 4px;
    border-radius: 100%;
}
.icon-hoangdao{margin-top: 4px;
 float: right;
    background:#db004d;
    height: 4px;
    width: 4px;
    border-radius: 100%;}
.icon_pm_am {

    float: right;

}
.caleandar-item.theme3 {
    border-right: 0;border-left:0;
    border-bottom: solid 1px #e0e0e0; border-top: solid 1px #e0e0e0;
}
.caleandar-item.theme3:nth-child(7n+1) {
    border-left: solid 1px #e0e0e0;
}
.caleandar-item.theme3:nth-child(7n+7) {
    border-right: solid 1px #e0e0e0;
}
/* End Caleandar Example 2 css */

/* Bengin Caleandar Input Example 3 js */
#ui-udpicker-div {
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
width: 300px;float: left;
}

.ui-datepicker-calendar th {
	padding-bottom: 15px; padding-top: 5px; font-weight: 400; color: #555;
}


.ui-datepicker-header {
    padding: 10px;
    float: left;
    width: 100%;

}
.ui-datepicker-prev {
line-height: 30px;
    float: left;width: 30px;
text-align: center; cursor: pointer;

}
.ui-datepicker-next {
line-height: 30px;width: 30px;
text-align: center;
    float: right;cursor: pointer;

}
.ui-datepicker-title {
    width: 180px;
    margin: auto;

}
#changeMonth {
 	height: 30px;
    padding: 0px 25px 0 5px;
    width: auto; 

}
#changeYear {
    width: auto;float: right;
    height: 30px;
    padding: 0px 25px 0 5px;
}

.ui-state-default {
    float: left;
    width: 100%; text-align: center; border-radius: 5px;
    padding: 8px;border: solid 1px #fff; font-size: 16px; font-weight: 500;
}
.ui-state-default:hover {
    border: solid 1px #db004d; color: #db004d;
}
.ui-state-default.ui-state-active {
    border: solid 1px #e0e0e0; color: #2196F3;
}
.ui-state-default.ui-state-highlight{
    border: solid 1px #db004d; color: #db004d;
}
/* End Caleandar Input Example 3 js */