/* Styles definition here */
.booking_title_nowrap h2{
	white-space: nowrap;
}
#fbuilder .large{
	width:unset;
}

#field_1-0 label:before {
	background-image: url('/wp-content/uploads/2022/09/booking_form_t1.png');
    background-size: 191px 53px;
    display: inline-block;
    width: 191px; 
    height: 53px;
    content:"";
}
.fieldCalendarService.fieldCalendarServicefieldname1_1:after {
	background-image: url('/wp-content/uploads/2022/12/booking_form_t4.png');
	background-size: 359px 420px;
    display: inline-block;
    width: 359px; 
    height: 420px;
    content:"";
	
	margin-bottom:30px;
}

@media(max-width:900px){
	.fieldCalendarServicefieldname1_1 select.ahbfield_service{
		width:100%;
	}
}

span.r {
	display:none;
}

.ahbfield_service{
	margin-top:30px;
	margin-bottom:40px;
}

/* Calendar */
.ahb_m #fbuilder .fieldCalendar, #fbuilder .slotsCalendar{
	background:#f8f6f5;
	height:auto;
}
@media(max-width:768px){
.ahb_m #fbuilder .fieldCalendar, #fbuilder .slotsCalendar{
	min-height:200px;
}
}
.ahb_m #fbuilder .ui-datepicker-inline {
    background: #fff;
    margin: 10px;
    padding: 30px 20px;
    -webkit-box-shadow: 2px 3px 8px 0px rgb(0 0 0 / 10%);
    box-shadow: 2px 3px 8px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.ahb_m #fbuilder .ui-datepicker-prev {
    transform: rotate(-135deg) translate(-40px, 40px);
}
.ahb_m #fbuilder .ui-datepicker-next {
    transform: rotate(45deg) translate(-40px, 40px);
}
.ahb_m #fbuilder .ui-datepicker-header{
	margin-bottom:30px;
}
.ui-datepicker-title{
	font-size:20px;
	color:#676058;
}
.ahb_m #fbuilder .ui-datepicker thead tr{
	padding-bottom:20px;
}
.ahb_m #fbuilder .ui-datepicker tbody td {
    border: 1px solid #E8E8E8;
    padding: 4%;
}
.ui-datepicker-current-day {
    background: #224847;
}
.ahb_m #fbuilder .ui-datepicker-calendar .ui-state-active{
	color:white;
}
#fbuilder .ui-datepicker tr td:hover {
    background: #224847;
	color:white;
}
#fbuilder .ui-datepicker td.ui-datepicker-unselectable:hover{
	background:#ebebeb;
}
#fbuilder .ui-datepicker td.ui-datepicker-other-month:hover{
	background:unset;
}
#fbuilder .ui-datepicker tr td a{
	color:unset;
}
.ui-datepicker-unselectable .ui-state-default:hover {
    color: white;
    text-shadow: unset;
}
.ui-datepicker td span, .ui-datepicker td a{
	text-shadow:unset;
}



/* TimeSlot */
.slotsCalendarfieldname1_1{
    padding-top: 12px;
}
#fbuilder .slots span{
	padding-left: 8px;
	font-size: 18px;
    font-weight: 400;
	color:#707070;
}
.slots span:after {
    content: "請選擇時段:";
    display: block;
    margin-left: 9px;
    font-size: 20px;
    margin-bottom: -25px;
	font-weight:600;
}

#fbuilder .slots div {
    display: inline-block;
    border: 1px solid #D1D1D1;
    margin: 5px 10px;
    min-width: 28%;
    border-radius: 4px;
	background:#fff;
}

#fbuilder .slots div a {
	background:unset;
    color: #24292D;
    font-weight: 500;
    font-size: 18px;
    padding: 10px 36%;
}

.slotsCalendar.slotsCalendarfieldname1_1 .slots{
    height: 35vw;
    overflow-y: scroll;
    max-height: 480px;
    min-height: 340px;
}

.slotsCalendar.slotsCalendarfieldname1_1:empty:before{
    content:"請先選擇會診分所";
    margin: 20px;
    position: absolute;
    font-size: 20px;
    color:#777;
    padding: 10px;
    background-color: #ffe0e0;
    width: 46%;
}
@media(max-width:767px){
    .slotsCalendar.slotsCalendarfieldname1_1{
        padding-bottom: 130px;
    }
    .usedSlotsfieldname1_1::before{
        position: absolute;
		bottom: 15px;
    }
    .ahb_list{
        margin-top: 30px;
    }
}

@media (max-width:1245px){
/* 	#fbuilder .slots div {min-width: 115px;}  */
	#fbuilder .slots div a {padding:6px 30%}
}

