/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

   .booking-wrapper {
      background: #b5ced4;
      padding: 80px 60px 60px;
   }

   .booking-wrapper .booking-container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
   }

   .booking-wrapper .booking-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
   }

   .booking-steps {
      width: 300px;
      padding-top: 50px;
      z-index: 0;
   }
   .booking-content {
      width: calc(100% - 300px);
      background: #fff;
      border-radius: 32px;
      z-index: 2;
      min-height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
   }

/*---------- |-- LEFT SIDEBAR CSS --| ------------*/

   .step-item {
      background: #e7d5d2;
      padding: 12px 30px;
      margin-bottom: 5px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 14px;
      font-style: italic;
      font-weight: 700;
      color: #545454;
      position: relative;
      padding-right: 25px;
      right: -60px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.35s ease-in;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
   }
   .step-item.active {
      background: #7599a2;
      color: #fff;
      right: -20px;
   }
   .step-done {
      display: none;
      width: 20px;
      height: 20px;
      vertical-align: middle;
   }
    
   .step-item.completed .step-done ,
   .step-item.active .step-done {
      display: inline-block;
      position: absolute;
      right: 80px;
      filter: grayscale(100%) brightness(0.6) contrast(1.1);
   }
   .step-item.active .step-done {
      right: 41px;
      filter: brightness(1);
   }
   .step-item.completed span {
      color: #2ecc71;
      font-weight: 600;
   }
   .step .step-btngroup {
      margin-top: 50px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 40px;
   }
   .step .step-btngroup .next-btn, .step .step-btngroup .back-btn, .confirm-actions .reserve-now-btn {
      border: none;
      border-radius: 50px;
      padding: 16px 20px 14px;
      width: 100%;
      max-width: 272px;
      font-size: 16px!important;
      cursor: pointer;
      transition: .3s all;
      display: block;
      background: #b5ced4;
      font-style: italic;
      font-weight: 600;
   }
   .step .step-btngroup .back-btn {
      background: #e7d5d2;
   }
   .step .step-btngroup .next-btn:hover, 
   .step .step-btngroup .back-btn:hover,
   .confirm-actions .reserve-now-btn:hover {
      background:#7599a2;
   }
   .step .step-btngroup .back-btn:hover {
      background:#e8a3ac;
   }


/*---------- |-- RIGHT CONTENT --| ------------*/

   .booking-content img.right-side-booking-content-img {
      width: 100%;
      max-width: 250px;
      height: auto;
      display: block;
      z-index: 1;
      position: absolute;
      top: -49px;
      left: 0;
      right: 0;
      margin: auto;
   }
   .step {
      display: none;
      padding: 50px;
   }
   .step.active {
      display: block;
   }
   .step .litepicker {
      width: 100%;
   }

   .booking-content .step * {
      font-family: 'Playfair Display';
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      color: #242424;
   }

   .booking-content .step > h3 {
      font-size: 36px!important;
      line-height: 44px;
      margin:0 0 40px;
      text-align:center;
   }

   .out-of-stock {
       opacity: 0.6;
       background: #f3ecec;
       position: relative;
       border-radius:15px;
   }

   .out-of-stock input,
   .out-of-stock button {
       cursor: not-allowed !important;
       /*pointer-events: none;*/
       background: #d3d3d3;
       color: #777;
       border-color: #c0c0c0;
   }

   .out-of-stock h4,
   .out-of-stock p,
   .out-of-stock span {
       color: #777 !important;
   }

   .out-of-stock img {
       filter: grayscale(100%);
   }


/*------- |-- STEP 1: CALENDAR CSS - START --| ------ */

   .booking-steps .booking-progress-bar {
      display: none;
   }

   .litepicker .day-item {
      position: relative;
   }
    
   .litepicker .day-item[data-tooltip]:hover::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: 110%;
     left: 50%;
     transform: translateX(-50%);
     background: #000;
     color: #fff;
     padding: 5px 8px 7px;
     font-size: 12px;
     border-radius: 6px;
     white-space: nowrap;
     z-index: 9999;
   }

   .step .litepicker .container__months .month-item-header {
      padding-bottom: 0;
      margin: 0px 0 25px;
   }
   .step .litepicker .container__months .month-item-header div>.month-item-name,
   .step .litepicker .container__months .month-item-header div>.month-item-year {
      font-size: 24px;
      line-height: 30px;
   }
   .step1 .litepicker .container__months .month-item-header button {
      position:relative;
      width:30px;
      height:30px;
      border:solid 1px #b8babf;
      border-radius: 5px!important;
      cursor: pointer;
   }
   .step1 .litepicker .container__months .month-item-header button svg {
      display:none;
   }
   .step1 .litepicker .container__months .month-item-header .button-previous-month::before ,
   .step1 .litepicker .container__months .month-item-header .button-next-month::before {
      position: absolute;
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background-image: url("/wp-content/plugins/wc-table-booking-system/public/images/calndr-left.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      left: 0;    
      right:0;
      top: 0;
      bottom:0;
      margin:auto;
   }
   .step1 .litepicker .container__months .month-item-header .button-next-month::before {
      background-image: url("/wp-content/plugins/wc-table-booking-system/public/images/calndr-right.svg"); 
   }
   .step .litepicker .container__months {
      width: 100% !important;
      box-shadow: none;
      background-color: transparent;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 40px 20px;
   }
   .step .litepicker .container__months .month-item {
      padding: 0;
      width: calc(33% - 30px);
      box-sizing: border-box;
      border: solid 0px #ddd;
   }
   .step .litepicker .container__months .month-item .month-item-weekdays-row, 
   .step .litepicker .container__months .month-item .container__days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      width: 100%;
   }
   .step .litepicker .container__months .month-item .month-item-weekdays-row>div, 
   .step .litepicker .container__months .month-item .container__days>div {
      width: 100%; font-size: 14px;
      line-height: 18px;
      color: #d9d9d9;
   } 

   .step .litepicker .container__months .month-item .container__days .day-item {
      background: #e7d5d2;
      border:0;
      border-radius:0px;
      padding: 7px 0;
      color: #000;
      box-shadow: none;
   }
   .step .litepicker .container__months .month-item .container__days .day-item.is-locked {
      background: #F4EBEA;
      color: #999999; 
   }
   .step .litepicker .container__months .month-item .container__days .day-item:not(.is-locked):hover ,
   .step .litepicker .container__months .month-item .container__days .day-item.is-start-date.is-end-date {
      background: #B5CED4 !important;
      cursor: pointer;
      box-shadow: none;
   }

