:root{
        
--roulette-button-bg: #ffc714;
  --roulette-button-text: #1a3c8d;

  --mobile-main-menu-icon: var(--on-surface);
  --mobile-main-menu-text: var(--on-surface);
  --body-bg: var(--surface-container);
  --header-bg: var(--surface-container);
  --header-border-color: #ced0d2;

  --quick-menu-container-bg: var(--surface);
  --quick-menu-container-border: #ced0d2;
  --quick-menu-item-text: #333333;
  --quick-menu-item-icon: #333333;

  --quick-menu-setting-text: #868686;

  --quick-menu-item-hover-text: var(--primary-container);
  --quick-menu-item-hover-icon: var(--primary-container);

  --contents-bg: var(--surface-container);

  --left-menu-bg: var(--surface-container);
  --left-menu-border: var(--outline);

  --left-menu-item-bg: var(--surface-container-highest);

  --main-card-banner-hover-opacity: 1;

  --odds-button-bg: var(--surface-container-highest);
  --odds-button-border-color: transparent;
  --odds-button-text-color: var(--primary);
  --odds-button-handicap-text-color: var(--on-surface-variant);
  --odds-button-over-icon-color: var(--up);
  --odds-button-under-icon-color: var(--down);

  --odds-button-selected-bg: var(--primary);
  --odds-button-selected-border-color: var(--primary);
  --odds-button-selected-text-color: var(--on-primary);
  --odds-button-selected-handicap-text-color: var(--on-primary);
  --odds-button-selected-over-icon-color: var(--up);
  --odds-button-selected-under-icon-color: var(--down);

  --board-higilight-text-color: var(--primary);

  --mobile-main-menu-bg: var(--surface-container-high);
  --mobile-main-menu-icon: var(--on-surface);
  --mobile-main-menu-text: var(--on-surface);

  --mobile-main-addon-menu-bg: var(--surface-container-high);
  --mobile-main-addon-menu-icon: var(--on-surface);
  --mobile-main-addon-menu-text: var(--on-surface);
  --mobile-main-addon-menu-border: var(--surface-container-highest);

  --footer-bg-color: transparent;
  --footer-logo-box-padding-y: 0;
  --footer-logo-box-padding-x: var(--spacing-gap_small);
  --footer-logo-box-border-width: 0;
  --footer-logo-box-border-color: unset;
  --footer-logo-box-bg: transparent;

  --article-bg-color: transparent;
  --article-title-box-padding: 0;
  --article-title-font-size: 18px;
  --article-title-mobile-font-size: 13px;
  --article-gap: 0;
  --article-border-width: 0;
  --article-border-color: transparent;
  --article-item-bg-color: transparent;

  --image-list-iteam-border-width: 0;
  --image-list-iteam-border-color: unset;

  --size-input-text: 16px;

  --main-card-banner-hover-opacity: 1;

  --global-menu-font-size: 17px;
  --global-menu-align: flex-start;
  --global-menu-gap: 0px;
  --global-menu-indicator-color: var(--primary);

  --global-menu-bg: transparent;
  --global-menu-border-radius: 0px;
  --global-menu-border-width: 0px;
  --global-menu-border-color: transparent;
  --global-menu-text-color: var(--on-surface);

  --global-menu-hover-bg: transparent;
  --global-menu-hover-border-color: transparent;
  --global-menu-hover-text-color: var(--primary);

  --page-title-padding: var(--spacing-gap_medium_small);
  --page-title-bg: var(--surface-container-high);
  --page-title-border: var(--outline);
  --page-title-text-color: var(--on-surface);

  --spacing-x0: 0;
  --spacing-x1: 1px;
  --spacing-standard: 5px;
  --spacing-x50: calc(var(--spacing-standard) * 1);
  --spacing-x100: calc(var(--spacing-standard) * 2);
  --spacing-x150: calc(var(--spacing-standard) * 3);
  --spacing-x200: calc(var(--spacing-standard) * 4);
  --spacing-x250: calc(var(--spacing-standard) * 5);
  --spacing-x300: calc(var(--spacing-standard) * 6);
  --spacing-x400: calc(var(--spacing-standard) * 8);
  --spacing-x500: calc(var(--spacing-standard) * 10);

  --spacing-gap_xlarge: var(--spacing-x400);
  --spacing-gap_large: var(--spacing-x250);
  --spacing-gap_medium: var(--spacing-x200);
  --spacing-gap_medium_small: var(--spacing-x150);
  --spacing-gap_small: var(--spacing-x100);
  --spacing-gap_tiny: var(--spacing-x50);
  --spacing-gap_1: var(--spacing-x1);

  --corner-default: var(--spacing-x50);
  --corner-large: var(--spacing-x300);
  --corner-small: var(--spacing-x100);
  --corner-tab_item: var(--spacing-x500);
  --corner-tab_group: var(--spacing-x500);
  --corner-textfield: var(--spacing-x500);
  --corner-pick_item: var(--spacing-x500);
  --corner-button-medium: var(--spacing-x100);
  --corner-button-small: var(--spacing-x50);
  --corner-button-large: var(--spacing-x200);

  --height-12pt-x100: calc(12px + var(--spacing-x100) * 2);
  --height-14pt-x100: calc(14px + var(--spacing-x100) * 2);
  --height-14pt-x150: calc(14px + var(--spacing-x150) * 2);
  --height-14pt-x200: calc(14px + var(--spacing-x200) * 2);
  --height-18pt-x100: calc(18px + var(--spacing-x100) * 2);
  --height-18pt-x200: calc(18px + var(--spacing-x200) * 2);
  --height-18pt-x300: calc(18px + var(--spacing-x300) * 2);
        
      }
