/*complete reservation*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
  font-family: 'Montserrat', Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  background: #F2F3EB;
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, input, select, textarea {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}
input {
  line-height: normal;
}
textarea {
  overflow: auto;
}
#container {
  border: solid 3px #474544;
  max-width: 768px;
  margin: 60px auto;
  position: relative;
}
h1 {
  color: #474544;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
}
h6 {
    text-align: center;
    margin-bottom: 30px;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}
select, input#bookingdate {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.table-booking-content {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
div#dateFields{
    padding-bottom: 30px;
}
input#booktableButton {
  width: 100%;
  background: none;
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 30px 35px 20px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
input#booktableButton:hover {
  background: #474544;
  color: #F2F3EB;
}
.underline {
  border-bottom: solid 2px #474544;
  margin: -0.512em auto;
  width: 80px;
}
.icon_wrapper {
  margin: 50px auto 0;
  width: 100%;
}
.icon {
  display: block;
  fill: #474544;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}
/*.name {
	float: left;
	width: 45%;
}
.email {
	float: right;
	width: 45%;
}*/
input[type='text'], 
input[type='email'], 
[type='email'], 
select, 
textarea {
	background: none;
  border: none;
	border-bottom: solid 2px #474544;
	color: #474544;
	font-size: 1.000em;
  font-weight: 400;
  letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
  text-transform: none;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
input[type='text']:focus,
[type='email']:focus,
textarea:focus {
	outline: none;
	padding: 0 0 0.875em 0;
}
.message {
	float: none;
}
select {
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
select::-ms-expand {
  display: none;
}
.subject {
  width: 100%;
}
.telephone{
  width: 100%;
}
textarea{
	line-height: 150%;
	height: 150px;
	resize: none;
  width: 100%;
}
::-webkit-input-placeholder {
	color: #474544;
}
:-moz-placeholder { 
	color: #474544;
	opacity: 1;
}
::-moz-placeholder {
	color: #474544;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #474544;
}
#form_button_final_submit {
  width: 100%;
  background: none;
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
#form_button_final_submit:hover {
  background: #474544;
  color: #F2F3EB;
}
@media screen and (max-width: 768px) {
  #container {
    margin: 20px auto;
    width: 95%;
  }
}
@media screen and (max-width: 480px) {
  h1 {
    font-size: 26px;
  }  
  .underline {
    width: 68px;
  }  
  #form_button_final_submit {
    padding: 15px 25px;
  }
}
@media screen and (max-width: 420px) {
  h1 {
    font-size: 18px;
  }  
  .icon {
    height: 35px;
    width: 35px;
  }  
  .underline {
    width: 53px;
  }  
  input[type='text'], [type='email'], select, textarea {
    font-size: 0.875em;
  }
}
#booking_details {
  margin-top: 30px;
  margin-bottom: -30px;
  text-align: center;
}
ul#booking_details_ul {
  display:flex;  
  list-style:none;
}
ul#booking_details_ul li{
  padding-right: 20px;
}
#booking_details_ul li span,
#booking_details_ul li p {
  display: inline-block;
  vertical-align: middle;
}
div#booking_details_icon {
  padding-left: 20px;
}
div#booking_details_icon,
div#booking_details_container {
  display: inline-block;
  vertical-align: middle;    
}
/* popup */
.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear, z-index 0.15;
  -o-transition: opacity 0.15s linear, z-index 0.15;
  transition: opacity 0.15s linear, z-index 0.15;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}
.model-open {
  z-index: 99999;
  opacity: 1;
  overflow: hidden;
}
.model-open .custom-model-inner {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  position: relative;
  z-index: 999;
}
.model-open .bg-overlay {
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
.bg-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}
.close-btn {
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
  z-index: 99;
  font-size: 30px;
  color: #fff;
}
@media screen and (min-width:800px){
	.custom-model-main:before {
	  content: "";
	  display: inline-block;
	  height: auto;
	  vertical-align: middle;
	  margin-right: -0px;
	  height: 100%;
	}
}
@media screen and (max-width:799px){
  .custom-model-inner{margin-top: 45px;}
}
/* modal start */
/*----OTP-form----*/
.custom-model-inner {
  display: inline-block;
  vertical-align: middle;
  width: 350px;
  max-width: 97%;
  padding:20px;
  margin: 30px auto;
  border-radius: 20px;
  background: #fff;
  position: relative;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.mobile-text {
  color: rgb(152 150 150 / 72%);
  font-size: 14px;
  margin-bottom: 1rem;
  display: block;
  font-weight: 400;
  line-height: 1.5;
}
.custom-model-inner h5{
  margin: 0 0 5px 0;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.25rem;
  color: #212529;
  letter-spacing: -0.5px;
}
.custom-model-inner .mobile-text .text-danger {
  color: #dc3545;
}
.custom-model-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.custom-model-wrap {
  text-align: left;
  padding:40px 20px;
}
#is_verified {
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 16px;
  line-height: 35px;
  font-weight: 400;
  color: #495057;
  padding: 8px 16px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 4px;
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
}
#otpverifyBtn {
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 28px;
  padding: 8px 16px;
  width: 100px;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  letter-spacing: -0.5px;
  color: #fff;
  background: #EF643D;
}
/* modal end */

