:root{
    /* General Font Variables */

    /* 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));

    /* General Color Variables */ 
    --black: #000;
    --white: #fff;
    --cc-color-white: var(--white);
    --cc-color-black: var(--black);

    --cc-color-orange: #FFC107; 

    --cc-color-scrollbar-track: #fafafc;
    --cc-color-scrollbar-thumb: #c7c9d9;
    --surface-channeliser: #FBF2DA;
    --dot-indicator: #c7c9d9;

    /* Alerts */

    --alert-positive-light: #F3FCF8;
    --alert-positive-dark: #06C270;
    --alert-positive-hover: #047745;

    --alert-negative-light: #FEF5F5;
    --alert-negative-dark: #DC2626;
    --alert-negative-hover: #B81E1E;


    /* general color vars end */

    /* Pros Cons block color vars start */
    --cons-block-bg-light: #FEF5F5;
    --pros-block-bg-light: #F3FCF8;
    /* Category */
    --surfaces-category-light: #e3edff;
    --text-category: var(--surfaces-category);
    --text-category-hover: #FFFFFF;
    --stroke-category: var(--surfaces-category);

    /* Gamification */
    --cta-gamification-btn: #3377FF;
    --cta-gamification-primary: hsla(0, 0%, 100%, .1);
    --cta-gamification-secondary: #ffc107;

    /* Casino Review Rating */
    --rating-container: #FFF9E6;
    --rating-verified-icon: #3377FF;
    --rating-icon: #FFC107;

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

   /* Sign Up button color vars with colorful header (v1) start */
    --cc-sign-up-button-bg-color-v1: var(--cta-navigation);
    --cc-sign-up-button-bg-color-hover-v1: var(--cta-navigation-hover);
    --cc-sign-up-button-hover-icon-color-v1: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hover-icon-envelope-v1: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hover-icon-part-v1: var(--cta-navigation);
    /* 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(--cta-secondary-hover);
    --cc-sign-up-button-hover-icon-color-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-envelope-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-part-v2: var(--cc-color-brand);
    --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(--cta-navigation-text);
    --cc-sign-up-button-hover-color: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hide-bg: #fff;
    --cc-sign-up-button-hide-hover-bg: var(--cc-color-brand);
    --cc-sign-up-button-hide-color: #000;
    --cc-sign-up-button-hide-hover-color: #fff;

    --cc-cs-reloader-primary-color: var(--cta-navigation-text);
    --cc-cs-reloader-secondary-color: var(--cta-primary);
    --cc-cs-popup-opener-icon-color: var(--cta-navigation-text);
    --cc-cs-popup-opener-icon-envelope: var(--cta-navigation-text);
    --cc-cs-popup-opener-icon-part: var(--cta-navigation);

    --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;

    .dynamic-select .dynamic-select-header .dynamic-select-header-placeholder,
    .cs-form-input.cs-form-input--search::placeholder,
    .cs-form-input.cs-form-input--search:focus::placeholder,
    .cs-form-control .cs-form-input::placeholder,
    .cs-form-control .cs-form-input:focus::placeholder {
        color: var(--text-secondary,#494745)!important; /* Replace with your desired color */
        opacity: 1!important;    /* Firefox adds a default opacity, so setting this to 1 ensures the color is vibrant */
    }
    /* Customer popup 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%);
    /* Homepage Banner block v2 color vars end */

    /* Avoid Casino block color vars start */
    --color-avoid-casinos-accent: var(--alert-negative-dark);
    --color-avoid-casinos-border: var(--alert-negative-dark);
    /* Avoid Casino block color vars end */

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

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

    /* Slots popup color vars start */
    --cc-slots-popup-promo-bg: rgba(61, 60, 111, 0.05);
    --cc-border-neutral-soft: #CCCCCC;
    --cc-surface-neutral-soft: #F1F1F1;
    --cc-text-primary-soft: #2B2B2BED;

    --admin-error-bg: #DC3545;
    --admin-error-border: #C82333;
    --admin-toggle-on: #2196F3;

    --user-points-tooltip-bg: #333333;
    --user-points-tooltip-bg-strong: #3B3B3B;

    --cc-surface-info-banner-soft: #2269B31A;

    --user-box-border-strong: #D9D9D9;
    --user-box-shadow: #0000001F;
    --user-box-backdrop-bg: #2B2B2B54;
    --user-box-link-color: #343A40;

    --forgot-password-error-bg: #FF24041A;
    --forgot-password-input-shadow: #1018280D;

    --cc-surface-disabled-bg: #D0D5DD4D;
    --modal-error-bg: #F8D7DA;
    
    --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-card-bg: var(--white);
    /* Image text cards block color vars end */

    /* Tab navigation block links color vars start */
    --cc-color-links-top-navigation: var(--text-link);
    /* Tab navigation block links color vars end */

    /* Steps block color vars start */
    --cc-steps-background: linear-gradient(90deg, var(--surfaces-secondary) 0%, var(--surfaces-primary) 100%);
    /* Steps block color vars end */

    
    /* Footer vars start */
    --cc-color-background-footer: var(--surfaces-footer);
    --cc-color-footer-divider: var(--border-stroke);
    /* Footer vars end */

    /* 3d Effect button vars start */
    --cta-3d-primary-hover: color-mix(in srgb, var(--cta-primary) 55%, black);
    --cta-3d-primary-border: color-mix(in srgb, var(--cta-primary) 30%, black);
    /* 3d Effect button vars end */
}

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