/*---- step 1 Popup css ----*/
   .time-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
   }
   .time-modal-content {
      background: #fff;
      padding: 35px 25px 45px;
      border-radius: 12px;
      max-width: 560px;
      text-align: center;
      position: relative;
      margin: 50px auto;
      text-align: center;
   }
   .time-modal .time-modal-content h3 {
      margin: 0;
      font-size: 26px;
      line-height: 32px;
   }
   .time-modal-content img {
      width: 100%;
      max-width: 200px!important;
      height: auto;
      margin: 15px auto 10px;
   }
   .time-modal-content .time-date {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      grid-gap: 30px;
      margin-bottom: 20px;
   }
   .time-modal-content p {
      font-size: 20px;
      line-height: 24px;
      color: #000;
      margin: 0;
      font-weight: 500;
   }
   .time-modal-content p#show-duration-time {
      font-size: 14px;
   }
   .time-modal-content .time-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
   }
   .time-modal-content .time-options .time-btn {
      background: #f8edec;
      border: 1px solid #daaaac;
      border-radius: 12px;
      padding: 10px 15px 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      min-width: 90px;
      line-height: 16px;
      color: #8f5c62;
      font-weight: 700;
      font-size: 13px;
   }
   .time-modal-content .time-options .time-btn:hover ,
   .time-modal-content .time-options .time-btn.active {
      background: #b5ced4;
      color:#000;
   }
   #confirm-time {
      border-radius: 50px;
      padding: 12px 20px 11px;
      width: 100%;
      max-width: 250px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
      display: block;
      margin: 0 auto;
      font-family: 'looking-flowers-script';
      font-size: 28px;
      line-height: 1;
      color: #242424;
      background: #b5ced4;
      letter-spacing: 0.1px;
      font-weight: 400;
   }
   #confirm-time:hover {
      background: #7aaab2;
   }

   ul.time-slots-booking-popup-notes {
      padding: 0!important;
      margin: 0!important;
   }
   ul.time-slots-booking-popup-notes li {
      text-align:left;
      margin-bottom: 15px;
      padding-left: 30px;
      position: relative;
      font-size: 14px !important;
      line-height: 20px;
      color: #000 !important;
      list-style: none;
   }

   ul.booking-rules-notes li {
      text-align:left;
      margin-bottom: 15px;
      padding-left: 30px;
      position: relative;
      font-size: 14px !important;
      line-height: 20px;
      color: #000 !important;
      list-style: none;
   }

   ul.time-slots-booking-popup-notes li::before, ul.booking-rules-notes li::before {
      position: absolute;
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("/wp-content/plugins/wc-table-booking-system/public/images/FLEUR-DI-LIS.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      left: 0;    
      top: 3px;
   }

   .table-booking-info-small ul.booking-rules-notes  {
       padding:0 !important;
   }
   .table-booking-info-small ul.booking-rules-notes.first-booking-rules li:has(i.fa)::before {
       display: none;
   }
   .table-booking-info-small ul.booking-rules-notes.first-booking-rules li:has(i.fa-square) i.fa {
       position: absolute;
       left: 2px;
       top: 4px;
   }


 /*--- step 1 Popup END css ---*/

/*------- |-- STEP 1: CALENDAR CSS - END --| ------ */


/*------- |-- STEP 2: CALENDAR CSS - START --| ------ */
   
   .booking-wrapper.package-selected-step-2 {
      background: #E7D5D2;
   }
   .package-selected-step-2 .booking-steps .step-item {
      background: #e8a3ac;
   }
   .package-selected-step-2 .booking-steps .step-item.active {
      background: #a9c0cb;
      color:#000;
   }
   .package-selected-step-2 .booking-steps .step-item.completed .step-done {
      filter: grayscale(100%) brightness(0.45);
   }
   .package-selected-step-2 .booking-steps .step-item.active .step-done {
      filter: brightness(0);
   }

   .step2 .package-grid {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      margin:0;
   }
   .step2 .package-grid .package-card {
      cursor: pointer;
      padding: 0;
      position: relative;
      width: 100%;
      max-width: calc(400px - 30px);
      padding-right: 25px;
   }  
   .booking-content .step > h3 {
      font-size: 36px!important;
      line-height: 44px;
      margin:0 0 40px;
      text-align:center;
   }
   .step2 .package-grid img {
      width: 100%;
      max-width: 200px;
      margin: 18px auto 25px;
      display: block;
   }
   .step2 .package-grid .package-content h4 {
      font-size: 24px;
      line-height: 30px;
      font-style: italic;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 0;
      color: #545454;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
   }
   .package-card .package-content p {
      font-size: 16px;
      line-height: 22px;
      margin: 15px 0px;
      display: inline-block;
   }
   .step2 .package-grid .package-content h4 span {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-style: italic;
      color: #333;
      font-weight: 400;
      min-width: 120px;
      text-align: center;
      /* padding-right: 20px; */
   }
   .package-grid input[type="radio"] {
      width: 20px;
      height: 20px;
      border:2px solid #84a3a6!important;
      border-radius: 50%;
      position: relative;
      box-sizing: border-box;
      position: absolute;
      right: 0; top: 7px;
   }
   .package-grid input[type=radio]:checked:before {
      content: "";
      border-radius: 50px;
      width: 75%;
      height: 75%;
      background: #84a3a6 !important;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
   } 
   .category-products {
      list-style: none;
      padding: 0 !important;
      margin: 0;
      font-size: 15px;
      color: #333;
   }
   .category-products li {
      margin-bottom: 15px;
      gap: 0;
      padding-left: 30px;
      position: relative;
      font-size: 16px !important;
      color: #000 !important;
      display: flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
   }
   .category-products li::before {
      position: absolute;
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url("/wp-content/plugins/wc-table-booking-system/public/images/FLEUR-DI-LIS.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      left: 0;    
      top: 3px;
   }


   
/*------- |-- STEP 2 : CALENDAR CSS - END --| ------ */


/*------- |-- STEP 3 CSS - START --| ------ */
   .step3 > h3 { display:none; }
   .step.step3.active { padding-inline: 30px; }
   .step3 div#menu-items {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
   }
   .step3 .menu-list { width: calc(33% - 25px); padding: 15px; }
   .step3 .menu-list .menu-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
   }
   .step3 .menu-list span.icon {
      display: block;
      width: 40px;
      margin: 0 auto;
   }
   .step3 .menu-list .info h4 {
      font-size:24px;
      line-height: 30px;
      text-align:center;
      margin:20px 0;
   }
   .step3 .menu-list .category-products li span {
      width: calc(100% - 25px); 
      font-size: 16px !important;
      line-height: 22px;
   }
   .step3 .menu-list .category-products li img {
      width: 16px;
      max-width: 100%;
      height: auto;
      min-width: 16px;
      object-fit: contain;
   }
   .step3 .menu-list .menu-item .info img.menu-item-image-box {
      width: 100%;
      max-width: 150px;
      margin: 15px auto 25px;
      display: block;
   }
   .step3 .menu-list .menu-item .info p {
      font-size: 16px;
      line-height: 22px;
      margin: 15px 0 0;
      display: inline-block;
   }
   .step3 .menu-list .qty-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #f8edec; 
      padding: 10px 15px;
      border-radius: 4px;
      width: 120px;
      box-sizing: border-box;
      margin: 0 auto;
   }
   .step3 .menu-list .info-qty-box {
      text-align: center;
      margin-top: 40px;
   }
   .step3 .menu-list .qty-box button {
      background: transparent;
      border: none;
      font-size: 20px!important;
      font-family: 'Playfair Display';
      font-weight: 700!important;
      color: #000 !important;
      cursor: pointer;
      width: auto;
      height: auto;
   }
   .step3 .menu-list .qty-box input {
      width: 40px;
      text-align: center;
      border: none;
      background: transparent;
      outline: none;
      pointer-events: none; 
   }
   .step3 .menu-list .qty-box input[type=number] {
      -moz-appearance: textfield;
      margin: 0;
      padding: 0;
      font-size: 20px;
      font-weight: 100!important;
      color: #000;
      line-height: 1!important;
      position: relative;
      top: -3px;
   }
   .step3 .menu-list .qty-box input::-webkit-outer-spin-button,
   .step3 .menu-list .qty-box input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0 auto;
   }
   .step3 .menu-list .info-qty-box p {
      font-size: 14px;
      line-height: 22px;
   }

   .step3 .out-of-stock .qty-box button {
       cursor: not-allowed;
   }
    

   .step3 .out-of-stock .qty-box button {
       cursor: not-allowed;
   }
    
   .step3 .out-of-stock .info a {
       cursor: not-allowed;
       /*pointer-events:none;*/
       color: #e8a3ac !important;
   }