/*----Global-form-css---*/
div#content {
  background: #e9e9e9;
  position:sticky;
}
div#content h1.entry-title{
  color: #1a1f36;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: capitalize;
}
.table-booking-content,
form#booking_contact_form{
	font-family: "RobotoDraft", "Roboto", sans-serif;
	transition: 0.3s ease;
  width: 100%;
  max-width:500px; 
  margin:0 auto;
	position: relative;
	background: #ffffff;
	border-radius: 5px;
	padding: 40px 0 40px 0;
	box-sizing: border-box;
  box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
}
.table-booking-content form,
form#booking_contact_form .frm-bg{
  padding: 0 37.5px;
  margin: 0px 0;
}
.table-booking-content:after,
form#booking_contact_form:after{
	content: '';
	background: #fafafa;
	border-radius: 5px; 
	margin: 0 10px;
	padding: 0;
	height:100%;
	width:-webkit-fill-available;
	display: block;
	position: absolute;
	top: -11px;
	z-index: -1;
	box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
}
.table-booking-content h6,
form#booking_contact_form h6{
	position: relative;
	z-index: 1;
	border-left: 5px solid #EF643D;
	margin: 0 0 20px;
	padding: 6px 0 6px 35px;
	color: #EF643D;
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: left;
}
.table-booking-content input[type=text],
.table-booking-content select,
form#booking_contact_form input[type=text],
form#booking_contact_form select,
form#booking_contact_form input[type=email],
form#booking_contact_form textarea,
input[type=number]{
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 16px;
  line-height: 35px;
  padding: 8px 16px;
  margin: 0 0 20px 0;	  
  letter-spacing: -0.5px;
  width: 100%;
  min-height: 50px;
  border: unset;
  border-radius: 4px;
  color: #000;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
div#dateFields{
  position:relative;
}
.input-icon{
  position: absolute;
  top: 26px;
  right: 0;
  width: 3.4em;
  height: 3.4em;
  line-height: 3.4em;
  text-align: center;
  pointer-events: none;
  color:#9a9a9a;
}
.table-booking-content select,
form#booking_contact_form select{
	background-size: 21px;
	background-position: 97% 50%;
}
.table-booking-content input#booktableButton,
input#form_button_final_submit{
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  margin-top: 10px;
  font-weight: 600;
  text-transform: capitalize;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  letter-spacing: -0.5px;
  outline-color: rgb(84 105 212 / 0.5);
  background: #EF643D;
  color:#fff;	
  font-family: "RobotoDraft", "Roboto", sans-serif;
}
.table-booking-content input#booktableButton:hover,
input#form_button_final_submit:hover,
button#otpverifyBtn:hover {
  background: #de5630;
}
.table-booking-content div#dateFields {
    padding-bottom: 0;
}
/*----second-form----*/
form#booking_contact_form input#booking_telephone {
  margin: 0 0 10px 0;
}
form#booking_contact_form button#numverifyBtn {
  font-size: 16px;
  color: #000000;
  padding: 8px 19px;
  margin-bottom: 20px;
  border: 1.5px solid #eeeaea;
  background-color: #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  width: 100%;
}
form#booking_contact_form button#numverifyBtn:hover{
  background-color: #efefef;
  width: 100%;
}
/*----thankyou-page----*/  
.thankyou_container,
.error_container{
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 20px 40px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
 } 
 .thankyou_container .thankyou_h1,
 .error_container h1.error_h1{
  font-size: 37px;
  line-height: 1.4em;
  letter-spacing: -0.5px;
  font-weight: 700;
  text-transform: capitalize;
  margin:10px 0 0;
 } 
 .thankyou_container .thankyou_bookingid{
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3em;
  color: #666666;
  letter-spacing: -1px;
  margin: 20px 0 0;
 }
 .thankyou_container .thankyou_bookingid span {
  font-weight: 500;
  color: #EF643D;
}
 .thankyou_container .thankyou_p {
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-transform: capitalize;
  letter-spacing: -0.5px;
  color: #666666;
  margin: 10px 0;
 } 
 .thankyou_container .thankyou_icon,
 .error_container .error_icon svg{
  display: block;
  margin: 0 auto;
  width: 80px;
  height:80px;
  background-size: contain;
  background-repeat: no-repeat;
}
.thankyou_container .thankyou_button {
  color: #fff;
  background: #EF643D;
  width: 215px;
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 16px;
  line-height: 28px;
  padding: 10px 20px;
  margin: 40px auto 20px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: -0.5px;
  border-radius: 4px;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.thankyou_container .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.thankyou_container .path.circle {
  -webkit-animation: dash 0.9s ease-in-out;
  animation: dash 0.9s ease-in-out;
}
.thankyou_container .path.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}
.thankyou_container .path.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
  animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
