#bbq_form .msg {
	padding: 1rem;
	margin: 1rem 0;
	border-radius: 5px;
}
#bbq_form .msg.error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

#bbq_form .msg.success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}
#bbq_form .error-message {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
	padding: 0.5rem;
	border-radius: 5px;
	margin: .5rem 0;
	font-size: 1.2rem;
}

#bbq_form input[type="number"] {
	text-align: center;
}

#bbq_form .note {
	color: #333;
	padding-top: .5rem;
}

#bbq_form .address span {
    display: block;
    font-weight: 700;
}

#bbq_form .bbq_options.hide {
	display: none;
}
#bbq_form img {
	width: 30%;
}

#bbq_form .submitbtn {
	padding-top: 2rem;
}

.reservation_date_modal .paging {
    text-align: center;
    font-size: 1.1rem;
}
.reservation_date_modal .paging a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    text-decoration: none;
}
.reservation_date_modal table.calendar {
    width: 100%;
    table-layout: fixed;
    margin-top: 1rem;
}
.reservation_date_modal table.calendar th {
    padding: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.reservation_date_modal table.calendar td {
    padding: 0.2rem;
    font-size: 1.2rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
    height: 4rem;
}
.reservation_date_modal table.calendar td a {
    /* display: block; */
    /* padding: 0.5rem;
        border-radius: 5px; */
    text-decoration: none;
    padding: 0 .4rem;
    color: #8291fb;
}
.reservation_date_modal table.calendar td a.selected {
    background-color: #8291fb;
    color: #fff;
    border-radius: 3rem;
}
.reservation_date_modal table.calendar td .free {
    color: #333;
    cursor: pointer;
    font-size: .7rem;
    padding-top: .4rem;
}




#bbq_form .circle {
	position: fixed;
    top: 50%;
    left: 50%;
	width: 120px;
	height: 120px;
	background: #333;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	z-index: 99991;
}
#bbq_form .circle::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -60px;
	width: 120px;
	height: 120px;
	background: #999;
	transform-origin: right 60px;
	z-index: 99992;
	animation: rotate-circle-left 2s linear forwards;
}
#bbq_form .circle::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 60px;
	width: 120px;
	height: 120px;
	background: #999;
	transform-origin: left 60px;
	z-index: 99993;
	animation: rotate-circle-right 2s linear forwards;
}
#bbq_form .circle .circle-inner {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 100px;
	height: 62px;
	padding-top: 38px;
	background: #fff;
	border-radius: 50%;
	z-index: 99994;
}

@keyframes rotate-circle-right {
	0%   {
		transform: rotate(0deg);
		background: #999;
	}
	50%  {
		transform: rotate(180deg);
		background: #999;
	}
	50.01% {
		transform: rotate(360deg);
		background: #333;
	}
	100% {
		transform: rotate(360deg);
		background: #333;
	}
}

@keyframes rotate-circle-left {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(0deg); }
	100% { transform: rotate(180deg); }
}

@media screen and (max-width: 768px) {
    #bbq_form input[type="number"],
    #bbq_form select {
        padding: 10px 4px;
    }
	
	#bbq_form input[type="number"] {
		width: auto !important;
	}
}