/*------- |-- STEP 3 CSS - END --| ------ */


/*------- |-- STEP 4 CSS - START --| ------ */
   .step4 form {
      display:flex;
      flex-direction: column;
      width: 100%; 
      max-width: 580px;
      margin: 0 auto;
   }
   .step4 form .col-form { 
      width: 100%; 
      margin-bottom: 25px; 
   }
   .step4 form .col-form input ,
   .step4 form .col-form textarea {
      width: 100%; 
      margin:0px;
      color: #000000;
      font-size: 16px;
      margin: 0;
      padding: 12px 0px 5px !important;
      border-bottom: solid 1px #D6D6D6;
      letter-spacing: 0.2px;
      font-weight: 400;
      height: auto;
      line-height: 1;
   }
   .step4 form .col-form input::placeholder {
      color:#c4c4c4;  
      letter-spacing: 0.3px;
   }
   .step4 form .col-form textarea::placeholder {
      color:#c4c4c4;  
      letter-spacing: 0.3px;
   }
   .step4 form .col-form textarea  {
      padding: 15px 0px 5px !important;
   }

   .step4 form .col-form label { 
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
   } 
   .step4 form .col-form small.error {
      color: red;
      margin-top: 2px;
      display: block;
      font-size: 14px;
      font-weight: 600;
   }
   .step4 form .col-form label span.required-filed {
      color: red;
   }


/*----------------*/
  .step4 form .col-phone-form {
    position: relative;
}
.step4 form .col-phone-form .phone-wrapper {
    position: absolute;
    border: 0;
    bottom:auto;
   
}
.step4 form .col-phone-form .phone-wrapper select {
    text-align: center;
    border:0;
    padding: 5px 10px!important;
    width: 70px;
    background: #e7d5d2 !important;
    cursor:pointer;
}
.step4 form .col-phone-form .phone-wrapper select:hover {
    background: #e7d5d275 !important;
} 
.step4 form .col-form.col-phone-form input { padding-left:80px!important;}

/*------- |-- STEP 4 CSS - END --| ------ */


