:root,
:host,
cbt-modal {
  --cbt-spinner-border-top: var(--fds-primary);
  --cbt-campaign-text-color: var(--fds-on-surface-hi);
  --cbt-campaign-background-color: var(--fds-surface);
  --cbt-campaign-dark-mode-text-color: #fff;
  --cbt-campaign-dark-mode-background-color: #131321;
  --cbt-campaign-alternate-background-color: var(--fds-primary);
  --cbt-campaign-link-color: var(--fds-primary);
  --cbt-campaign-link-secondary-color: #fff;
  --cbt-campaign-link-tertiary-color: var(--fds-primary);
  --cbt-campaign-padding: 16px 16px 0;
  --cbt-terms-and-conditions-padding: 0 16px;
  --cbt-modal-close-button-color: var(--fds-on-surface-hi);
  --cbt-modal-text-color: var(--fds-on-surface-hi);
  --cbt-modal-background-color: var(--fds-surface);
  --cbt-theme-primary-color: var(--fds-primary);
  --cbt-theme-secondary-color: var(--fds-secondary);
  --cbt-theme-tertiary-color: var(--fds-tertiary);
  --cbt-theme-white-color: #fff;
  --cbt-theme-white: var(--cbt-theme-white-color);
  --cbt-theme-black-color: #000;
  --cbt-theme-overlay: rgba(0 0 0 12.1569%);
  --cbt-theme-background-dark-900: #161616;
  --cbt-theme-background-dark-600: #242424;
  --cbt-theme-background-dark-100: #373737;
  --cbt-theme-background-light-900: #d4d4d7;
  --cbt-theme-background-light-300: #f7f7f7;
  --cbt-theme-background-light-100: #f9f9f9;
  --cbt-theme-text-light-high: rgba(255 255 255 / 87.0588%);
  --cbt-theme-text-light-mid: rgba(255 255 255 / 60%);
  --cbt-theme-text-light-low: rgba(255 255 255 / 38.0392%);
  --cbt-theme-text-dark-low: rgba(0 0 0 / 38.0392%);
  --cbt-theme-text-dark-mid: rgba(0 0 0 / 60%);
  --cbt-theme-text-dark-high: rgba(0 0 0 / 87.0588%);
}

