.no-show {
    display: none;
}

article {
    display: block;
    margin: 20px auto;
    border: 1px solid #e3e3e4;
}

.datepickers-cont {
    margin: 0;
    padding: 0;
}

.datepickers-cont .part {
    vertical-align: top;
    height: auto;
}

.ll-skin-melon {
	font-size: 100%;
}

.ll-skin-melon .ui-widget {
	font-family: 'Microsoft JhengHei', Helvetica, Arial, Verdana, sans-serif;
	background: #fff;
	border: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.ll-skin-melon .ui-datepicker {
	padding: 0;
}

.ll-skin-melon .ui-datepicker-header {
	border: none;
	background: transparent;
	font-weight: normal;
	font-size: 16px;
}

.ll-skin-melon .ui-datepicker-header .ui-state-hover {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-title {
	margin-top: .4em;
	margin-bottom: .3em;
	color: #000;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev-hover,
.ll-skin-melon .ui-datepicker .ui-datepicker-next-hover,
.ll-skin-melon .ui-datepicker .ui-datepicker-next,
.ll-skin-melon .ui-datepicker .ui-datepicker-prev {
	top: .9em;
	border:none;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev-hover {
	left: 60px;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-next-hover {
	right: 60px;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-next span,
.ll-skin-melon .ui-datepicker .ui-datepicker-prev span {
	background-image: url(images/ui-icons_222222_256x240.png);
	background-position: -32px 0;
	margin-top: 0;
	top: 0;
	font-weight: normal;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev span {
	background-position: -96px 0;
}

.ll-skin-melon .ui-datepicker table {
	margin: 0;
}

.ll-skin-melon .ui-datepicker th {
	padding: 1em 0;
	color: #000;
	font-size: 16px;
	font-weight: normal;
	border: none;
	border-top: 1px solid #e3e3e4;
}

.ll-skin-melon .ui-datepicker td {
	background: #fff;
	border: none;
	padding: 0;
}

.ll-skin-melon td .ui-state-default {
	background: transparent;
	border: none;
	text-align: center;
	/*padding: 1rem;*/
	margin: .25rem;
	font-weight: normal;
	color: #000;
	font-size: 18px;
}

.ll-skin-melon .ui-state-disabled  {
	opacity: 1;
}

.ll-skin-melon .ui-state-disabled .ui-state-default {
	color: #000;
	opacity: .35;
	filter:Alpha(Opacity=35);
}

.ll-skin-melon td .ui-state-active,
.ll-skin-melon td .ui-state-hover {
	background: #00c4cc;
	color: #fff;
	border-radius: 50%;
}




/******************************************************************************************

Extra small devices (portrait phones, less than 576px)

******************************************************************************************/
@media (max-width: 480px) {
	.ll-skin-melon td .ui-state-default {
		padding: 0;
		height: 32px;
    	width: 32px;
    	line-height: 32px;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 8px;
	}
	.date-box {
		padding: 0px;
	}

}   

@media (max-width: 360px) {
	.ll-skin-melon td .ui-state-default {
		padding: 0;
    	height: 32px;
    	width: 32px;
    	line-height: 32px;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 8px;
	}
	.date-box {
		padding: 0px;
	}
}


@media (max-width: 320px) {
	.ll-skin-melon td .ui-state-default {
		padding: 0;
    	height: 32px;
    	width: 32px;
    	line-height: 32px;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 5px;
	}
	.date-box {
		padding: 0px;
	}
}


/******************************************************************************************

Small devices (landscape phones, 576px and up)

******************************************************************************************/

@media (min-width: 576px) and (max-width: 767px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;
		height: auto;
    	width: auto;
    	line-height: auto;
	}
	.date-box {
		padding: 0px;;
	}
	.ll-skin-melon td .ui-state-default {
		width: 50px;
		height: 50px;
		line-height: 20px;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}
}



/******************************************************************************************

Medium devices (tablets, 768px and up)

******************************************************************************************/

@media (min-width: 768px) and (max-width: 991px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;
		padding: 1rem;
		margin: .25rem;
		height: auto;
    	width: auto;
    	line-height: auto;
	}
	.date-box {
		padding-right: 15px;
		padding-left: 15px;
	}
	.ll-skin-melon td .ui-state-default {
		width: auto;
		height: auto;
		line-height: auto;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}

}


/******************************************************************************************

Extra large devices (large desktops, 1200px and up)

******************************************************************************************/
@media (min-width: 1024px) and (max-width: 1279px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;

	}
	.date-box {
		padding-right: 15px;
		padding-left: 15px;
	}
	.ll-skin-melon td .ui-state-default {
		width: 50px;
		height: 50px;
		line-height: 20px;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}
}


@media (min-width: 1280px) and (max-width: 1439px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;

	}
	.date-box {
		padding-right: 15px;
		padding-left: 15px;
	}
	.ll-skin-melon td .ui-state-default {
		width: 60px;
		height: 60px;
		line-height: auto;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}
}


@media (min-width: 1440px) and (max-width: 1919px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;

	}
	.date-box {
		padding-right: 15px;
		padding-left: 15px;
	}
	.ll-skin-melon td .ui-state-default {
		width: 60px;
		height: 60px;
		line-height: auto;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}
}


@media (min-width: 1920px) {
	.ll-skin-melon td .ui-state-default {
		padding: 1rem 0;
		margin: .25rem 0;

	}
	.date-box {
		padding-right: 15px;
		padding-left: 15px;
	}
	.ll-skin-melon td .ui-state-default {
		width: 60px;
		height: 60px;
		line-height: auto;
	}
	.ll-skin-melon .ui-datepicker td {
		padding-left: 0;
	}
}