/*------- |-- STEP 5 CSS - START --| ------ */
   .confirm-row {
      padding: 20px 0;
      border-bottom: solid 1px #e7d5d2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: start;
      gap: 20px;
   }
   .confirmation-box {
      max-width: 490px;
      width: 100%;
      margin: 30px auto;
   }

   .step5 .confirm-row span {
      font-size: 20px;
      line-height: 24px;
   }
   .step5 .confirm-row #confirm-date{
      display: flex;
      flex-direction: column;
      align-items: end;
      text-align: right;
   }
   .step5 .confirm-row span:last-child {
      font-size: 16px;
      line-height: 22px;
   }

   .step5 > img {
      width: 100%;
      max-width: 200px!important;
      margin: 0 auto;
      display: block;
   }
   .step5 .confirm-row label.terms-label {
      width: 100%;
      position: relative;
      padding-left: 30px;
      cursor: pointer;
   }
   .step5 .confirm-row label.terms-label input[type="checkbox"] {
      position: absolute;
      left: 0;
      top: 2px;
      font-size: 40px;
      width: 18px;
      height: 18px;
      border: solid 1px;
   }  
   .step5 .confirm-row label.terms-label input[type=checkbox]:checked:before {
      font-size: 14px;
   }
   .step5 .confirm-row span#confirm-total div {
      text-align: right;
   }
   .step5 .confirm-row label.terms-label {
      font-size: 16px;
   }
   .step5 .confirm-row.terms-row {
      display: flex;
      flex-direction: column;
      width: 100%;
   }

/*------- |-- STEP 5 CSS - END --| ------ */


/*------- |-- User details CSS - START --| ------ */
   .user-information-data .page-body .row-container {
      background: #b5ced4;
      padding: 80px 60px;
   }
   .user-information-data .page-body .row-container .row {
      background: #fff;
      border-radius: 32px;
      padding: 50px!important;
   }
   .user-information-data .page-body .row-container .post-title {
      margin: 0!important;
      font-size: 36px!important;
      line-height: 42px!important;
   }
   .user-information-data .page-body .row-container .row img {
      margin: 0 auto;
      width: 100%;
      max-width: 300px;
      height: auto;
      margin-bottom: 10px;
      display: block;
   }  
   .user-information-data .page-body .row-container .row .booking-details {
      width: 100%;
      max-width: 650px!important;
      box-shadow: none !important;
      margin: 0 auto;
      padding: 0px;
      background: transparent;
   }
   .user-information-data .page-body .row-container .row .booking-details p {
      margin: 0;
      padding: 20px 0;
      border-bottom: solid 1px #e7d5d2;
      width: 100%!important;
      font-size: 16px;
      line-height: 22px;
      font-weight: 500 !important;
      display: flex !important;
      justify-content: space-between;
      flex-wrap: wrap !important;
      flex-direction: row !important;
      align-items: center;
   }
   .user-information-data .page-body .row-container .booking-details p strong {
      font-weight: 600 !important;
      color: #e8a3ac;
      display: inline-block !important;
      min-width: 220px !important;
      max-width: 220px !important;
      width: 100% !important;
      font-size: 20px;
      line-height: 26px;
   }

/*------- |-- User details CSS - END --| ------ */


/*------- |-- Checkout page CSS - START --| ------ */

   .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row input {
      font-size: 17px;
      line-height: 24px;
      font-weight: 400;
      padding: 10px 0 5px;
   }  
   .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label, 
   .woocommerce-checkout .shop_table tr th {
      font-weight: 600 !important;
      font-size: 20px;
      line-height: 24px !important;
      margin-top:0px;
   }
   .woocommerce-checkout .shop_table tr th, .woocommerce-checkout .shop_table tr td {
      padding: 20px 0;
   }
   .woocommerce-checkout div.payment_box {
      margin: 0; 
   }  
   .woocommerce-checkout #payment p {
      color: inherit;
      font-weight: 400;
      font-size: 1em;
      line-height: 22px;
      margin-top: 10px;
   }
   .woocommerce-checkout .shop_table td.product-name dl.variation dt, .woocommerce-checkout .shop_table td.product-data dl.variation dt, 
   .woocommerce-checkout .shop_table td.product-name dl.variation dd, .woocommerce-checkout .shop_table td.product-data dl.variation dd {
      font-size: 18px;
      font-weight: 500!important;
      line-height: 26px;
   }
   .woocommerce-checkout .shop_table td.product-name dl.variation dt {
      font-weight:700!important;   
      padding-right:3px!important;
   }
   
   .woocommerce-checkout .shop_table .booking-details-row td p { text-align: left; }
   .woocommerce-checkout .shop_table .booking-details-row td p.customer_package_information {
      font-size: 20px;
      line-height: 28px;
      border-top: solid 0px #eaeaea;
      margin: 0 0 15px !important;
      padding: 5px 0 0;
   }

   .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.booking-details-row th,
   .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.booking-details-row td {
        border-top: solid 1px #eaeaea;
   }

   .woocommerce-checkout .shop_table .booking-summary-box p {
      margin: 0; font-weight: 400;
   }
   .woocommerce-checkout .woocommerce-form-coupon span#coupon-error-notice {
      color: red;
      font-size: 14px;
      line-height: 18px;
   }
   .woocommerce-checkout .woocommerce-form-coupon {
      display: flex;
      flex-direction: row;
      gap: 30px;
   }
   .woocommerce-checkout .woocommerce-form-coupon p.form-row{
      width:40%!important;
      display: block;
      max-width: 100%;
   }
   .woocommerce-checkout .woocommerce-billing-fields > h3 ,
   .woocommerce-checkout .checkout h3#order_review_heading {
      font-size: 26px !important;
      line-height: 34px !important;
   }
   .woocommerce-checkout .checkout h3#order_review_heading {
      margin-bottom: 25px;
   }
   .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item:last-child td {
      padding-bottom: 15px!important;
   } 
   .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item:first-child td {
      padding-top: 15px!important;
   } 
   .woocommerce-checkout table.woocommerce-checkout-review-order-table tr > td:last-child , .woocommerce-checkout table.woocommerce-checkout-review-order-table tr > th:last-child{
      text-align: center;
  }
  .woocommerce-checkout .woocommerce-checkout-payment button.checkout-button{
      color: #ffffff !important;
      background-color: #e8a3ac !important;
      border-color: #e8a3ac !important;
      font-size: 20px;
      line-height: 28px;
      padding: 15px 35px !important;
      width: auto;
      margin-top: 30px !important;
  }
   