/*-----*/
.swal2-icon {
	position: relative;
	justify-content: center;
	width: 5em;
	height: 5em;
	margin: 1em auto 1.50em;
	border: 0.25em solid transparent;
	border-radius: 50%;
	line-height: 5em;
	cursor: default;
	box-sizing: content-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	zoom: normal;
}
.swal2-animate-error-icon svg{
	-webkit-animation: swal2-animate-error-x-mark 0.5s;
	animation: swal2-animate-error-x-mark 0.5s;
}
@-webkit-keyframes swal2-animate-error-x-mark{
	0% {
		margin-top: 1.625em;
		-webkit-transform: scale(0.4);
		transform: scale(0.4);
		opacity: 0;
	}
	50% {
		margin-top: 1.625em;
		-webkit-transform: scale(0.4);
		transform: scale(0.4);
		opacity: 0;
	}
	80% {
		margin-top: -0.375em;
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	100% {
		margin-top: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

/* cleaned UI overrides */
:root {
  --rp-tb-form-header-color: #1f2a44;
  --rp-tb-form-button-bg: #ef643d;
  --rp-tb-form-button-hover: #db5631;
}

.rp-tb-card,
.table-booking-content,
form#booking_contact_form {
  max-width: 560px;
  margin: 20px auto;
  border-radius: 10px;
  border: 1px solid #e6e8ec;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  background: #fff;
}

.table-booking-content h6,
form#booking_contact_form h6 {
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rp-tb-form-header-color);
  border-left: 4px solid var(--rp-tb-form-header-color);
  margin-bottom: 24px;
}

.rp-tb-form label,
form#booking_contact_form label {
  font-weight: 600;
  color: #3d4c63;
}

.rp-tb-inline-notice {
  color: #c81e1e;
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0;
}

#rp_tb_initial_form input[type=text],
#rp_tb_initial_form select,
form#booking_contact_form input[type=text],
form#booking_contact_form input[type=email],
form#booking_contact_form textarea,
form#booking_contact_form select {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#rp_tb_initial_form,
form#booking_contact_form .frm-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#rp_tb_initial_form .subject,
#rp_tb_initial_form #peopleFields,
#rp_tb_initial_form #dateFields,
#rp_tb_initial_form #timeFields,
form#booking_contact_form .name,
form#booking_contact_form .email,
form#booking_contact_form .telephone,
form#booking_contact_form .message {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#rp_tb_initial_form .submit,
form#booking_contact_form .submit {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#booktableButton,
#form_button_final_submit {
  background: var(--rp-tb-form-button-bg) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 6px !important;
  width: 100% !important;
  max-width: 420px !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

#booktableButton:hover,
#form_button_final_submit:hover {
  background: var(--rp-tb-form-button-hover) !important;
}

#ui-datepicker-div,
#ui-datepicker-div.ui-datepicker {
  background: #fff !important;
  opacity: 1 !important;
  z-index: 999999 !important;
  border: 1px solid #d7dde6 !important;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16);
  padding: 8px;
  max-width: calc(100vw - 24px);
}

#ui-datepicker-div .ui-datepicker-header {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px;
}

#ui-datepicker-div .ui-datepicker-calendar {
  background: #fff !important;
}

#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td {
  background: #fff !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px;
  color: #334155 !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
  background: var(--rp-tb-form-button-bg) !important;
  border-color: var(--rp-tb-form-button-bg) !important;
  color: #fff !important;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span {
  opacity: 0.45 !important;
}

#ui-datepicker-div table {
  width: 100%;
}

.thankyou_container,
.error_container {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

@media (max-width: 640px) {
  #rp_tb_initial_form input[type=text],
  #rp_tb_initial_form select,
  form#booking_contact_form input[type=text],
  form#booking_contact_form input[type=email],
  form#booking_contact_form textarea,
  form#booking_contact_form select,
  #booktableButton,
  #form_button_final_submit {
    max-width: 100%;
  }
}
