@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,700&display=swap');

@font-face {
  font-weight: 500;
  font-family: 'Zing Rust Demo Base';
  font-style: normal;
  src: url('assets/theme/fonts/ZingRustDemo-Base.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Apercu Pro Bold';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Bold.woff') format('woff');
  font-display: swap;
}



#rsbingoclient {
  /* Planet Bingo test site gradients */
  --bg-lights: radial-gradient(7.22% 72.67% at 89.38% 27.33%, rgba(249, 32, 32, 0.4) 0%, rgba(249, 32, 32, 0) 100%), radial-gradient(18.96% 175.1% at 37.92% 27.33%, rgba(41, 209, 75, 0.3) 0%, rgba(41, 209, 75, 0) 100%), radial-gradient(8.4% 60.67% at 73.13% 39.33%, rgba(44, 144, 238, 0.5) 0%, rgba(44, 144, 238, 0) 100%), radial-gradient(12.08% 114.58% at 23.75% 42.67%, rgba(224, 48, 230, 0.4) 0%, rgba(224, 48, 230, 0) 100%), linear-gradient(90deg, #1A2927 0%, #1A3E62 100%);
  --bg-lights-dark: radial-gradient(22.92% 91.06% at 43.26% 94.89%, rgba(225, 43, 104, 0.2) 0%, rgba(225, 43, 104, 0) 100%), radial-gradient(14.58% 59.64% at 94.51% 53.45%, rgba(65, 208, 227, 0.29) 0%, rgba(65, 208, 227, 0) 100%), radial-gradient(20.42% 83.53% at 63.47% 50.15%, rgba(100, 73, 233, 0.23) 0%, rgba(100, 73, 233, 0) 100%), radial-gradient(19.99% 79.58% at 24.72% 87.09%, rgba(78, 238, 38, 0.16) 0%, rgba(78, 238, 38, 0) 100%), linear-gradient(180deg, #4F4F4F 0%, #0A0A0A 100%);
  --bg-glass: rgba(255, 255, 255, 0.2);
  --bg-glass-thick: rgba(255, 255, 255, 0.9);

  /* general color variables */
  --theme-color-1: #222222; /* Dark blue */
  --theme-color-2: rgba(255, 255, 255, 0.2); /* #b8d8eb; light-blue */
  --theme-color-3: #c59; /* Purple */
  --theme-color-4: #6fa088; /* Green */
  --theme-color-5: #ee7622; /* Orange */
  --color-white: #fff;
  --color-gold: #ffdc92;
  --color-light-blue: #81b7c8;
  --color-lighter-blue: #e5f6fe;
  --color-dark-blue: #032a3d;

  --color-primary-click: #66F1C3;

  /* font variables */
  --root-font-family: 'DM Sans', helvetica, arial, sans-serif;
  --root-font-family-secondary: 'DM Sans', helvetica, arial, sans-serif;
  --root-font-size: 16px;
  --root-font-weight: 400;
  --light-text-color: var(--color-white);
  --dark-text-color: var(--theme-color-1);

  /* top bar */
  --top-bar-height: 0px;

  /* button variables */
  --button-border-radius: 5px;

  /* CTA pink button */
  --primary-button-background-color: var(--color-primary-click);
/* radial-gradient(21.8% 77.33% at 78.2% 50%, rgba(154, 216, 244, 0.7) 0%, rgba(154, 216, 244, 0) 100%), radial-gradient(33.83% 69.96% at 16.54% 50%, rgba(85, 238, 141, 0.8) 0%, rgba(85, 238, 141, 0) 100%), linear-gradient(180deg, #63FFCE 0%, #6BD3B3 100%); */
  --primary-button-text-color: var(--dark-text-color);
/* We also want a 2px border on primary button: border: 2px solid rgba(255, 255, 255, 0.4); */

  /* lightblue button */
  --secondary-button-background-color: var(--theme-color-2);
  --secondary-button-text-color: var(--theme-color-1);

  /* darkblue button */
  --tertiary-button-background-color: var(--theme-color-1);
  --tertiary-button-text-color: var(--color-white);

  /* color of bingoballs + lottery ticket colors */
  --column-1-bingo-color-75-total: var(--theme-color-3);
  --column-2-bingo-color-75-total: var(--color-light-blue);
  --column-3-bingo-color-75-total: var(--theme-color-1);
  --column-4-bingo-color-75-total: var(--theme-color-5);
  --column-5-bingo-color-75-total: var(--theme-color-4);

  /* mobile menu */
  --menu-background-color: var(--color-lighter-blue);

  /* settings component variables */
  --lot-highlight-color-1: #7cb7d0;
  --lot-highlight-color-2: var(--theme-color-3);
  --lot-highlight-color-3: var(--theme-color-4);
  --lot-highlight-color-4: var(--theme-color-5);
  --settings-selected-color: var(--theme-color-1);
  --toggle-bg-color: #c9e8f4;
  --toggle-handle-color: var(--color-light-blue);
  --toggle-handle-color-active: var(--color-dark-blue);

  /* list available prizes component variables */
  --bingo-icon-unselected: #cecece;
  --bingo-icon-selected: var(--theme-color-1);
  --bingo-icon-unselected-dark: #06566f;
  --bingo-icon-selected-dark: var(--color-white);
  --bingo-light-background: var(--color-white);
  --bingo-dark-background: var(--color-dark-blue);
  --bingo-icon-unselected-gold: #e4bf72;

  /* menu */
  --layout-icon-background-color: var(--toggle-bg-color);
  --selected-layout-icon-background-color: var(--bingo-icon-unselected-dark);
  --menu-icon-white: var(--color-white);
  --menu-icon-blue: var(--theme-color-1);

  /* leaderboard component variables */
  --leaderboard-background: var(--theme-color-1);
  --leaderboard-background-current-user: var(--toggle-handle-color-active);
  --leaderboard-bingo-ball-border: var(--color-white);
  --leaderboard-yellow-bingo-ball-icon: #f8df8d;
  --leaderboard-green-bingo-ball-icon: var(--theme-color-4);

  /* Buttons for buying lottery tickets */
  --background-color-predefined-values-button: var(--theme-color-1);
  --text-color-predefined-values-button: var(--color-white);
  --background-color-plus-and-minus-buttons: var(--color-white);
  --text-color-plus-and-minus-buttons: var(--theme-color-1);
  --background-color-display-box: var(--color-lighter-blue);
  --text-color-display-box: var(--theme-color-1);

  /* Chat */
  --chat-background-color: var(--bg-glass-thick);
  --chat-background-blue: #68a1b9;
  --chat-text-color: #06566f;
  --chat-notice-background-color: #06566f;
  --chat-notice-text-color: var(--color-white);
  --chat-tab-highlight-color: #7cb7d0;

  /* Scrollbars */
  --scroll-bar-thumb-color: var(--color-dark-blue);
  --scroll-bar-track-color: rgba(255, 255, 255, 0.5);

  /* Spinner */
  --spinner-background-color: var(--color-dark-blue);
  --spinner-color: rgba(255, 255, 255, 0.5);

  /* Modal */
  --modal-background-color: rgba(0, 38, 50, 0.8);
  --modal-text-color: var(--theme-color-1);
  --modal-button-background-color: var(--color-white);
  --modal-button-text-color: #053a53;

  /* Tutorial */
  --tutorial-background-color: rgba(3, 42, 61, 0.6);
  --tutorial-popup-background: var(--color-white);
  --tutorial-dialogue-background: #f8df8d;

  /* Dialogue/pop-up */
  --darkblue-popup-background: var(--theme-color-1);
  --lightblue-popup-background: var(--color-lighter-blue);
  --light-popup-background: var(--color-white);

  /* Bingo card */
  --bingo-card-background-color: var(--color-white);
  --bingo-card-shadow: rgba(3, 42, 61, 0.3);
  --bingo-card-number-text-color: var(--theme-color-1);
  --bingo-card-number-background-color: rgba(238, 237, 235, 0.75);
  --bingo-card-b-background-color: var(--theme-color-3);
  --bingo-card-i-background-color: #7cb7d0;
  --bingo-card-n-background-color: var(--theme-color-1);
  --bingo-card-g-background-color: var(--theme-color-5);
  --bingo-card-o-background-color: var(--theme-color-4);
  --bingo-card-footer-background-color: var(--theme-color-3);
  --bingo-card-footer-text-color: var(--dark-text-color);
  --bingo-card-footer-select-background-color: var(--color-primary-click);
  --bingo-card-footer-purchased-background-color: var(--theme-color-4);

  /* Purchase */
  --reload-button-background-color: var(--theme-color-1);
  --reload-button-color: var(--color-white);
  --bonus-bar-color-bottom: rgba(6, 86, 111, 0.15);
  --bonus-bar-middle: rgba(6, 86, 111, 0.25);
  --bonus-bar-top: rgba(6, 86, 111);
  --bonus-green-bar-confirmation: #9ed8b3;
  --bonus-green-bar-receipt: #6fa088;

  /* History */
  --history-background-color: rgba(0, 38, 50, 0.8);
  --history-bingo-card-header-background-color: var(--color-dark-blue);
  --history-bingo-card-background-color: #cecece;
  --history-bingo-card-number-background-color: #eeedeb;
  --history-bingo-card-number-color: rgba(0, 62, 82, 0.5);
  --history-bingo-card-number-highlighted-color: #06566f;

  /* Bonus before purchase */
  --bonus-bar-background-color: rgba(6, 86, 111, 0.15);
  --bonus-bar-color: #06566f;

  .DesktopView-module__wrapper {
    background: var(--bg-lights);
  }

  .SettingButtons-module__icon,
  .SettingButtons-module__arrow circle,
  .LayoutButtons-module__layoutIcon.LayoutButtons-module__active {
    fill: var(--light-text-color);
  }
  .SettingButtons-module__arrow path  {
    fill: var(--dark-text-color);
  }

  .MessageList-module__wrapper {
    background: none;
  }

  .Chat-module__wrapper {
    backdrop-filter: blur(5px);
  }

  .UserProfileContainer-module__userContainer {
    background-color: var(--bg-glass);
    color: var(--light-text-color);
  }
  .GameWallet-module__wrapper,
  .GameWallet-module__addMoney {
    color: var(--light-text-color);
  }

  .History-module__wrapper.History-module__isChatExpanded:not(.History-module__isVisible) {
    transform: translate3d(100%, 0, 0);
  }

  .DesktopView-module__responsibilityButton {
    display: none;
  }

  @media (min-width: 1181px) {
    .GameInfoBar-module__wrapper {
      background: var(--bg-lights-dark);
    }
  }
}