:root,
:host,
cbt-modal {
  --cbt-accordion-filled-background: var(--fds-background, #fff);
  --cbt-accordion-filled-header-background-color: var(--fds-primary, #f60);
  --cbt-accordion-filled-header-txt-color: var(--fds-on-primary, #fff);
  --cbt-accordion-header-padding: 0.5em 1em;
  --cbt-accordion-terms-conditions-txt-color: var(--fds-on-background, #000000de);
  --cbt-accordion-txt-color: var(--fds-on-background, #000000de);
  --cbt-accordion-transparent-arrow-color: var(--fds-primary, #f60);
  --cbt-accordion-transparent-border-bottom: 1px solid
    var(--fds-on-surface-ulow, rgba(0, 0, 0, 0.1));
  --cbt-accordion-transparent-box-border-top: 1px solid
    var(--fds-on-surface-ulow, rgba(0, 0, 0, 0.1));
  --cbt-accordion-border-radius: var(--fds-border-radius-container-default, 8px);
  --cbt-accordion-box-shadow: var(
    --fds-elevation-on-surface-02,
    23px 18px 8px 0px #00000000,
    15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d,
    4px 3px 5px 0px #00000017,
    1px 1px 3px 0px #0000001a
  );
  --cbt-accordion-last-item-border-color: var(--cbt-accordion-last-item-border-color-custom);
}

:root,
:host,
cbt-modal {
  --cbt-dynamic-table-color: var(--fds-on-surface-hi);
  --cbt-dynamic-table-transparent-color: currentcolor;
  --cbt-dynamic-table-pagination-color: currentcolor;
  --cbt-entries-label-color: currentcolor;
  --cbt-dynamic-table-th-bottom-border-color: 3px solid var(--fds-primary);
  --cbt-dynamic-table-bottom-border-custom: var(--cbt-table-bottom-border-custom);
  --cbt-dynamic-table-background-color: var(--fds-background);
  --cbt-dynamic-table-top-color: var(--cbt-table-top-color-custom, rgba(255 255 255 / 87.1%));
  --cbt-dynamic-table-top-color-custom: var(--cbt-table-top-color-custom);
  --cbt-dynamic-table-top-transparent-color: currentcolor;
  --cbt-dynamic-table-box-shadow: 0 1px 10px 0 rgba(0 0 0 / 20%), 0 4px 5px 0 rgba(0 0 0 / 12%),
    0 2px 4px 0 rgba(59, 25, 25, 0.14);
  --cbt-dynamic-table-row-color-odd: var(
    --fds-on-alternate-surface-variant1,
    var(--fds-background)
  );
  --cbt-dynamic-table-row-color-even: var(
    --fds-on-alternate-surface-variant2,
    var(--fds-background)
  );
  --cbt-dynamic-table-row-border-bottom: 0.5px solid rgba(0 0 0 / 12%);
  --cbt-dynamic-table-top-background-color: var(--fds-primary);
  --cbt-dynamic-table-top-background-color-custom: var(--cbt-table-top-bg-color-custom);
  --cbt-dynamic-table-pagination-active-color: var(--fds-primary);
  --cbt-dynamic-table-pagination-hover: var(
    --cbt-dynamic-table-pagination-filled-hover,
    rgba(0 0 0 / 12.1%)
  );
  --cbt-dynamic-table-pagination-transparent-color: var(--fds-on-surface-m);
  --cbt-dynamic-table-pagination-border-radius: var(
    --cbt-dynamic-table-pagination-btn-border-radius
  );
  --cbt-dynamic-table-border-color: #00000061;
  --cbt-dynamic-table-border-transparent-color: var(--cbt-entries-border-color, currentcolor);
  --cbt-dynamic-table-border-radius: var(--cbt-dynamic-table-top-border-radius, 8px);
  --cbt-dynamic-table-entries-background-color: var(--cbt-entries-bg-color);
  --cbt-dynamic-table-entries-border-radius: var(--cbt-select-border-radius);
  --cbt-dynamic-table-entries-border-color: var(--cbt-entries-border-color);
  --cbt-dynamic-table-entries-color: var(--cbt-entries-txt-color);
  --cbt-dynamic-table-entries-options-background-color: var(--cbt-entries-bg-color);
  --cbt-dynamic-table-entries-options-background-color-transparent: var(--fds-surface);
  --cbt-dynamic-table-search-bar-radius: var(--fds-border-radius-input-default);
  --cbt-dynamic-table-search-bar-bg-color: var(--cbt-search-bar-bg-color);
  --cbt-dynamic-table-search-bar-color: var(--cbt-search-bar-color);
  --cbt-dynamic-table-pagination-btn-border-radius: var(--cbt-pagination-btn-border-radius);

  --cbt-dynamic-table-dark-row-color-odd: var(--cbt-alternate-surface-variant1);
  --cbt-dynamic-table-dark-row-color-even: var(--cbt-alternate-surface-variant2);

  --cbt-dynamic-table-row-border: var(--cbt-dynamic-table-row-border-color);

  --cbt-dynamic-table-scrollbar-track-color: var(--cbt-scollbar-background);
  --cbt-dynamic-table-scrollbar-thumb-color: var(--cbt-scrollbar-on-background);

  /* font specific styling */

  --cbt-dynamic-table-row-font-weight: var(--cbt-dynamic-table-row-font-weight-custom);
  --cbt-dynamic-table-entries-font-weight: var(--cbt-dynamic-table-entries-font-weight-custom);
}

:root {
  --cbt-footer-font-family: var(--cbt-primary-font-family);
  --cbt-footer-background-color: var(--fds-alternate-surface);
  --cbt-footer-secondary-font-family: var(--cbt-secondary-font-family);
  --cbt-language-switcher-txt: var(--fds-on-alternate-surface-hi);
  --cbt-language-switcher-active-bg: var(--fds-alternate-surface);
  --cbt-language-switcher-active-bg-hover: var(--fds-alternate-surface);
  --cbt-language-switcher-background: var(--fds-alternate-surface-variant);
  --cbt-language-switcher-hover: var(--fds-alternate-surface);
  --cbt-language-switcher-border: rgba(255, 255, 255, 0.15);
}

:root {
  --cbt-header-font-family: var(--cbt-primary-font-family);
  --cbt-nav-container-padding-left: 16px;
  --cbt-nav-container-padding-right: 16px;
  --cbt-navbar-bg-color: var(--fds-header);
  --cbt-navbar-padding: 16px 0;
  --cbt-navbar-terms-color: var(--fds-on-header);
  --cbt-button-border-radius: 18px;
  --cbt-header-logo-max-height: 32px;
  --cbt-header-logo-max-height-mobile: 24px;

  /* Header Button */
  --cbt-header-button-border-radius: var(--fds-border-radius-btn-default);
  --cbt-header-button-secondary-color: var(--fds-btn-accent);
  --cbt-header-button-hover-secondary-color: var(--fds-btn-accent-hover);
  --cbt-header-button-outline-hover-bg-color: var(--fds-btn-on-alternate-surface-hover);
  --cbt-header-button-outline-border: var(--fds-btn-on-header-default);
  --cbt-header-button-outline-color: var(--fds-btn-on-header-default);
}

:root,
:host,
cbt-modal {
  --cbt-masonry-card-background-color: var(--fds-background);
  --cbt-masonry-card-current-day-title-color: var(--fds-primary);
}

:root,
:host,
cbt-modal {
  /* primary */
  --cbt-button-primary-color: var(--fds-btn-default);
  --cbt-button-primary-text-color: var(--fds-on-btn-default);
  --cbt-button-primary-color-hover-filled: var(--fds-btn-default-hover);
  --cbt-button-primary-color-active-filled: var(--fds-btn-default-active);

  /* secondary */
  --cbt-button-secondary-color: var(--fds-btn-accent);
  --cbt-button-secondary-text-color: var(--fds-on-btn-accent);
  --cbt-button-secondary-color-hover-filled: var(--fds-btn-accent-hover);
  --cbt-button-secondary-color-active-filled: var(--fds-btn-accent-active);

  /* transparent */
  --cbt-button-transparent-text-color: var(--fds-btn-on-cta-mobile, var(--fds-on-btn-default));
  --cbt-button-transparent-text-color-desktop: var(--fds-on-surface-hi);
  --cbt-button-transparent-color-hover-filled: var(--fds-btn-on-alternate-surface-hover);
  --cbt-button-transparent-color-active-filled: var(--fds-btn-on-alternate-surface-active);

  /* outlined */
  --cbt-button-outlined-color: var(--cbt-button-outlined-color-custom);
  --cbt-button-outlined-border-color: var(--cbt-button-outlined-border-color-custom);
  --cbt-button-outlined-background-color-hover: var(
    --cbt-button-outlined-background-color-hover-custom
  );

  /* vars */
  --cbt-button-disable-color: var(--cbt-button-disable-colour-custom, var(--fds-on-btn-default));
  --cbt-button-border-radius: var(--fds-border-radius-btn-default, 4px);
}

:root,
:host,
cbt-modal {
  /* Icon */
  --cbt-stepper-icon-font-family: var(--cbt-primary-font-family);
  --cbt-stepper-icon-background-color: var(--fds-primary);
  --cbt-stepper-icon-checkmark-color: var(--fds-primary);
  --cbt-stepper-icon-border-color-small: var(--fds-primary);
  --cbt-stepper-icon-border-color-small-transparent: var(--fds-primary);
  --cbt-stepper-icon-background-color-small: var(--fds-background);

  /* Info */
  --cbt-stepper-info-background-color: var(--fds-primary);
  --cbt-stepper-info-txt-color: var(--fds-on-primary);

  /* Boxed */
  --cbt-stepper-count-font-family: var(--cbt-secondary-font-family);
  --cbt-stepper-text-font-family: var(--cbt-primary-font-family);
  --cbt-stepper-boxed-background-color-outer: var(--fds-alternate-surface);
  --cbt-stepper-boxed-border-color-outer: #ffffff26;
  --cbt-stepper-boxed-transparent-background-color-outer: #000000bf;
  --cbt-stepper-boxed-background-color-inner: #ffffff0d;
  --cbt-stepper-boxed-border-color-inner: #ffffff1a;
  --cbt-stepper-boxed-txt-color: var(--fds-on-alternate-surface-hi);
  --cbt-stepper-boxed-square-color: var(--fds-primary);
}

:root,
:host,
cbt-modal {
  --cbt-notification-primary-background-color: var(--fds-primary);
  --cbt-notification-secondary-background-color: var(--fds-secondary);
  --cbt-notification-tertiary-background-color: var(--fds-tertiary);
  --cbt-notification-transparent-color: currentcolor;
  --cbt-notification-box-shadow: var(
    --fds-elevation-on-surface-02,
    23px 18px 8px 0px #00000000,
    15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d,
    4px 3px 5px 0px #00000017,
    1px 1px 3px 0px #0000001a
  );
}

:root,
:host,
cbt-modal {
  --cbt-card-font-color: var(--fds-on-surface-hi);
  --cbt-card-font-title-color: var(--fds-on-surface-hi);
  --cbt-card-transparent-font-color: currentcolor;
  --cbt-card-transparent-font-title-color: currentcolor;
  --cbt-card-background-color: var(--fds-background);
  --cbt-card-border-radius: var(--fds-border-radius-container-default, 8px);
  --cbt-card-box-shadow: var(
    --fds-elevation-on-surface-02,
    23px 18px 8px 0px #00000000,
    15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d,
    4px 3px 5px 0px #00000017,
    1px 1px 3px 0px #0000001a
  );
  --cbt-card-overlay-background: var(--fds-primary);
  --cbt-card-overlay-color: var(--fds-on-primary);
  --cbt-card-overlay-corner-border-radius: var(--fds-border-radius-container-default);

  --cbt-poker-card-background-color: var(--fds-surface);
  --cbt-poker-card-border-color: var(--fds-on-surface-ulow);
  --cbt-poker-card-description-color: var(--fds-on-surface-hi);
  --cbt-poker-card-title-color: var(--fds-on-surface-hi);
  --cbt-poker-card-subtitle-color: var(--fds-on-surface-hi);
  --cbt-poker-card-daterange-color: var(--fds-on-surface-hi);
}

:root,
:host,
cbt-modal {
  --cbt-countdown-border-radius: var(--fds-border-radius-container-default, 8px);
  --cbt-countdown-txt-color: var(--cbt-campaign-font-color, #fff);
  --cbt-countdown-bg-color: var(--cbt-theme-primary-color);
  --cbt-countdown-count-font-family: var(--cbt-primary-font-family);
  --cbt-countdown-text-font-family: var(--cbt-primary-font-family);
  --cbt-countdown-transparent-txt-color: var(--cbt-countdown-transparent-text-color, currentcolor);
  --cbt-countdown-box-shadow: var(
    --fds-elevation-on-surface-02,
    23px 18px 8px 0px #00000000,
    15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d,
    4px 3px 5px 0px #00000017,
    1px 1px 3px 0px #0000001a
  );

  --cbt-countdown-primary-txt-color: var(--fds-on-primary);
  --cbt-countdown-primary-bg-color: var(--fds-primary);

  --cbt-countdown-secondary-txt-color: var(--fds-on-secondary);
  --cbt-countdown-secondary-bg-color: var(--fds-secondary);

  --cbt-countdown-tertiary-txt-color: var(--fds-on-tertiary);
  --cbt-countdown-tertiary-bg-color: var(--fds-tertiary);

  --cbt-countdown-primary-circle-border-color: var(--cbt-countdown-primary-border-color);
  --cbt-countdown-secondary-circle-border-color: var(--cbt-countdown-secondary-border-color);
  --cbt-countdown-tertiary-circle-border-color: var(--cbt-countdown-tertiary-border-color);
}

:root,
:host,
cbt-modal {
  --cbt-odds-event-name-font-family: var(--cbt-primary-font-family);
  --slider-background: var(--fds-alternate-surface-variant);
  --slider-btn-background: var(--fds-alternate-surface-variant);
  --odds-event-odds-hover-color: var(--fds-primary);
  --odds-event-background: var(--fds-alternate-surface);
  --odds-event-odd-background: var(--fds-alternate-surface-variant);
  --odds-event-vertical-odd-background: var(--fds-background);
  --odds-event-vertical-odd-value: var(--fds-on-surface-hi);
  --cbt-odds-event-box-shadow: 0 2px 4px 0 rgba(0 0 0 / 20%), 0 1px 10px 0 rgba(0 0 0 / 12%),
    0 4px 5px 0 rgba(0 0 0 / 14%);
  --odds-event-title: var(--fds-on-alternate-surface-low);
  --odds-event-text: var(--fds-on-alternate-surface-hi);
  --odds-event-date: var(--fds-secondary);
}

:root,
:host,
cbt-modal {
  --cbt-excluded-games-title-color: var(--fds-primary);
  --cbt-excluded-games-title-font-family: var(--cbt-primary-font-family);
  --cbt-excluded-games-search-color: currentcolor;
  --cbt-excluded-games-search-bar-radius: var(--fds-border-radius-input-default);
}

:root,
:host,
cbt-modal {
  --flip-card-background-color-front: var(--fds-background);
  --flip-card-text-color-front: var(--fds-on-surface-hi);
  --cbt-flip-card-group-title-font-family: var(--cbt-primary-font-family);
}

:root,
:host,
cbt-modal {
  --cbt-carousel-btn-background-color-primary: var(--fds-primary-interaction-low);
  --cbt-carousel-btn-color-primary: var(--fds-primary);
  --cbt-carousel-btn-background-color-secondary: var(--fds-secondary-interaction-low);
  --cbt-carousel-btn-color-secondary: var(--fds-secondary);
  --cbt-carousel-title-color: currentcolor;
  --cbt-carousel-btn-hover-color-primary: var(--fds-on-primary);
  --cbt-carousel-btn-hover-color-secondary: var(--fds-on-secondary);
  --cbt-carousel-card-width: 158px;
  --cbt-carousel-margin-right: -16px;
}

:root,
:host,
cbt-modal {
  --cbt-tab-group-font-family: var(--cbt-primary-font-family);
  --cbt-tab-group-border-color: var(--fds-primary);
  --cbt-tab-group-chips-background-color: var(--fds-surface-accent);
  --cbt-tab-group-chips-selected-txt-color: var(--fds-primary);
  --cbt-tab-group-border-radius: var(--fds-border-radius-btn-alternate);
  --cbt-tab-group-text-color: currentcolor;
}

:root,
:host,
cbt-modal {
  --cbt-info-module-border-radius: var(--fds-border-radius-container-default);
  --cbt-info-module-background-color: var(--fds-surface-accent);
  --cbt-info-module-txt-color: var(--fds-on-surface-hi);
}

:root,
:host,
cbt-modal {
  --cbt-multiple-choice-item-border-color: var(--fds-on-surface-hi);
  --cbt-multiple-choice-item-txt-color: var(--fds-on-surface-hi);
  --cbt-multiple-choice-item-selected-border-color: var(--fds-primary);
  --cbt-multiple-choice-item-primary-color: var(--fds-primary);
}

:root,
:host,
cbt-modal {
  /* Main card */

  --cbt-promotional-calendar-surface: var(--fds-surface-variant);

  --cbt-promotional-calendar-border-color: var(--fds-on-surface-ulow);
  --cbt-promotional-calendar-box-shadow: var(--fds-elevation-on-surface-02);
  --cbt-promotional-calendar-default-border-radius: var(--fds-border-radius-container-default, 8px);
  --cbt-promotional-calendar-image-border-radius: var(--fds-border-radius-container-default, 8px);
  --cbt-promotional-calendar-outer-border-radius: 12px;

  /* Skeleton */
  --cbt-promotional-calendar-skeleton-media-color: var(--fds-on-surface-hi);

  /* Text */

  --cbt-promotional-calendar-item-label-color: var(--fds-on-surface-hi, rgb(0 0 0));
  --cbt-promotional-calendar-date-range-label-color: rgb(255 255 255);
  --cbt-promotional-calendar-cta-caption-color: var(--fds-on-surface-m);
  --cbt-promotional-calendar-cta-content-color: rgb(255 255 255 / 82%);
  --cbt-promotional-calendar-svg-color: var(--fds-on-surface-hi);

  /* Neon */
  --cbt-promotional-calendar-neon-surface: linear-gradient(
    180deg,
    var(--fds-primary) 0%,
    #1d1d21 100%
  );
  --cbt-promotional-calendar-neon-surface-default: var(
    --cbt-promotional-calendar-neon-background-default,
    linear-gradient(to bottom, var(--fds-surface-accent), rgba(46, 47, 60, 0))
  );
  --cbt-promotional-calendar-neon-scroller-background: var(
    --cbt-promotional-calendar-neon-surface-default
  );

  --cbt-promotional-calendar-neon-border-color: var(--fds-primary);
  --cbt-promotional-calendar-neon-border-color-default: var(
    --cbt-promotional-calendar-neon-color-default,
    var(--fds-surface-accent)
  );
  --cbt-promotional-calendar-neon-box-shadow: 0 1px 3px 0 rgb(from var(--fds-primary) r g b / 10%),
    0 3px 5px 0 rgb(from var(--fds-primary) r g b / 16%),
    1px 4px 12px -2px rgb(from var(--fds-primary) r g b / 30%);
  --cbt-promotional-calendar-neon-copy-color: #fff;
  --cbt-promotional-calendar-neon-copy-color-default: var(--fds-on-surface-hi);

  --cbt-promotional-calendar-neon-indicator-color: #00d14b;
  --cbt-promotional-calendar-neon-indicator-ring-color: rgb(0 209 75 / 22%);
  --cbt-promotional-calendar-neon-indicator-glow-color: rgb(0 209 75 / 56%);

  /* Font */
  --cbt-promotional-calendar-label-font: var(--cbt-secondary-font-family);
  --cbt-promotional-calendar-number-font-weight: 700;
  --cbt-promotional-calendar-progress-font-weight: 600;

  @media screen and (width <= 768px) {
    --cbt-promotional-calendar-mobile-peek-overflow: 16px;
  }
}

:root {
  /* General */
  --cbt-campaign-editor-background-color: var(--fds-surface);
  --cbt-campaign-editor-txt-color: var(--fds-on-surface-hi);
  --cbt-campaign-editor-txt-color-low: var(--fds-on-surface-low);

  /* Simple Table */
  --cbt-simple-table-head-background-color: var(--fds-surface);
  --cbt-simple-table-background-color: var(--fds-surface-variant);
  --cbt-simple-table-txt-color: var(--fds-on-surface-hi);
  --cbt-simple-table-border-color: var(--fds-on-surface-ulow);
  --cbt-simple-table-header-weight: 600;
  --cbt-simple-table-first-col-weight: 700;
  --cbt-simple-table-normal-col-weight: 400;

  /* Margin */
  --cbt-campaign-block-spacing: 16px 0;
}


:root,
:host,
cbt-modal {
  font-family: var(--cbt-primary-font-family);
}

body {
  background-color: var(--cbt-campaign-background-color);
}