/* ---------- */
#reserve-form-main
{}

#reserve-form-main input[type=text],
#reserve-form-main select,
#reserve-form-main textarea
{	border-color: #AAA;
}

#reserve-form-main input[type=text]:focus,
#reserve-form-main textarea:focus
{	border-color: #8CC;
	box-shadow: 0 0 2px #6AA;
}

#reserve-form-main textarea
{	min-height: 150px;
}

/* ---------- */
#reserve-confirm-date-meal
{	width: 480px;
	max-width: 100%;
	margin: 0 auto;
}

/* ------- */
#reserve-form-visibility
{	display: none;
	height: 0;
	width: 0;
	opacity: 0;
}

/* --- */
#reserve-form-select-calendar-notice
{	display: block;
}
#reserve-form-inputs
{	display: none;
}
#reserve-form-visibility:checked ~ #reserve-form-select-calendar-notice
{	display: none;
}
#reserve-form-visibility:checked ~ #reserve-form-inputs
{	display: block;
}

/* ---------- */
.select-calendar
{	margin: 0 auto;
	border: 3px solid #666;
	position: relative;
}


.select-calendar .overlay
{	background-color: #FFF;
	background-color: rgba(255,255,255,0.5);
	background-color: #FFFFFF80;
	color: #FFF;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 10;
	cursor: not-allowed;
	display: none;
}
.select-calendar.stop .overlay
{	display: block;
}
.select-calendar .overlay p
{	background-color: #000;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: 2px 2px 6px #666;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	padding: 10px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* --- */
.select-calendar nav
{	background-color: #666;
	margin: 0 auto;
	font-size: 1.25em;
	text-align: center;
	padding: 5px;
}

.select-calendar nav button,
.select-calendar nav p
{	display: inline-block;
	vertical-align: middle;
}

.select-calendar nav button
{	background-color: #CCC;
	padding: 5px 20px;
	border-radius: 5px;
}

.select-calendar nav button:hover
{	background-color: #FFF;
	color: #666;
}
.select-calendar nav p
{	padding: 0 10px;
	color: #FFF;
}
.select-calendar nav button:disabled
{	visibility: hidden;
}

/* --- */
.select-calendar table
{	width: 100%;
	font-size: 0.9em;
}

.select-calendar table td
{	border: 1px solid #666;
	width: 14.28%;
	width: calc(100% / 7);
}

/* */
.select-calendar table thead td
{	background-color: #DDD;
	padding: 5px;
	text-align: center;
	font-weight: bold;
}

.select-calendar table thead td:first-child
{	background-color: #EF8A9D;
}
.select-calendar table thead td:last-child
{	background-color: #A5D6E1;
}

/* */
.select-calendar table tbody td
{	background-color: #A0A0A0;
}
.select-calendar table tbody td a
{	background-color: #F0F0F0;
	display: block;
	padding: 5px;
	position: relative;
}
.select-calendar table tbody td a.pending
{	background-color: #FFFFAA;
}
.select-calendar table tbody td a.active
{	background-color: #CCFFAA;
}

.select-calendar table tbody td a.passed
{	background-color: #655;
	color: #EC9;
}

.select-calendar table tbody td a::before
{	background-color: #EEFFFF;
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: 0;
}

.select-calendar table tbody td a:not([onclick])::before
{	background-color: #666;
	opacity: 0.4;
}

.select-calendar table tbody td a:not([onclick]):hover
{	cursor: not-allowed;
}

.select-calendar table tbody td a[onclick]:hover::before
{	opacity: 0.4;
}

/* */
.select-calendar .day
{	margin-bottom: 5px;
	font-weight: bold;
}

.select-calendar .choice > li
{	background-color: #E5E5E5;
	color: #969696;
	padding: 3px 1.5em 3px 5px;
	border-radius: 5px;
	font-size: 0.9em;
	line-height: 1.2em;
	position: relative;
}
.select-calendar .choice > li:not(:last-child)
{	margin-bottom: 5px;
}

.select-calendar .choice > li.open
{	color: #FFF;
}
.select-calendar .choice > li.open.morning
{	background-color: #5AB4C8;
}
.select-calendar .choice > li.open.lunch
{	background-color: #CC93FF;
}
.select-calendar .choice > li.open.dinner
{	background-color: #FF9355;
}
.select-calendar .choice > li.active
{	background-color: #E64664 !important;
	font-weight: bold;
	color: #FFF;
}

.select-calendar .choice > li::before,
.select-calendar .choice > li::after
{	box-sizing: border-box;
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -0.5em;
	width: 1em;
	height: 1em;
}

.select-calendar .choice > li.open::after,
.select-calendar .choice > li.closed::before,
.select-calendar .choice > li.closed::after,
.select-calendar .choice > li.active::after
{	content: "";
}

.select-calendar .choice > li.open::after
{	border: 2px solid;
	border-radius: 50%;
	-webkit-transform: none;
	transform: none;
}

.select-calendar .choice > li.closed::before,
.select-calendar .choice > li.closed::after
{	width: auto;
	border-left: 2px solid;
	margin-right: 0.5em;
}

.select-calendar .choice > li.closed::before
{	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.select-calendar .choice > li.closed::after
{	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.select-calendar .choice > li.active::after
{	width: 0.5em;
	margin-top: -0.625em;
	margin-right: 0.25em;
	border: 0px solid;
	border-right-width: 2px;
	border-bottom-width: 2px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-radius: 0;
}

.select-calendar a.passed .choice
{	visibility: hidden;
}

.select-calendar .choice > li p
{}

/* --------- */
.select-calendar-window
{	margin: 0 auto;
}

.select-calendar-window .choices
{	margin: 0 auto;
}
.select-calendar-window .choices:not(:last-child)
{	margin-bottom: 20px;
}

.select-calendar-window .choices > li
{	box-sizing: border-box;
}
.select-calendar-window .choices > li:not(:last-child)
{	margin-bottom: 20px;
}

.select-calendar-window .choices > li > div
{	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}
.select-calendar-window .choices > li input
{	display: none;
}

.select-calendar-window .choices > li label::before,
.select-calendar-window .choices > li label::after
{	position: absolute;
	display: block;
	left: 7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	box-sizing: border-box;
	z-index: 1;
}
.select-calendar-window .choices > li label::before
{	content: "";
	left: 7px;
	width: 16px;
	height: 16px;
	z-index: 1;
	border: 1px solid #666;
}
.select-calendar-window .choices > li label::after
{	left: 10px;
	width: 10px;
	height: 10px;
	z-index: 2;
	background-color: #0AC;
}

.select-calendar-window .choices > li label
{	background-color: #F0F0F0;
	display: block;
	border-left: 30px solid #DDDDDD;
	padding: 10px;
}

.select-calendar-window .choices > li label em
{	display: none;
	color: #C44;
	font-weight: bold;
}

/* hover */
.select-calendar-window .choices > li label:hover
{	background-color: #F0F8F8;
	border-left-color: #DDE5E5;
}

/* active */
.select-calendar-window .choices > li label:active
{	background-color: #F8FCFC;
	border-left-color: #E5EDED;
}

/* selected (checked) */
.select-calendar-window .choices > li input:checked ~ label
{	background-color: #E0FFFF;
	border-left-color: #BBEEEE;
}
.select-calendar-window .choices > li input:checked ~ label::before
{	border-color: #0CC;
}
.select-calendar-window .choices > li input:checked ~ label::after
{	content: "";
}

/* disabled */
.select-calendar-window .choices > li input:disabled ~ label
{	background-color: #C4C4C4;
	border-left-color: #AAA;
	color: #888;
	cursor: not-allowed;
}
.select-calendar-window .choices > li input:disabled ~ label em
{	display: inline;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.select-calendar
	{	border-width: 2px;
	}
	.select-calendar .choice > li
	{	padding: 2em 5px 3px;
		text-align: center;
	}

	.select-calendar .choice > li::before,
	.select-calendar .choice > li::after
	{	right: auto;
		top: 5px;
		margin-top: 0;
		left: 50%;
		margin-left: -0.5em;
	}
	.select-calendar .choice > li.closed::before,
	.select-calendar .choice > li.closed::after
	{	margin-right: 0;
		margin-left: -1px;
	}

	.select-calendar .choice > li.active::after
	{	margin-top: 0;
		margin-right: 0;
		margin-left: -0.25em;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 599px)
{	.select-calendar .choice > li
	{	font-size: 0.85em;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 559px)
{	.select-calendar .choice > li
	{	font-size: 1em;
		padding: 2em 5px 0;
	}
	.select-calendar .choice > li p
	{	display: none;
	}
}
