:root {
  /* add the theme override variables here */

  /*Splash Page Style Variables Start (splash/index.scss)*/
  --splash-container-top-sec-timer-sec-p-font-family: var(--font-regular);
  --splash-container-top-sec-timer-sec-location-font: 32px/27px
    var(--font-regular);
  --splash-container-buttons-container-button-border-radius: 0px;
  --splash-container-buttons-container-button-order-fnb-button-background: var(
    --base-color2
  );
  --splash-container-buttons-container-button-get-tickets-button-background: var(
    --color3
  );
  --splash-container-buttons-container-button-get-tickets-button-color: var(
    --base-color2
  );
  --splash-container-top-sec-timer-sec-h3-font-size: 82px;
  --splash-container-welcome-blk-h1-font: 80px/104px var(--welcome-text-font);
  --splash-container-welcome-blk-h1-span-font: 100px/79.78px var(--font-regular);
  --splash-container-buttons-container-button-font-size: 48px;
  --splash-container-buttons-container-button-line-height: 42px;

  /* Movies pages Style Variables Start (movies-pages/index.scss) */
  --movie-container-background: var(--base-color2);
  --movie-container-op-sec-rt-sec-filter-btn-font: 18px/58px var(--font-regular);
  --movie-container-op-sec-timer-p-color: var(--base-color1);
  --movie-container-op-sec-rt-sec-filter-btn-fb-secondary-background: var(
    --color5
  );
  --movie-container-op-sec-rt-sec-filter-btn-border-radius: 0px;
  --movie-container-op-sec-timer-p-font-size: 32px;
  --movie-container-op-sec-timer-p-line-height: 29.88px;
  --movie-container-movie-sec-movies-list-a-box-shadow: unset;
  --movie-container-movie-sec-movies-list-a-bg: var(--color5);
  --movie-container-movie-sec-movies-list-a-border-radius: 0px;
  --movie-container-movie-sec-movies-list-cont-sec-border-radius: 0px;
  --movie-container-movie-sec-movies-list-next-show-details-bg: var(--color5);
  --movie-container-movie-sec-movies-list-cont-sec-h4-font: 22px/20px
    var(--font-regular);
  --movie-container-movie-sec-movies-list-cont-sec-h4-color: var(--base-color1);
  --movie-container-movie-sec-movies-list-cont-sec-p-color: var(--base-color1);
  --movie-container-movies-footer-background: var(--color1);
  --movie-container-movies-footer-span-color: var(--base-color2);
  --movie-container-movie-sec-movies-list-movie-det-ad-book-border-radius: 0px;
  --movie-container-movie-sec-movies-list-movie-det-ad-book-span-font-size: 18px;
  --movie-container-movie-sec-movies-list-movie-det-ad-book-background: var(
    --color2
  );
  --movie-container-movie-sec-movies-list-movie-det-ad-book-border: 1px 1px 1px
    0px solid var(--color4);
  --movie-container-movie-sec-movies-list-next-show-details-show-time-color: var(
    --color1
  );
  --movie-container-op-sec-filter-count-color: var(--base-color2);
  --movie-container-op-sec-rt-sec-filter-btn-box-shadow: unset;
  --experience-modal-modal-body-experience-div-border: 2px solid var(--color1);
  --experience-modal-heading-font-size: 42px;
  --experience-modal-modal-content-border-radius: 0px;
  --experience-modal-button-border-radius: 0px;
  --experience-modal-modal-body-experience-div-border-radius: 0px;
  --experience-modal-apply-button-background: var(--color3);
  --experience-modal-apply-button-border-color: var(--color3);
  --experience-modal-apply-button-color: var(--base-color2);
  --experience-modal-modal-body-experience-div-active-background: var(--color2);
  --experience-modal-modal-body-experience-div-active-border-color: var(
    --color2
  );
  --experience-modal-close-button-background: var(--color1);
  --experience-modal-reset-button-color: var(--base-color1);
  --experience-modal-modal-body-experience-div-font-size: 28px;
  --experience-modal-reset-button-font-size: 36px;

  /* Showtimes Page Style Variables Start (showtimes/index.scss) */
  --banner-wrap-banner-wrap-movie-detail-wrap-movie-detail-movie-title-font: 42px/48px
    var(--font-bold);
  --banner-wrap-banner-wrap-movie-detail-wrap-movie-detail-movie-desc-span-after-background: var(
    --color3
  );
  --banner-wrap-noAfter-movieSupportInfo-span-after-background: var(--color3);

  --showtime-container-time-wrap-ul-movie-date-wrap-movie-date-font: 32px/30px
    var(--font-bold);
  --showtime-container-time-wrap-ul-movie-date-wrap-border-radius: 0px;
  --showtime-container-time-wrap-ul-movie-date-wrap-background: var(--color6);
  --showtime-container-time-wrap-ul-movie-date-wrap-today-background: var(
    --color2
  );
  --showtime-container-time-wrap-ul-movie-date-wrap-movie-day-font: 22px/20px
    var(--font-regular);
  --showtime-container-play-wrap-ul-play-date-wrap-play-time-font: 36px/28px
    var(--secondary-font-light);
  --showtime-container-play-wrap-ul-play-date-wrap-play-time-border-radius: 0px;
  --showtime-container-play-wrap-ul-play-date-wrap-play-time-border: 2px solid
    var(--color3);
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-available-play-time-color: var(
    --color3
  );
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-available-play-time-border-color: var(
    --color3
  );
  --showtime-container-time-wrap-future-date-caution-p-color: var(--color2);
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-fast-filling-play-time-color: var(
    --color2
  );
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-fast-filling-play-time-border-color: var(
    --color2
  );
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-sold-play-time-color: var(
    --color4
  );
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-sold-play-time-bg-color: var(
    --color5
  );
  --showtime-container-play-wrap-ul-play-date-wrap-showtime-sold-play-time-border-color: var(
    --color4
  );
  --showtime-container-play-wrap-ul-play-date-wrap-play-time-selected-border: 1.8px
    solid var(--color3) 0;
  --showtime-container-play-wrap-ul-play-date-wrap-play-time-selected-background: var(
      --color3
    )
    0;
  --showtime-modal-show-modal-dialog-modal-content-border-radius: 0px;
  --showtime-modal-show-modal-dialog-modal-content-modal-banner-img-border-top-left-radius: 0px;
  --showtime-modal-show-modal-dialog-modal-content-modal-banner-img-border-top-right-radius: 0px;
  --showtime-modal-show-modal-dialog-modal-content-modal-close-border-radius: 0px;
  --showtime-modal-show-modal-dialog-modal-content-modal-close-background: var(
      --color1
    )
    url("./assets/images/close-icon.svg") no-repeat center center;
  --showtime-modal-show-modal-dialog-modal-content-modal-body-movie-info-modal-movie-info-desc-font: 32px/42px
    var(--secondary-font-regular);
  --showtime-modal-show-modal-dialog-modal-content-modal-body-movie-info-modal-movie-info-desc-color: var(
    --base-color1
  );

  /* Custom Modal Component Style Variables Start (components/custom-modal/index.scss) */
  --custom-modal-modal-dialog-modal-content-modal-body-description-font-size: 34px;
  --custom-modal-modal-dialog-modal-content-modal-body-title-color: var(
    --base-color1
  );
  --custom-modal-modal-dialog-modal-content-modal-body-description-font-family: var(
    --secondary-font-regular
  );
  --custom-modal-modal-dialog-modal-content-modal-body-description-color: var(
    --base-color1
  );
  --custom-modal-modal-dialog-modal-content-border-radius: 0px;

  /* seatlayout page Style Variables Start (seatlayout/index.scss) */
  --banner-wrap-noAfter-movie-title-border-color: var(--base-color1);
  --banner-wrap-noAfter-movie-desc-border-color: var(--base-color1);
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-border: 1px
    solid var(--color2);
  --seatlayout-container-showtimes-wrap-play-date-wrap-active-play-time-background: var(
    --color2
  );
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-hover-border: 1px
    solid var(--color2);
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-hover-background: var(
    --color2
  );
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-border-radius: 0px;
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-font-family: var(
    --secondary-font-regular
  );
  --seatlayout-container-showtimes-wrap-play-date-wrap-play-time-font-size: 22px;
  --seatlayout-container-movie-type-border-radius: 0px;
  --seat-types-zoomIconDiv-background: var(--color1);

  /*Seats/ Index Style Variables Start (components/seats/index.scss)*/
  --seat-types-li-span-color: var(--base-color1);
  --seat-types-li-span-font-size: 20px;
  --seat-types-li-span-font-family: var(--secondary-font-regular);
  --seat-row-title-font-family: var(--secondary-font-light);
  --seat-row-title-font-size: 22px;

  /* Booking Summary Component Style Variables Start (components/booking-summary/index.scss) */
  --purchaseFooter-border-radius: 0;
  --purchaseFooter-offcanvas-body-border-radius: 0;
  --purchaseFooter-offcanvas-btn-close-font-size: 26px;
  --purchase-footer-back-btn-a-font-size: 28px;
  --purchase-footer-back-btn-a-color: var(--base-color2);
  --purchase-footer-background-color: var(--color1);
  --purchase-footer-purchase-summary-purchase-grand-total-p-background: var(
    --color2
  );
  --purchase-footer-purchase-summary-purchase-grand-total-p-border-radius: 0px;
  --purchase-footer-purchase-next-button-color: var(--base-color2);
  --purchase-footer-purchase-summary-purchase-grand-total-p-span-font-size: 26px;
  --purchase-footer-purchase-next-button-font-size: 36px;

  /* Styles/ Common Style Variables Start (styles/common.scss) */
  --btn-border-radius: 0px;
  --btn-btnPrimary-background: var(--color3);
  --btn-btnPrimary-border-color: var(--color3);
  --btn-btnPrimary-hover-background: var(--color3);
  --btn-btnPrimary-hover-border-color: var(--color3);
  --btn-btnPrimary-color: var(--base-color2);
  --btn-font: 400 50px/56px var(--font-semibold);

  --btn-btnSecondary-background: var(--base-color2);
  --btn-btnSecondary-border-color: var(--color1);
  --btn-btnSecondary-color: var(--color1);

  /* Alert Buttons */
  --alert-btn-color: var(--base-color2);

  /* Common Alert Popup */
  --common-alert-popup-swal2-html-container-font-family: var(
    --secondary-font-regular
  );

  /* Seats/ TicketTypeDrawer Component Style Variables Start (components/seats/ticket-type-drawer/index.scss) */
  --ticket-type-drawer-h3-title-font-size: 50px;
  --ticket-type-drawer-vertical-ticket-type-btn-font-size: 42px;
  --ticket-type-drawer-border-top-left-radius: 0px;
  --ticket-type-drawer-border-top-right-radius: 0px;
  --ticket-type-drawer-ticket-type-btn-border-radius: 0px;
  --ticket-type-drawer-ticket-type-btn-color: var(--color1);
  --ticket-type-drawer-ticket-type-btn-border: 2px solid var(--color1);
  --ticket-type-drawer-drawer-footer-background-color: var(--color5);
  --ticket-type-drawer-close-btn-background-color: var(--color1);
  --ticket-type-drawer-close-btn-border-radius: 0px;

  --ticket-type-drawer-form-check-input-border-color: var(--color2);
  --ticket-type-drawer-form-check-input-border-radius: 0px;

  --booking-summary-heading-color: var(--color1);
  --booking-summary-heading-font-size: 42px;
  --booking-summary-booking-summary-heading-font-size: 42px;
  --booking-summary-each-ticket-div-total-cost-font-size: 36px;
  --booking-summary-each-ticket-div-total-cost-color: var(--color1);
  --booking-summary-each-ticket-div-name-color: var(--base-color1);
  --booking-summary-each-ticket-div-each-qty-color: var(--base-color1);
  --booking-summary-each-ticket-div-price-div-color: var(--base-color1);
  --booking-summary-continue-button-background: var(--color3);
  --booking-summary-continue-button-color: var(--base-color2);
  --booking-summary-continue-button-border-radius: 0px;
  --booking-summary-each-ticket-div-pre-cost-color: var(--base-color1);
  --booking-summary-each-ticket-div-pre-cost-font-size: 28px;
  --booking-summary-separator-background: var(--base-color1);

  /* Close Button */
  --btn-close-background-color: var(--color1);
  --btn-close-border-radius: 0;
  --btn-close-color: var(--base-color2);
  .btn-close {
    --bs-btn-close-bg: url("/assets/images/close-icon.svg");
  }

  /* Review Order Page Style Variables Start (review-order/index.scss) */
  --order-review-container-review-order-div-background: var(--base-color2);
  --order-review-container-review-order-div-color: var(--color1);
  --order-review-container-booking-summary-booking-summary-heading-color: var(
    --color1
  );
  --order-review-container-review-order-div-p-font-size: 52px;
  --order-review-container-booking-summary-booking-summary-heading-font-size: 42px;

  --innerPageHeader-timer-blk-timer-count-color: var(--color3);

  /* Movie Info component Style Variables Start (components/movie-info/index.scss) */
  --banner-wrap-noAfter-movie-title-color: var(--base-color1);
  --banner-wrap-noAfter-movie-desc-span-color: var(--base-color1);
  --banner-wrap-noAfter-movieSupportInfo-color: var(--base-color1);
  --banner-wrap-noAfter-movieSupportInfo-span-font-family: var(
    --secondary-font-regular
  );
  --banner-wrap-noAfter-movieSupportInfo-span-font-size: 24px;
  --banner-wrap-banner-wrap-movie-detail-wrap-movie-detail-movie-desc-span-font: 24px/22px
    var(--secondary-font-regular);
  --banner-wrap-banner-wrap-movie-detail-wrap-movie-detail-movie-desc-border-bottom: 1px
    solid var(--color4);
  --banner-wrap-banner-wrap-movie-detail-wrap-movie-detail-movie-title-border-bottom: 1px
    solid var(--color4);

  --your-details-blk-h3-color: var(--color1);
  --your-details-blk-h3-font: 42px/60px var(--font-bold);

  --consumber-advice-popup-modal-dialog-modal-content-modal-body-title-font-family: var(
    --font-semibold
  );

  --custom-banner-header-a-button-color: var(--base-color2);

  --payment-container-paymentPageMovieInfo-accordion-item-accordion-button-banner-wrap-movieSupportInfo-span-after-background: var(
    --color3
  );
  --payment-container-movie-detail-wrap-movie-detail-movie-title-font: 42px/58px
    var(--font-bold);

  --confirmation-summary-booking-summary-heading-color: var(--color1);
  --confirmation-summary-movie-detail-movie-booking-wrap-booking-id-color: var(
    --color2
  );
  --confirmation-summary-booking-summary-heading-color: var(--color1);
  --confirmation-summary-separator-bg-color: var(--base-color1);
  --confirmation-summary-ticket-summary-home-link-color: var(--color2);
  --confirmation-summary-movie-detail-movie-status-h1-font-size: 48px;
  --confirmation-summary-movie-detail-movie-booking-wrap-booking-id-font-size: 48px;
  --common-alert-popup-border-radius: 0px;
  --confirmation-summary-booking-summary-heading-font-size: 42px;
  --confirmation-summary-movie-detail-movie-status-span-font-size: 54px;
  --confirmation-summary-failure-transaction-fail-background: var(--color5);
  --confirmation-summary-failure-transaction-fail-border-radius: 0px;
  --confirmation-summary-failure-transaction-fail-p-color: var(--color2);
  --confirmation-summary-failure-transaction-fail-p-font-size: 36px;
  --confirmation-summary-failure-transaction-fail-p-font-family: var(
    --secondary-font-regular
  );
  --confirmation-summary-failure-home-wrap-home-link-color: var(--color2);
  --confirmation-summary-failure-home-wrap-home-link-font-size: 16px;

  --content-blk-choose-payment-sec-payment-list-ul-li-p-span-font: 32px/48px
    var(--secondary-font-bold);
  --content-blk-choose-payment-sec-payment-list-ul-li-p-span-color: var(
    --base-color1
  );
  --content-blk-choose-payment-sec-payment-list-ul-li-border: 2px solid
    var(--color4);
  --content-blk-choose-payment-sec-payment-list-ul-li-border-radius: 0px;

  --swipe-card-container-swipe-inner-swipe-card-p-font: 42px/48px
    var(--secondary-font-regular);

  --loginComponent-procced-text-p-font: 30px/50px var(--font-regular);
  --loginComponent-procced-text-p-span-color: var(--color4);
  --loginComponent-procced-text-p-span-font-size: 18px;
  --custom-banner-header-a-button-font: 28px/28px var(--font-bold);
  --booking-flow-step-active-name-color: var(--color1);
  --booking-flow-step-active-name-step-number-color: var(--base-color2);
  --barcode-popup-modal-content-modal-body-content-scan-btn-a-font-size: 48px;
}