/* Variables for purple (PlayUSA) version */

:root {

    --color-text-primary: #0f0e0d;
    --color-text-secondary: #494745;
    --black: #000;
    --white: #fff;

    /* general color vars start */
    --cc-color-brand: #3a3984;
    --cc-color-brand-light: #4f4e90;
    --cc-color-blue: #3377ff;
    --cc-color-blue-darker: #3568d4;
    --cc-color-blue-light: #99bbff;
    --cc-color-blue-deep: #171d34;
    --cc-color-links: #007bff;

    --cc-color-red-deep: #b22435;
    --cc-color-red-light: #ff3b3b;
    --cc-color-green-light: #01bb6b;
    --cc-color-green: #06c270;
    --cc-color-green-medium: #05a660;

    --cc-color-navy: #3d3c6f;

    --cc-color-white: #fff;
    --cc-color-black: #000;
    --cc-color-black-onyx: #383d3b;
    --cc-color-black-chinese: #121212;
    --cc-color-onyx-light: #5b5b5b;
    --cc-color-onyx: #3a3a3c;
    --cc-color-jet: #212529;
    --cc-widgets-link-color: #2d2d2d;
    --cc-color-indigo-gray: #424054;

    --cc-color-metal-saurus: #6b7588;
    --cc-color-cool-gray: #8f90a6;
    --cc-color-gray-medium: #999;
    --cc-color-gray-neutral: #828282;
    --cc-color-gray-dark: #3b3b3b;
    --cc-color-light-periwinkle: #c7c9d9;
    --cc-color-platinum: #dde5e9;
    --cc-color-bright-gray: #ebebf0;

    --cc-color-border: #f7f8fd;
    --cc-color-lite-background: #f7f8fd;

    --cc-color-light-1: #fdfdff;
    --cc-color-light-2: #fafafc;
    --cc-color-light-3: #f2f2f5;
    --cc-color-light-4: #cfcfcf;
    --cc-color-light-5: #ddd;
    --cc-color-light-6: #e5e4ff;
    --cc-color-light-7: #eaf0f3;
    --cc-color-light-8: #d9d9d9;

    --cc-table-row-color: #f8f8ff;
    --cc-table-row-color-hover: #eef;
    --cc-table-color-1: #f3f4f5;
    --cc-table-color-2: #e9fbe5;
    --cc-table-color-3: #e7f5fe;
    --cc-table-color-4: #fcf0ef;
    --cc-table-color-5: #f0f0f0;

    --cc-color-scrollbar-track: #fafafc;
    --cc-color-scrollbar-thumb: #ccc;

    --cc-category-label-background: #e3edff;
    --cc-category-label-color: var(--cc-color-blue);
    --cc-category-label-color-hover: var(--cc-color-blue);

    --cc-archive-read-more-color-hover: var(--cc-color-blue);

    /* general color vars end */

    /* star color vars start */
    --cc-color-rating-back-star: #ccc;
    --cc-color-rating-front-star: #ffcc00;

    --cc-color-star-navy: #3d3c6f;
    --cc-color-star-yellow: #f0c32f;
    --cc-color-star-green: #068c44;
    --cc-color-star-blue: #08068c;
    /* star color vars end */

    /* Header v1 (white) color vars start */
    --cc-header-bg-v1: #fff;
    --cc-logo-aside-color-v1: var(--cc-color-brand);
    --cc-header-toggle-color-v1: #000;
    --cc-header-main-links-color-v1: #000;
    /* Header v1 (white) color vars end */

    /* Header v2 (black) color vars start */
    --cc-header-bg-v2: #121212;
    --cc-logo-aside-color-v2: #fff;
    --cc-header-toggle-color-v2: #fff;
    --cc-header-main-links-color-v2: #fff;
    /* Header v2 (black) color vars end */

    /* Mega nav color vars start */
    --cc-header-bg-mega: var(--cc-color-brand);
    --cc-logo-aside-color-mega: var(--cc-color-brand);
    --cc-header-toggle-color-mega: #fff;
    --cc-header-main-links-color-mega: #000;
    --cc-header-top-links-desktop-color-mega: #fff;
    --cc-meganav-border: #d3d3e6;
    /* Mega nav color vars end */

    /* Sign Up button color vars with colorful header (v1) start */
    --cc-sign-up-button-bg-color-v1: #fff;
    --cc-sign-up-button-bg-color-hover-v1: var(--cc-color-brand-light);
    --cc-sign-up-button-hover-icon-color-v1: #fff;
    --cc-sign-up-button-hover-icon-envelope-v1: #fff;
    --cc-sign-up-button-hover-icon-part-v1: var(--cc-color-brand);
    /* Sign Up button color vars with colorful header (v1) end */

    /* Sign Up button color vars with white header (v2) start */
    --cc-sign-up-button-bg-color-v2: var(--cc-color-brand);
    --cc-sign-up-button-bg-color-hover-v2: var(--cc-color-brand-light);
    --cc-sign-up-button-hover-icon-color-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-envelope-v2: #fff;
    --cc-sign-up-button-hover-icon-part-v2: #fff;
    --cc-sign-up-button-icon-envelope-v2: #fff;
    /* Sign Up button color vars with white header (v2) end */

    /* Customer popup color vars start */
    --cc-sign-up-button-color: var(--cc-color-brand);
    --cc-sign-up-button-hover-color: #fff;
    --cc-sign-up-button-hide-bg: #fff;
    --cc-sign-up-button-hide-hover-bg: var(--cc-color-brand-light);
    --cc-sign-up-button-hide-color: #000;
    --cc-sign-up-button-hide-hover-color: #fff;

    --cc-cs-reloader-primary-color: var(--cc-color-brand);
    --cc-cs-reloader-secondary-color: var(--cc-color-red-deep);
    --cc-cs-popup-opener-icon-color: var(--cc-color-brand);
    --cc-cs-popup-opener-icon-envelope: var(--cc-color-brand);
    --cc-cs-popup-opener-icon-part: var(--cc-color-white);

    --cc-cs-popup-boreder-color: #d0d5dd;
    --cc-cs-popup-error-color: #fda29b;
    --cc-cs-popup-checkbox-active-color: #fff;
    --cc-cs-popup-checkbox-active-bg: #000;
    --cc-cs-popup-send-button-color: #fff;
    --cc-cs-popup-send-button-bg: var(--cc-color-brand);
    /* Customer popup color vars end */

    /* Breacking news block color vars start */
    --cc-breacking-news-bg: #f5f5f8;
    --cc-breacking-news-link-arrow-color: var(--cc-color-brand);
    /* Breacking news block color vars end */

    /* Homepage Banner block v2 color vars start */
    --cc-homepage-banner-v2-gradient: linear-gradient(180deg, var(--cc-color-brand) 0%, rgba(0, 0, 0, 1) 100%);
    --cc-homepage-banner-v2-image-gradient: linear-gradient(180deg, var(--cc-color-brand) 0%, rgba(0, 0, 0, 0.25) 100%);
    --cc-homepage-banner-v2-arrow-icon-color: var(--cc-color-navy);
    /* Homepage Banner block v2 color vars end */

    /* Avoid Casino block color vars start */
    --color-avoid-casinos-accent: #d14747;
    --color-avoid-casinos-border: #e34f4f;
    /* Avoid Casino block color vars end */

    /* Jump links block color vars start */
    --cc-jump-links-default-color: var(--cc-color-metal-saurus);
    /* Jump links block color vars end */

    /* Casino Review color vars start */
    --cc-casino-review-btn-color: var(--cc-color-white);
    --cc-casino-review-btn-bg: var(--cc-color-red-deep);
    --cc-casino-review-btn-hover-color: var(--cc-color-red-deep);
    --cc-casino-review-btn--hover-bg: var(--cc-color-white);
	--cc-casino-review-textbox-bg: var(--cc-color-red-deep);
	--cc-crt-hero-copy-btn-color: var(--cc-color-white);
    --cc-crt-hero-demotext-shadow: rgba(0, 0, 0, 0.25);
    /* Casino Review color vars start */

    /* CTA banner block color vars start */
    --cc-cta-banner-bg: rgba(61, 60, 111, .88);
    /* CTA banner block color vars end */

    /* Slots popup color vars start */
    --cc-slots-popup-promo-bg: rgba(61, 60, 111, 0.05);
    --cc-slots-popup-bg: linear-gradient(to bottom, #ED4055, #B22435);
    --cc-slots-popup-logo-wrap-bg: rgba(61, 60, 111, 0.05);
    --cc-slots-popup-rating-bg: rgba(61, 60, 111, 0.05);
    --cc-slots-popup-btn-bg: #B22435;
    --cc-slots-popup-btn-hover-bg: rgba(178, 36, 53, .95);
    --cc-slots-popup-slots-bg: rgba(0, 0, 0, 0.55);
    /* Slots popup color vars end */

    /* Image text cards block color vars start */
    --cc-itc-bg: var(--cc-color-brand);
    --cc-itc-card-bg: var(--cc-color-white);
    /* Image text cards block color vars end */

    /* Steps block color vars start */
    --cc-steps-background: linear-gradient(90deg, #29285E 0%, #5553C4 100%);
    /* Steps block color vars end */

    /* General Font Variables */
    /* Font-Family */
    --cc-primary-font: "DM Sans", sans-serif;

    /* Font-Weight */
    --cc-font-weight-regular: 500;
    --cc-font-weight-bold: 700;
    --cc-line-height-sm: 1.2;
    --cc-line-height-md: 1.25;
    --cc-line-height-lg: 1.3;
    --cc-line-height-xl: 1.4;
    --cc-line-height-xxl: 1.5;

    /* ------ Font-Size ------ */
    --text-base: 16px; /* Only Update this BASE Font Size*/

    /* Relative base multipliers (targets: 10,12,14,16,18,20,24px) */
    --scale-xxs: 0.625; /* 16 * 0.625 = 10px */
    --scale-xs: 0.75;   /* 16 * 0.75  = 12px */
    --scale-sm: 0.875;  /* 16 * 0.875 = 14px */
    --scale-lg: 1.125;  /* 16 * 1.125 = 18px */
    --scale-xl: 1.25;   /* 16 * 1.25  = 20px */
    --scale-2xl: 1.5;   /* 16 * 1.5   = 24px */
    --scale-4xl: 2.25;  /* 16 * 2.25  = 36px */

    /* Derived font-sizes */
    --text-xxs:  calc(var(--text-base) * var(--scale-xxs));
    --text-xs:  calc(var(--text-base) * var(--scale-xs));
    --text-sm:  calc(var(--text-base) * var(--scale-sm));
    --text-md:  var(--text-base);
    --text-lg:  calc(var(--text-base) * var(--scale-lg));
    --text-xl:  calc(var(--text-base) * var(--scale-xl));
    --text-2xl: calc(var(--text-base) * var(--scale-2xl));
    --text-4xl: calc(var(--text-base) * var(--scale-4xl));

    /* Footer vars start */
    --cc-color-background-footer: var(--cc-color-blue-deep);
    --cc-color-background-footer-bottom: var(--cc-color-black);
    --cc-color-text-footer: var(--cc-color-white);
    --cc-color-footer-divider: var(--cc-color-brand);
    /* Footer vars end */
}

/* Casino Review design V4 color vars start */
.crt-hero--v4 .crt-hero-basic {
	--cc-casino-review-btn-bg: var(--cc-color-white);
	--cc-casino-review-btn-color: var(--cc-color-black);
}
/* Casino Review design V4 color vars end */