/* -----------------------------------
     AUTOMATION FOR zcustomalmon.css
   
   Use the below variables defined to 
   style components of site
   -----------------------------------
*/

:root {
    --font-family-main: Helvetica, Arial, sans-serif;
    --font-family-navbars: "Staatliches", Arial, sans-serif;
    --font-family-headings: "Staatliches", Arial, sans-serif;

    --to-top-link-background-color: var(--btn-main-background);
    --to-top-link-color: var(--btn-main-color);
    --to-top-link-border-radius: 50%;
    --to-top-link-box-shadow: 0 1px 6px rgba(0,0,0,.1), 0 2px 24px rgba(0,0,0,.2);


    --background-color-body: #fff;
    --body-background-image: none;
    --body-background-position: top center;
    --body-background-repeat: no-repeat;
    --body-background-size: cover;

    --background-danger: #f2dede;
    --background-success: #dff0d8;

    --primary-text-color: #444;
    --secondary-text-color: #444;
    --required-text-color: #ff0000;
    --green-link-color: #141412;

    --scrollbar-track-color: #000;
    --scrollbar-color: #777;

    --alert-success-background-color: var(--background-success);
    --alert-success-border-color: var(--background-success);
    --alert-success-text-color: #3c763d;

    --alert-danger-background-color: var(--background-danger);
    --alert-danger-border-color: var(--background-danger);
    --alert-danger-text-color: #a94442;

    /* badge implies the number against text on certain pages, say eg: on Party page step 2, Package Includes section */
    --badge-background: var(--incrementor-button);
    --badge-content-color: #fff;

    /*  
        header and navbar
       ------------------- 
    */
    --header-background-color: #fff;
    --header-background-image: none ;
    --header-background-position: center center;
    --header-background-repeat: no-repeat;
    --header-background-size: cover;
    --header-box-shadow: none;
    --header-height: 98.34px;
    --header-height-mobile: 105px;

    /* header image logo */
    --header-image-width: 100%;
    --header-image-height: 36.69px;

    /* navbar menu li anchors */
    --header-font-size: 24px;
    --header-font-weight: 400;
    --header-line-height: 14px;
    --header-text-color: #141412;
    --header-text-onHover-color: #9a1b28;
    --header-text-transform: capitalize;

    --header-link-dropdown-background-color: #fff;
    --header-link-dropdown-color: var(--header-text-color);
    --header-link-dropdown-hover-background-color: transparent;

    --header-language-dropdown-color: var(--header-text-color);
    --header-language-dropdown-font-size: 23px;
    --header-language-dropdown-menu-background-color: #fff;

    --header-dropdown-menu-carrot-top: 6px solid #fff;
    --header-dropdown-menu-border-top: 2px solid #fff;

    /* cart */
    --header-cart-color: #141412;
    --header-cart-itemCount-background-color: #9a1b28;
    --header-cart-itemCount-hover-background-color: #9a1b28;
    --header-cart-count-color: #fff;

    /* dropdown menu mobile */
    --header-burger-btn-color: #141412;
    --header-burger-btn-onHover-color: #141412;
    --header-dropdown-menu-position-top: -11px;
    --header-dropdown-menu-item-background-color: #9a1b28;
    --header-dropdown-menu-item-border: 1px solid #9a1b28;
    --header-dropdown-menu-font-size: 16px;
    --header-dropdown-menu-font-color: #fff;
    --header-dropdown-menu-font-weight: var(--header-font-weight);

    /* 
        body and content 
       -------------------
    */

    --pageContent-gap-from-header: 65px;

    /* page heading */
    --page-header-color: #141412;
    --page-header-text-transform: capitalize;
    --page-header-font-size: 46px;
    --page-header-font-weight: 700;
    --page-header-font-family: var(--font-family-headings);

    --page-header-hover-color: #141412;

    /* location select page */
    --location-title-background: #ffffff00;
    --location-title-color: #444;
    --location-title-weight: bold;
    --location-header-font-size: 24px;
    --location-line-divider-border: 1px solid #141412;

    --party-location-border-radius: var(--content-card-border-radius);
    --party-location-border: var(--content-card-border);
    --party-location-box-shadow:  var(--content-card-box-shadow);
    --party-location-background-color: var(--content-card-background-color);
    
    --party-location-location-color: var(--product-productName-color);
    --party-location-location-font-size: var(--product-productName-font-size);
    --party-location-location-font-weight: var(--product-productName-font-weight);

    --party-location-description-color: var(--product-productDescription-color);
    --party-location-description-font-size: var(--product-productDescription-font-size);
    --party-location-description-font-weight: var(--product-productDescription-font-weight);

    /* Date select page */
    --date-container-background-color: #fff;
    --date-container-heading-color: #141412;
    --date-container-color: #444;

    --date-picker-background-color: #9a1b28;
    --date-picker-calender-img-color: invert(1); /* set none for black, invert(1) for white */

    /* Product package card */
    --content-card-background-color: #fff;
    --content-card-box-shadow: 0px 2px 18px 0px rgba(0, 19.000000000000025, 51, 0.17);
    --content-card-border: none;
    --content-card-border-radius: 0px;

    --product-productName-color: #141412;
    --product-productName-font-size: 24px;
    --product-productName-font-weight: 600;
    --product-productName-font-family: var(--font-family-headings);
    --product-productName-border-radius: var(--content-card-border-radius);

    --secondary-dark-background: transparent;

    --product-productDescription-color: #444;
    --product-productDescription-font-weight: 400;
    --product-productDescription-font-size: 16px;
    --product-productDescription-font-family: var(--font-family-main);

    --product-ReadMore-background-color: #fff;
    --product-ReadMore-color: #9a1b28;
    --product-ReadMore-plusIcon-color: #9a1b28;
    --product-ReadMore-font-size: 16px;
    --product-ReadMore-border: 1px solid #9a1b28;
    --product-ReadMore-border-radius: 0px;
    --product-ReadMore-font-weight: 500;

    --product-pricing-color: var(--product-productDescription-color);
    --product-pricing-font-size: var(--product-productDescription-font-size);
    --product-pricing-font-weight: var(--product-productDescription-font-weight);

    --incrementor-border: 1px solid #9a1b28;
    --incrementor-button: #9a1b28;

    --product-totalPricing-color: var(--product-productDescription-color);
    --product-totalPricing-font-size: var(--product-productDescription-font-size);
    
    /* Contact Party page */
    --contact-party-container-margin-top: 60px;
    --contact-party-container-background-color: #9a1b28;
    --contact-party-container-padding: 15px;
    --contact-party-container-border-radius: 0px;
    --contact-party-container-text-color: #fff;

    /* Party Page */
    --party-screen1-subheading-background: #9a1b28;
    --party-screen1-text-color: #fff;
    --breadcrumb-color: #141412;

    --party-pills-active-background-color: #9a1b28;
    --party-pills-active-title-color: #fff;
    --party-pills-active-description-color: var(--party-pills-active-title-color);

    --party-pills-border-bottom: none;
    --party-pills-background-color: #000;
    --party-pills-title-color: var(--party-pills-active-title-color);
    --party-pills-description-color: var(--party-pills-title-color);

	--party-pills-active-hover-background-color: #9a1b28;
	--party-pills-hover-background-color: var(--party-pills-active-hover-background-color);

    --party-package-heading-color: #141412;
    --party-package-heading-text-transform: uppercase;
    --party-package-content-color: #444;

    --party-package-webDesc-background-color: #9a1b2830;
    --party-package-webDesc-border-radius: 10px 10px 0 0;
    --party-package-webDesc-btn-border-radius: 0 0 10px 10px;
    --party-package-webDesc-divider: 2px solid transparent;

    /* Should you require to add a background to the party steps, 
    if site has a dark background and visibility is affected, style the below */
    --party-steps-container-background-color: transparent;
    --party-steps-container-padding: 0px;
    --party-steps-container-border-radius: 0px;

    --party-schedule-section-background-color: #fff;
    --party-schedule-section-border: 1px solid #ddd;
    --party-schedule-slot-btn-border: 1px solid #000;
    --party-schedule-slot-btn-border-radius: 5px;
    --party-schedule-scheduleName-font-size: 14px;
    --party-schedule-scheduleName-font-weight: bolder;
    --party-schedule-scheduleName-font-color: #9a1b28;
    --party-schedule-scheduleBody-font-color: #141412;

    --party-schedule-slot-btn-onChecked-background: #9a1b28;
    --party-schedule-slot-btn-onChecked-color: #fff;

    --party-addons-title-background: #000;
    --party-addons-title-color: #fff;
    --party-addons-title-border-color: #000;
    --party-addons-title-font-size: 18px;

    --party-summary-panel-heading-color: #fff;
    --party-summary-panel-heading-background-color: #000;
    --party-summary-panel-heading-border-color: #000;
    --party-summary-panel-content-color: #444;
    --party-summary-panel-content-background-color: #fff;

    /* contact party side option */
    --party-support-spec-border-radius: 0 50% 50% 0;
    --party-support-spec-background-color: #ffffff;
    --party-support-spec-color: #9a1b28;
    --party-support-spec-box-shadow: 2px 2px 3px #999;

    /* party-timer */
    --party-timer-font-size: 20px;
    --party-timer-color: #fff;
    --party-timer-border: none;
    --party-timer-border-radius: 20px;
    --party-timer-background: #9a1b28;

    /* combo product slot selection */
    --comboSlot-navtab-inActive-background-color: #ddd;
    --comboSlot-navtab-background-color: #fff;
    --comboSlot-navtab-border: 1px solid #fff;
    --comboSlot-title-area-background-color: var(--comboSlot-navtab-background-color);
    --comboSlot-title-area-border-bottom: 1px solid #444;

    --comboSlot-table-header-background-color: #fafafa;
    --comboSlot-table-header-border-bottom: 1px solid #e3e6e6;
    --comboSlot-table-body-background-color: #ffffff;
    --comboSlot-table-body-border: 1px solid #e3e6e6;

    --comboSlot-footer-background: #9a1b2830;

	/* cart */
	--cart-summary-products-background: #fff;
    --cart-summary-products-border-top: none;
    --cart-summary-text-color: #141412;
    --cart-summary-top-position: 85px;

    --secondary-background: #000;
    --cart-summary-Summary-text-color: #fff;
    --cart-summary-Summary-font-size: 22px;
    --cart-summary-Summary-font-weight: 700;

    /* checkout page */
    --checkout-accordion-background-color: #fff;
    --checkout-accordion-title-color: #9a1b28;
    --checkout-accordion-arrow-color: var(--checkout-accordion-title-color);
    --checkout-accordion-backText-color: var(--checkout-accordion-title-color);
    --checkout-accordion-title-font-weight: 600;

    --checkout-accordion-dropdown-background-color: var(--checkout-accordion-background-color);
    --checkout-accordion-dropdown-table-head-background-color: #9a1b2830;
    --checkout-accordion-dropdown-table-head-font-weight: bold;
    --checkout-accordion-dropdown-table-body-background-color: #fff;
    --checkout-accordion-dropdrown-table-body-color: #444;
    --checkout-accordion-dropdown-table-body-font-weight: 400;
    --checkout-accordion-dropdown-table-body-paySummary-color: var(--checkout-accordion-dropdrown-table-body-color);
    --checkout-accordion-dropdown-table-body-paySummaryGrand-color: #9a1b28;

    /* login page */
    --login-modal-box-shadow: 0px 2px 18px 0px rgba(0, 19.000000000000025, 51, 0.17);
    --login-modal-border-radius: 0px;
    --login-modal-border: none;
    --login-modal-background-color: #fff;
    --login-modal-color: #141412;

    --login-modal-active-tab-border: solid 5px #9a1b28;

    --login-page-headers-font-size: 14px;
    --login-page-headers-font-color: #141412;
    --login-page-headers-active-background-color: var(--login-modal-background-color);

    --login-page-TandC-checkbox-color: #337ab7;
    --login-page-TandC-checkbox-font-size: 22px;
    --login-page-TandC-text-color: #337ab7;

    --login-page-TandC-modal-background-color: #f6f6f6;
    --login-page-TandC-modal-border: 1px solid rgba(0,0,0,.2);


    /* my account page */
    --my-account-sidebar-color: #506e80;
    --my-account-sidebar-font-weight: 400;
    --my-account-sidebar-font-size: 14px;
    --my-account-sidebar-background: #f0f6fa;
    --my-account-sidebar-border-left: solid 2px #c4d5df;
    --my-account-sidebar-border-bottom: solid 2px #c4d5df;

    --my-account-sidebar-active-color: #9a1b28;
    --my-account-sidebar-active-background: #ecf5fb;
    --my-account-sidebar-active-border-left: solid 2px #9a1b28;
    --my-account-sidebar-active-border-bottom: solid 2px #9a1b28;

    --my-account-sidebar-content-background-color: #fff;
    --my-account-sidebar-content-border: 1px solid #ddd;

    --my-orders-box-shadow: 0px 2px 18px 0px rgba(0, 19.000000000000025, 51, 0.17);
    --my-orders-border-radius: 0px;
    --my-orders-border: none;
    --my-orders-background-color: #fff;
    --my-orders-text-color: #141412;

    --guest-login-orders-table-border: 1px solid #dddddd;
    --guest-login-orders-odd-row-background: #f9f9f9;

    /* recharge page */
    --recharge-page-background: #fff;

    /*
       B2B Page extras
      -----------------
    */
    --card-balance-color: #141412;

    --pagination-background-color: #fff;
    --pagination-border-color: #9a1b28;
    --pagination-left-right-arrow-color: #9a1b28;
    --pagination-inner-arrow-color: #9a1b28;
    --pagination-active-background-color: #9a1b28;
    --pagination-active-border-color: #9a1b28;
    --pagination-active-color: #fff;

    /*
        BUTTONS
      ----------
    */

    --btn-main-color: #fff;
    --btn-main-background: #9a1b28;
    --btn-main-border: 2px solid #9a1b28;
    --btn-main-border-radius: 0px;
    --btn-main-padding: 6px 12px;
    --btn-main-font-size: 16px;
    --btn-main-font-weight: 400;
    --btn-main-text-transform: uppercase;
    --btn-main-font-family: "Staatliches", sans-serif;

    --btn-main-hover-color: #9a1b28;
    --btn-main-hover-background: #fff;

    /* Buttons on the location select page */
    --btn-danger-color: var(--btn-main-color);
    --btn-danger-background: var(--btn-main-background);
    --btn-danger-border: var(--btn-main-border);
    --btn-danger-text-transform: var(--btn-main-text-transform);
    --btn-danger-font-family: var(--btn-main-font-family);

    /* Buttons on the Select Party page */
    --btn-default-color: var(--btn-main-color);
    --btn-default-background: var(--btn-main-background);
    --btn-default-border: var(--btn-main-border);
    --btn-default-padding: var(--btn-main-padding);
    --btn-default-font-size: var(--btn-main-font-size);
    --btn-default-font-weight: var(--btn-main-font-weight);
    --btn-default-border-radius: var(--btn-main-border-radius);
    --btn-default-text-transform: var(--btn-main-text-transform);
    --btn-default-font-family: var(--btn-main-font-family);

    /* Buttons on the cart summary close and other similar close areas */
    --btn-close-background-color: #fff; 
    --btn-close-border: 2px solid #9a1b28;
    --btn-close-color: #9a1b28;
    --btn-close-border-radius: 0px;
    --btn-close-font-size: 14px;
    --btn-close-padding: 0 12px;
    --btn-close-font-family: var(--btn-main-font-family);

    --btn-close-hover-background-color: #9a1b28;
    --btn-close-hover-color: #fff;


    /* Checkout page pay buttons */
    --btn-payment-background-color: #9a1b28;
    --btn-payment-color: #fff;
    --btn-payment-border: 2px solid #9a1b28;
    --btn-payment-border-radius: 0px;
    --btn-payment-padding: 14px 28px;
    --btn-payment-text-transform: capitalize;
    --btn-payment-font-family: var(--btn-main-font-family);

    --btn-payment-hover-background-color: #fff;
    --btn-payment-hover-color: #9a1b28;

    --btn-goback-background-color: var(--btn-payment-background-color);
    --btn-goback-color: var(--btn-payment-color);
}

/* ------------- 
    Font Faces 
   -------------
*/

@font-face {
    font-family: 'Staatliches';
    src: url('/app_themes/GameTime/fonts/Staatliches-Regular.ttf');
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('/app_themes/GameTime/fonts/SourceSans3-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'sans-serif';
    src: url('/app_themes/Semnoxdark/fonts/FONTNAME.ttf');
}
@font-face {
    font-family: 'sans-serif';
    src: url('/app_themes/Semnoxdark/fonts/FONTNAME.ttf');
}
@font-face {
    font-family: 'sans-serif';
    src: url('/app_themes/Semnoxdark/fonts/FONTNAME.ttf');
}