@media (max-width:910px){
	#fbuilder .slots div {min-width: 43%;} 
	#fbuilder .slots div a {padding:5px 35%}
}
@media (max-width:768px){
	#fbuilder .slots div {min-width: 44%;} 
	#fbuilder .slots div a {padding:10px 40%}
	.ahb_list {position:absolute;}
}
@media (max-width:425px){
	#fbuilder .slots div {min-width: 95%;} 
	#fbuilder .slots div a {padding:7px 42%}
}







#fbuilder .slots .htmlUsed.currentSelection{
	border: 2px solid #9F8C72;
	background: #9F8C72;
}
#fbuilder .slots div a:hover{
background:unset;
}
#fbuilder .slots div.htmlUsed a{
	color:#24292D;
}
#fbuilder .slots div.htmlUsed {
    background: #C47979;
}

.slotsCalendar.slotsCalendarfieldname1_1::after {
    background-image: url("/wp-content/uploads/2022/09/booking_status.png");
	background-size: 474px 56px;
    display: inline-block;
    width: 474px; 
    height: 56px;
    content:"";
	position:absolute;
	top:87%;
	left:51.5%;
/* 	margin-bottom:150px; */
}

@media(max-width:1155px){
	.slotsCalendar.slotsCalendarfieldname1_1::after{
		background-image:url("/wp-content/uploads/2022/10/Group-75090.png");
		background-size:288px 78px;
		width:287px;
		height:80px;
		top:84%;
	}
}
@media(max-width:768px){
.slotsCalendar.slotsCalendarfieldname1_1::after {
	position: absolute;
    left: 10px;
    bottom: 5%;
    margin: 25px 0px 10px 15px;
    top: unset;
	}
}



/* Timeslot Preview */
.usedSlots.usedSlotsfieldname1_1 {
    margin-top: 20px;
    border: 1px solid #9F8C72;
    padding: 20px;
	display:inline-flex;
}
.usedSlots.usedSlotsfieldname1_1:before {
    content: "您已選擇以下會診時段：";
	font-weight:500;
}

/* Name */
#field_1-1:before{
	background-image: url('/wp-content/uploads/2022/09/booking_form_t3.png');
    background-size: 210px 53px;
    display: block;
    width: 210px; 
    height: 53px;
    content:"";
	margin:100px 0 50px;
}
#field_1-1 .dfield{
	margin-top:10px;
}
/* Mail Phone */
div#field_1-2, div#field_1-3 {
    display: inline-grid;
    width: 23.6%;
}
@media(max-width:640px){
	div#field_1-2, div#field_1-3 {
    width: 46%;
}
}
	@media(max-width:500px){
	div#field_1-2, div#field_1-3 {
    width: 100%;
}
	div#field_1-3{
	padding-top:60px !important;			
	}
}
#field_1-2{
	margin-right:30px;
	margin-top:50px;
}
#fbuilder .small{
	width:100%;
}
/* Verift */
.captcha{
	margin-top:70px;
	font-size:0;
	display:flex;
}
#hdcaptcha_error_1{
	font-size:16px
}
#hdcaptcha_cp_appbooking_post_1{
    height:60px;
    border: 1px solid #aaa;
	margin-left:10px;
	width:100%
}
.captcha br {
    display: none;
}
.captcha br:first-of-type {
    display: block;
}
.captcha:before{
	content: "請輸入驗證碼";
    font-size: 16px;
	position:absolute;
	bottom:170px;
}
/* button */
#fieldlist_1 button{
    border: unset;
    -webkit-box-shadow: 1px 2px 3px 0px rgb(0 0 0 / 12%);
    box-shadow: 1px 2px 3px 0px rgb(0 0 0 / 12%);
    font-size: 18px;
    font-weight: 500;
}

/* Translate */
    #booking_en_trans #field_1-0 label:before {
    background-image: url(/wp-content/uploads/2023/09/booking_form_en_01.png);
}
    #booking_en_trans .fieldCalendarService.fieldCalendarServicefieldname1_1:after {
    background-image: url(/wp-content/uploads/2023/09/booking_form_en_02.png);
}
    #booking_en_trans #field_1-1:before{
    background-image: url(/wp-content/uploads/2023/09/booking_form_en_03.png);
}
    #booking_en_trans .usedSlots.usedSlotsfieldname1_1:before {
    content: "Selected timeslot:";
}
    #booking_en_trans .slots span:after {
    content: "Please select timeslot:";
}
    #booking_en_trans .slotsCalendar.slotsCalendarfieldname1_1::after {
    background-image: url(/wp-content/uploads/2023/09/booking_status_en.png);
    background-size: 300px 56px;
    width: 300px;
    height: 56px;
}
    #booking_en_trans .captcha:before {
    content: "Security Code:";
}