/*------- |-- Checkout page CSS - END --| ------ */



/*------- |-- Checkout Order Received page CSS - START --| ------ */
  
   .woocommerce-order-received .main-container .page-body .row-container {
      background: #b5ced4;
   }
   .woocommerce-order-received .post-content .post-title-wrapper {
      margin-bottom: 50px;
   }
   .woocommerce-order-received .post-content .post-title-wrapper h1.post-title {
      font-size: 40px;
      line-height: 48px;
      color: #fff;
   }
   .custom-thankyou-wrapper .thankyou-card {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      border-radius: 20px;
      flex-wrap: wrap;
      background: #fff;
   }
   .thankyou-card .right-box {
      width: calc(100% - 400px);
      padding: 50px 40px;
   }

   .thankyou-card .left-box {
      /* background: #e7d5d2; */
      background-color: #e8a3ac !important;
      width: 400px;
      padding: 50px 40px;
      border-radius: 20px;
   }
   .thankyou-card .left-box h3.add-to-calender-lable {
      font-size: 24px !important;
      line-height: 28px !important;
      color: #fff;
      text-align: center;
      margin: 0 0 25px;
      white-space: normal;
   }
   .thankyou-card .left-box .calendar-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 15px;
      position: relative;
   }
   .thankyou-card .left-box {
      position: relative;
  }
  
  .thankyou-card .left-box::before {
      content: "";
      position: absolute;
      inset: 20px;
      border: 2px solid #fff;
      border-radius: 10px;
  }
   .thankyou-card .left-box .main-button a {
      width: 100%;
      padding: 20px;
      background: #f7b4bb;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      transition:0.3s ease;
   }
   .thankyou-card .left-box .main-button a .text-part {
      color: #fff;
   }
   .thankyou-card .left-box .main-button a:hover {
      background: #ff7187ab;
   }
   .thankyou-card .left-box .main-button a img {
      width: 100%;
      max-width: 40px;
      height: 35px;
      margin: 0 0 5px;
      object-fit: contain;
      display: inline-block;
   }
   .thankyou-card .right-box h3.woocommerce-thankyou-order-received {
      font-size: 24px !important;
      line-height: 28px !important;
      margin: 0 0 25px;
      white-space: normal;
   }  
   .thankyou-card .right-box .booking-popup-box h2{
      margin-top: 0px!important;
   } 

   .thankyou-card .right-box #booking-confirmation-popup {
      margin: 40px auto 10px!important;
      padding: 0!important;
   }

   .thankyou-card .right-box .booking-popup-box {
      padding: 30px !important;
      box-shadow: 0px 0 10px 2px #d4d4d4ad !important;
   }
   .thankyou-card .right-box .order-details .shop_table th, 
   .thankyou-card .right-box .order-details .shop_table td {
      padding: 15px 0!important;
   }

   .thankyou-card .right-box .order-details table.order_details tbody tr.woocommerce-table__line-item.order_item td {
      padding: 5px 0 !important;
   }
   .thankyou-card .right-box .order-details > h3 {
      display: none;
   }
   .thankyou-card .right-box ul.things-to-know-list li {
      margin-bottom: 15px;
      padding-left: 30px;
      position: relative;
      font-size: 17px !important;
      line-height:24px;    
   }
   .thankyou-card .right-box ul.things-to-know-list li::before {
      position: absolute;
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url("/wp-content/plugins/wc-table-booking-system/public/images/FLEUR-DI-LIS.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      left: 0;    
      top: 5px;
   }

   .thankyou-card .right-box .booking-summary-box h3 {
      margin: 0 0 10px !important;
   } 
   .thankyou-card .right-box ul.woocommerce-thankyou-order-details li.woocommerce-order-overview__payment-method.method {
      display: flex;
      flex-direction: row;
      align-items: center;
   }
     .thankyou-card .right-box .order-details address ,
   .thankyou-card .right-box .order-details header.title {
      display:none;
   }

/*------- |-- Checkout Order Received page CSS - END --| ------ */

/*------- |-- bus popup css --| ------ */
.table-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
}
/*.table-modal button.close-modal {
   padding: 10px;
   background: red;
   font-size: 30px !important;
   color: #fff;
   font-weight: 800;
   font-family: ui-monospace;
   width: 40px;
   height: 40px;
   line-height: 0;
   position: absolute;
   right: 42px;
   top: 18px;
   border-radius: 0;
   cursor: pointer;
   border-top-right-radius: 18px;
   border-bottom-left-radius: 18px;
   z-index: 1;
   transition: 0.3s all;
}*/
.table-modal button.close-modal {
   background: #e8a3ac;
   font-size: 24px !important;
   color: #fff;
   font-weight: 800;
   font-family: ui-monospace;
   width: 30px;
   height: 30px;
   line-height: 0;
   position: absolute;
   right: 7px;
   top: 7px;
   border-radius: 50px;
   cursor: pointer;
   z-index: 1;
   transition: 0.3s all;
   display: flex;
   justify-content: center;
   align-items: center;
}
.table-modal button.close-modal:hover {
   background:#000;
}
.modal-content {
    width: 93%;
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 20px 40px;
    border-radius: 16px;
    position: relative;
    margin-top: -200px;
    /*max-height: 580px;
    overflow-x: auto;*/
}

p.bus-header-small-title {
    padding: 10px;
}

.bus-header-title {
   color: #b5ced4 !important;
}