:root[color-theme="light"] {
         --surface-dim: #f1f1f1;
  --surface: #f5f7f7;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;

  --on-surface: #000;
  --on-surface-variant: #777;
  --on-surface-container: #6f6f6f;

  --surface-container-lowest: #ffffff;
  --surface-container-low: #ffffff;
  --surface-container: #fdfdfe;
  --surface-container-high: #f4f6fa;
  --surface-container-highest: #e3e5e8;

  --outline: #e3e5e8;
  --outline-variant: #27272b;

  --inverse: #ffffff;
  --on-inverse: #0a1623;

  --inverse-container: #ffffff;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;

  --primary: #126e51;
  --on-primary: #ffffff;
  --primary-container: #126e51;
  --on-primary-container: #ffffff;
  --primary-30per: #0eda904c;

  --secondary: #ff4c00;
  --on-secondary: #000000;
  --secondary-container: #f5d20c;
  --on-secondary-container: #000000;
  --secondary-30per: #f5d20c4c;

  --tertiary: #00c85e;
  --on-tertiary: #000;
  --tertiary-container: #ff9c00;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ff9c004c;

  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;

  --up: #82df1f;
  --down: #ff504d;

  --bg_blur: #1c293899;
  --bg_disable: #000000b2;
  --white: #ffffff;
  --white_80p: #ffffffcc;

  --minigame-blue: #00a2ff;
  --minigame-red: #e84c4c;
  --minigame-green: #559f44;
  --minigame-yellow: #e8b34c;
  --minigame-black: #000000;
          
      }
:root[color-theme="dark"] {
         --surface-dim: #f1f1f1;
  --surface: #f5f7f7;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;

  --on-surface: #000;
  --on-surface-variant: #777;
  --on-surface-container: #6f6f6f;

  --surface-container-lowest: #ffffff;
  --surface-container-low: #ffffff;
  --surface-container: #fdfdfe;
  --surface-container-high: #f4f6fa;
  --surface-container-highest: #e3e5e8;

  --outline: #e3e5e8;
  --outline-variant: #27272b;

  --inverse: #ffffff;
  --on-inverse: #0a1623;

  --inverse-container: #ffffff;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;

  --primary: #126e51;
  --on-primary: #ffffff;
  --primary-container: #126e51;
  --on-primary-container: #ffffff;
  --primary-30per: #0eda904c;

  --secondary: #ff4c00;
  --on-secondary: #000000;
  --secondary-container: #f5d20c;
  --on-secondary-container: #000000;
  --secondary-30per: #f5d20c4c;

  --tertiary: #00c85e;
  --on-tertiary: #000;
  --tertiary-container: #ff9c00;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ff9c004c;

  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;

  --up: #82df1f;
  --down: #ff504d;

  --bg_blur: #1c293899;
  --bg_disable: #000000b2;
  --white: #ffffff;
  --white_80p: #ffffffcc;

  --minigame-blue: #00a2ff;
  --minigame-red: #e84c4c;
  --minigame-green: #559f44;
  --minigame-yellow: #e8b34c;
  --minigame-black: #000000;
      }