/*.add-front-of-bus {
    text-align: center;
    margin-bottom: -35px;
    margin-top: 15px;
}*/

.information-for-bus-booking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 25px;
}

/* MAIN BUS LAYOUT */
.bus-layout {
   display: flex;
   justify-content: space-between;
   position: relative;
   padding: 50px 20px;
   border: solid 2px #e8a3ac;
   border-radius: 20px;
}

/* SIDE */
.bus-side {
    width: 43%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
}

/* AISLE */
.aisle {
    width: 100%;
    max-width: 70px;
    text-align: center;
    background: #eee;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    position: relative;
}

.aisle p {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   width: fit-content;
   height: max-content;
   transform: rotate(-90deg);
   font-weight: bold;
   letter-spacing: 2px;
   color: #444;
   white-space: nowrap;
   font-size: 16px;
}



/* SEATS */
.table-box {
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #ccc;
    cursor: pointer;
    margin: 0;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.table-box.available {
    background: #dff5ee;
    border-color: #DEA6AD;
}

.table-box.disabled {
    background: #eee;
    color: #999;
    cursor: not-allowed;
}

.table-box.booked.disabled {
    background: #8a938e;
}

/* VIOLINIST BLOCK */
.empty-violinist-seats {
   background: #fff3cd;
    border: 2px dashed #ff9800;
    border-radius: 12px;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    color: #8a5a00;
}

/* DIVIDER LINE */
.bus-divider {
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        #ccc,
        #ccc 6px,
        transparent 6px,
        transparent 12px
    );
    margin: 10px 0;
}

/* VERTICAL LABELS */
.bus-label {
    position: absolute;
    top: 50%;
    font-weight: bold;
    letter-spacing: 2px;
    color: #444;
    white-space: nowrap;
}

.bus-label.left {
   /*left: -100px;
   transform: translateY(-50%) rotate(-90deg);*/
   left: -135px;
   transform: translateY(-50%) rotate(-90deg);
   font-size: 16px !important;
}

.bus-label.right {
   /*right: -100px;
   transform: translateY(-50%) rotate(90deg);*/
   right: -135px;
   transform: translateY(-50%) rotate(90deg);
   font-size: 16px !important;
}

/* HEADER FOOTER */

.table-booking-info-small li {
   font-size: 13px;
   list-style: none;
   padding-left: 0;
   margin-left: 0;
}

i.fa.fa-square.pink {
    color: #DEA6AD !important;
    margin: 0px 0px 0px 0px !important;
}
i.fa.fa-square.gray {
    color: #adb3b0 !important;
    margin: 0px 0px 0px 0px !important;
}

.bus-header,
.bus-footer {
   text-align: center;
   font-weight: bold;
   margin: 10px 0;
   font-size: 16px;
}

.bus-header {
   position: relative;
   margin-bottom: -35px;
   font-size: 20px;
   color: #e8a3ac;
}
.bus-footer {
   position: relative;
   margin-top: -35px;
}

.table-box.available {
    background: #DEA6AD;
    color: #fff;
}

.table-box.booked {
    background: #e8a3ac;
    color: #fff;
    cursor: not-allowed;
}

.table-box.hold {
    background: #ADBFCA;
    color: #fff;
    cursor: not-allowed;
}

.table-box.selected {
    border: 3px solid #000;
}

.table-box.disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
}
.table-box.available.disabled {
    background-color: #8a938e;
    cursor: not-allowed !important;
}
button#confirmTable {
    border: 1px solid rgb(232, 163, 172);
    border-radius: 20px;
    padding: 7px 20px;
    background: rgb(232, 163, 172);
    color: white;
    /*margin: 20px auto 0;*/
    display: inline-block;
    text-align: center;
}
button#confirmTable:hover {
    border: 1px solid rgb(232, 163, 172);
    background: #fff;
    color: rgb(232, 163, 172);
}
.table-modal-footer {
    text-align: center;
}
div#checkout-hold-timer {
    padding-bottom: 10px;
}


/*------------------------------------------------------------------------
      |--- All Responsive Media Queries CSS ---|
--------------------------------------------------------------------------*/

@media (min-width: 1025px) {

   .step2 .package-grid .package-card {
      padding: 20px; border-radius: 20px;
   }
   .package-grid input[type="radio"] {
      top: 27px;
      right: 20px;
   }
   .step2 .package-grid .package-card:hover {
      transition:0.35s ease-in;
      background: #e8a3ac33; border-radius: 20px;
   }

}

@media (max-width: 1280px) {
   
   .booking-wrapper {
      padding: 80px 40px 60px 30px;
   }
   .booking-steps {
      width: 260px;
   }
   .booking-content {
      width: calc(100% - 260px);
      min-height: 430px;
   }
   .step {
      padding: 50px 30px;
   }
   .step-item {
      padding: 12px 20px;
      right: -55px;
   }
   .step-item.active {
      right: -15px;
   }

   .step-item.completed .step-done, .step-item.active .step-done {
      right:70px;
      width: 18px;
      height: 18px;
   }
   .step-item.active .step-done {
      right: 31px; 
   }

   .step .step-btngroup .next-btn, 
   .step .step-btngroup .back-btn, 
   .confirm-actions .reserve-now-btn {
      max-width: 200px;
      padding: 14px 20px 15px;
   }


/*------- |-- STEP 1 CSS --| ------ */
   .step .litepicker .container__months .month-item {
      padding: 0;
      width: calc(33% - 20px);
   }
   .step .litepicker .container__months .month-item .container__days .day-item {
      padding: 5px 0 8px;
      font-size: 14px !important;
      line-height: 20px;
   }
   .step .litepicker .container__months .month-item-header div>.month-item-name, 
   .step .litepicker .container__months .month-item-header div>.month-item-year {
      font-size: 20px;
      line-height: 26px;
   }


/*------- |-- STEP 2 CSS --| ------ */
   .step2 .package-grid .package-card {
      max-width: calc(400px - 25px);
   }

/*------- |-- STEP 3 CSS --| ------ */
   .step3 .menu-list {
      width: calc(33% - 20px);
   }
   .step3 .menu-list .category-products li span {
      width: calc(100% - 20px);
      font-size: 14px !important;
      line-height: 20px;
   }

}


@media (max-width: 1140px) {

/*------- |-- STEP 1 CSS --| ------ */
   .step .litepicker .container__months .month-item {
      padding: 0;
      width: calc(33% - 15px);
   }
   .step .litepicker .container__months .month-item .container__days .day-item {
      padding: 4px 0 7px;
      font-size: 13px !important;
      line-height: 20px;
   }

/*------- |-- STEP 3 CSS --| ------ */
   .step3 .menu-list {
      width: calc(33% - 15px);
   }

}




@media (max-width: 1024px) {
   
   .booking-wrapper { padding: 80px 30px 60px 30px; }
   
   .booking-wrapper .booking-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0;
      width: 100%;
   }
   .booking-steps { 
      padding: 0 0 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 15px;
      overflow-x: auto;
      width: 100%;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }
   /* Hide scrollbar - Chrome, Safari */
      .booking-steps::-webkit-scrollbar {
         display: none;
      }
   .booking-content {
      width: 100%;
      margin-top: 70px;
   }
   .step-item {
      padding: 12px 20px;
      right: 0;
      border-radius: 30px;
      min-width: 205px;
      max-width: 205px;
   }
   .step-item.active {
      right: 0;
   }
   .step-item.completed .step-done, .step-item.active .step-done {
      right: 25px;
      width: 16px;
      height: 16px;
   }
   .step .step-btngroup { gap: 20px; }


/*------- |-- STEP 1 CSS --| ------ */
   .step .litepicker .container__months .month-item-header {
      margin: 0px 0 10px;
   }
   .step .litepicker .container__months .month-item .container__days .day-item {
      line-height: 18px;
   }  
   .step .litepicker .container__months .month-item {
      width: calc(50% - 15px);
   }
   .time-modal-content {
      max-width: 460px;
      margin: 60px auto;
   }
   .time-modal-content .time-options {
      margin-bottom: 30px;
   }

/*------- |-- STEP 2 CSS --| ------ */
   .step2 .package-grid {
      gap: 30px 20px;
      margin: 0;
      flex-wrap: wrap;
   }
   .step2 .package-grid .package-card {
      max-width: calc(50% - 20px);
   }
   .step2 .package-grid img {
      width: 100%;
      max-width: 160px;
   }
   .step2 .package-grid .package-content h4 {  
      font-size: 20px;
      line-height: 28px;
      gap: 10px;
   }
   .step2 .package-grid .package-content h4 span {
      text-align: right; font-size: 16px;
   }
   .package-grid input[type="radio"]{
      top: 10px;
      right: 25px;
   }
   
/*------- |-- STEP 3 CSS --| ------ */
   .step3 .menu-list { width: calc(50% - 15px); }
   .step3 div#menu-items { flex-wrap: wrap; gap: 40px 20px; }


/*------- |-- Checkout Order Received page CSS  --| ------ */
   .thankyou-card .left-box {     
      width: 300px;
      padding: 40px 30px; 
   }
   .thankyou-card .right-box { 
      width: calc(100% - 300px);
      padding: 40px 30px; 
   }
   .thankyou-card .left-box .calendar-buttons {
      grid-gap: 20px;
   }
   .woocommerce-order-received .post-content .post-title-wrapper h1.post-title {
      font-size: 34px;
      line-height: 42px;
   }
   .thankyou-card .right-box .booking-popup-box {
      padding: 30px 20px !important;
   }
   .thankyou-card .left-box::after{
      inset: 10px;
   }



}



@media (max-width: 880px) {

/*------- |-- STEP 1 CSS --| ------ */
   .step .litepicker .container__months .month-item {
      padding: 0;  width: calc(50% - 15px);
   }

/*------- |-- STEP 2 CSS --| ------ */
   .step2 .package-grid .package-content h4 span { 
      font-size: 16px;
      line-height: 18px; 
      min-width: 60px;
   }
   .step2 .package-grid .package-card { max-width: calc(50% - 20px); }


}




@media (max-width: 767px) {

   .booking-wrapper { padding: 50px 25px 50px 25px; }
   .step-btngroup { gap: 20px; }
   
   .booking-content .step > h3 {
      font-size: 26px !important;
      line-height: 34px;
   }

   .wt-table-booking-custom-main .site-footer .full-width .wpb_row.row-inner {
      height: auto !important;
      padding: 5px 0;
   }

/*------- |-- STEP 1 CSS --| ------ */
   .step .litepicker .container__months .month-item .container__days .day-item {
      padding: 5px 0 7px;
      font-size: 16px !important;
      line-height: 24px;
      height: auto;
   }
   .step .litepicker .container__months {
      gap: 30px 20px;
   }
   .step .litepicker .container__months .month-item {
      padding: 0;
      width: calc(100% - 0px);
   }
   .time-modal-content {
      width: 88%;
      max-width: 500px;
      padding: 25px 20px;
      border-radius: 18px;
      position: absolute;
      left: 0;
      top: 30px;
      bottom: 0;
      right: 0;
      margin: 0 auto;
      height: fit-content;
   }
   ul.time-slots-booking-popup-notes li {
      margin-bottom: 5px;
   }
   .time-modal-content .time-date {
      margin-bottom: 15px;
   }
   .time-modal-content .time-options {
      margin-bottom: 25px;
   }
   .time-modal-content h3 {
      font-size: 28px;
   }
   #selected-date-text {
      font-size: 20px;
   }
   .time-btn {
      font-size: 14px;
      padding: 12px 18px;
      min-width: 95px;
   }
   #confirm-time {
      font-size: 18px;
      padding: 16px 0;
   }
   
/*------- |-- STEP 2 CSS --| ------ */

   .step2 .package-grid .package-card {
      max-width: calc(100% - 0px);
   }  
   .step2 .package-grid .package-card {
      max-width: 100%;
      padding-right: 0
   }
   .step2 .package-grid .package-content h4 {
      padding-right: 25px;
   }


/*------- |-- STEP 3 CSS --| ------ */
   .step3 .menu-list {
      width: calc(100% - 0px);
      padding: 0px;
   }
   .step3 .menu-list.out-of-stock { padding: 15px; } 


/*------- |-- STEP 5 CSS --| ------ */
   .step5 .confirm-row span {
      font-size: 14px;
      line-height: 18px;
   }
   .step5 .confirm-row span:last-child {
      font-size: 14px;
      line-height: 18px;
      min-width: 110px;
      width: 100%;
      max-width: 110px;
   }



/*------- |-- Checkout Order Received page CSS  --| ------ */

    .thankyou-card .right-box {
       padding: 40px 20px;
       width: 100%;
   }
   .thankyou-card .left-box{
      padding: 40px 25px !important;
      width: 100%;
  }
   .step5 .confirm-row #confirm-date{
      align-items: flex-start !important;
      text-align: left;
   }
   .thankyou-card .left-box::before{
      inset: 10px;
   }
   .woocommerce-checkout table.woocommerce-checkout-review-order-table tr > td:last-child, 
   .woocommerce-checkout table.woocommerce-checkout-review-order-table tr > th:last-child {
      text-align: right;
   }

}


@media (max-width: 580px) {
   .information-for-bus-booking {
       grid-template-columns: 1fr;
   }

/*------- |-- Checkout page CSS - START --| ------ */
   .woocommerce-checkout .page-body .row-container .row {
      padding:40px 25px!important;
   }
   .woocommerce-checkout .main-wrapper .page h1 {
      font-size:34px!important;
      line-height: 48px;
   }
   .woocommerce-checkout .post-title::after {
      font-size:16px!important;
      line-height: 24px;
   }
   .woocommerce-checkout .shop_table td.product-name dl.variation dt, 
   .woocommerce-checkout .shop_table td.product-data dl.variation dt, 
   .woocommerce-checkout .shop_table td.product-name dl.variation dd, 
   .woocommerce-checkout .shop_table td.product-data dl.variation dd {
      font-size: 16px;
      font-weight: 500 !important;
      line-height: 24px;
      margin: 0 !important;
   }


/*------- |-- Checkout Order Received page CSS  --| ------ */
   .woocommerce-order-received .post-content .post-title-wrapper h1.post-title {
      font-size:28x;
      line-height: 34px;
   }
   .thankyou-card .right-box .order-details .shop_table th, 
   .thankyou-card .right-box .order-details .shop_table td {
      padding: 10px 0 !important;
      font-size: 18px !important;
   }

   .thankyou-card .right-box .order-details table.order_details tbody tr.woocommerce-table__line-item.order_item td {
      padding: 5px 0 !important;
   }

/*------- |-- User details CSS - START --| ------ */
   .user-information-data .page-body .row-container {
      padding: 50px 25px;
   }
   .user-information-data .page-body .row-container .row {
      padding: 35px 20px!important;
   }
   .user-information-data .main-container article .post-body .post-content .row-container .row-parent {
     padding: 30px 18px 35px !important;
   }
   .user-information-data .page-body .row-container .row img {
      max-width: 180px; 
   }
   .user-information-data .page-body .row-container .post-title {
      font-size: 24px !important;
      line-height: 30px!important;
   }
   .user-information-data .page-body .row-container .row .booking-details p {
      flex-wrap: nowrap !important;
      font-size: 12px !important;
      line-height: 16px !important;
      text-align: right;
      padding: 12px 0 !important;
   }
   .user-information-data .page-body .row-container .booking-details p strong {
      font-size: 12px !important;
      line-height: 16px !important;
      text-align: left;
      min-width: 70px !important;
      max-width: 70px !important;
   }

/*------- |-- ALL STEPS CSS --| ------ */
   .step {
      padding: 40px 20px;
   }
   .step .step-btngroup { margin-top: 35px; }

/*------- |-- STEP 1 CSS --| ------ */
   .time-options { gap: 10px; }
   .time-btn { flex: 1 1 40%; }

/*------- |-- STEP 3 CSS --| ------ */
   .step.step3.active {
       padding-inline: 20px;
   }


/*------- |-- bus popup css --| ------ */

   .bus-layout { padding: 40px 0px; }
   .bus-side {
      width: 42%;
      padding: 0 10px;
   }
   .modal-content {
      max-height: max-content;
      padding: 25px;
   }
   .bus-label.left {
      left: -112px;
      transform: translateY(-50%) rotate(-90deg);
      font-size: 13px !important;
   }
   .bus-label.right {
      right: -112px;
      transform: translateY(-50%) rotate(90deg);
      font-size: 13px !important;
   }  
   .table-box {
      padding: 10px 15px;
      margin: 0px auto;
      font-size: 13px;
      width: 100%;
      max-width: 120px;
   }
   .bus-header, .bus-footer {
      font-size: 14px;
   }

   .bus-header { margin-bottom: -28px; }
   .bus-footer { margin-top: -28px; }
   .empty-violinist-seats {
      font-size: 12px;  padding: 12px 10px;
   }
   .aisle p { left: -10px; font-size: 14px; }
   .aisle { width: 100%; max-width: 35px; }

   .table-modal button.close-modal {
      padding: 10px;
      font-size: 22px !important;
      width: 27px;
      height: 27px;
      right: 30px;
      top: 32px;
   }

   ul.booking-rules-notes.second-booking-rules {
       margin-top: 0px !important;
   }

}