@import url('https://use.typekit.net/fwv1fhz.css');

@font-face {
  font-weight: 400;
  /* stylelint-disable-next-line font-family-name-quotes */
  font-family: 'greycliff-cf', sans-serif;
  font-style: normal;
  src: url('https://use.typekit.net/fwv1fhz.css');
  font-display: swap;
}

@font-face {
  font-weight: 600;
  /* stylelint-disable-next-line font-family-name-quotes */
  font-family: 'greycliff-cf', sans-serif;
  font-style: bold;
  src: url('https://use.typekit.net/fwv1fhz.css');
  font-display: swap;
}

@font-face {
  font-weight: 700;
  /* stylelint-disable-next-line font-family-name-quotes */
  font-family: 'greycliff-cf', sans-serif;
  font-style: bold;
  src: url('https://use.typekit.net/fwv1fhz.css');
  font-display: swap;
}

@font-face {
  font-weight: 700;
  /* stylelint-disable-next-line font-family-name-quotes */
  font-family: 'urbane-rounded', sans-serif;
  font-style: normal;
  src: url('https://use.typekit.net/fwv1fhz.css');
  font-display: swap;
}

#rs-singlebingo-client {
  --theme-name: default;

  /* general color variables */
  --theme-color-1: #a35200;
  --theme-color-1-25: #a3520040;
  --theme-color-1-50: #a3520080;
  --theme-color-1-75: #a35200bf;
  --theme-color-2: #ffb703;
  --theme-color-3: #c59;
  --theme-color-4: #6fa088;
  --theme-color-5: #ee7622;
  --theme-color-6: #ffad00;
  --theme-color-7: #fe8000;
  --theme-color-7-15: #fe800026;
  --theme-color-8: #003e52;
  --theme-color-9: #cecece;
  --theme-color-10: #f97f1a;
  --color-white: #fff;
  --color-gold: #ffdc92;
  --color-light-blue: #81b7c8;
  --color-dark-blue: #032a3d;

  /* font variables */
  --root-font-family: 'greycliff-cf', helvetica, arial, sans-serif;
  /* stylelint-disable-next-line value-list-comma-newline-after */
  --root-font-family-secondary: 'urbane-rounded', helvetica, arial, sans-serif;
  --root-font-size: 18px;
  --root-font-weight: 400;
  --light-text-color: var(--color-white);
  --dark-text-color: var(--theme-color-1);

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

  /* button variables */
  --button-border-radius: 28px;
  --button-border-radius-large: 36px;
  --buy-button-border-radius: 20px;
  --buy-button-border-radius-large: 24px;
  --prizeplan-button-border-radius: 16px;
  --button-font-size: 20px;
  --button-line-height: 24px;
  --button-font-size-desktop: 28px;
  --button-line-height-desktop: 32px;

  /* CTA button */
  --primary-button-background-color: var(--theme-color-1);
  --primary-button-text-color: var(--color-white);

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

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

  /* quaternary button */
  --quaternary-button-background-color: var(--theme-color-1-50);
  --quaternary-button-text-color: var(--color-white);

  /* buy button */
  --buy-button-background-color: var(--theme-color-1-25);
  --buy-button-text-color: var(--color-white);
  --active-buy-button-background-color: var(--theme-color-1-75);

  /* game info button */
  --game-info-button-background-color: var(--theme-color-1-50);
  --game-info-active-button-background-color: var(--theme-color-1);

  /* Modals */
  --modals-border-radius: 24px;
  --modals-border-radius-large: 36px;
  --modals-padding: 20px;
  --modal-second-button-style: primary;
  --modal-heading-color: var(--theme-color-1);

  /* top menu */
  --menu-position: left;
  --top-menu-font-family: var(--root-font-family-secondary);
  --top-menu-bg-gradient: linear-gradient(
    180deg,
    rgb(255 183 0 / 15%) 0%,
    rgb(255 183 0 / 80%) 100%
  );
  --top-menu-shadow: linear-gradient(
    180deg,
    rgb(163 82 0 / 75%) 0%,
    rgb(163 82 0 / 35%) 34%,
    rgb(163 82 0 / 0%) 76%,
    rgb(163 82 0 / 0%) 100%
  );
  --top-menu-close-button-gradient: linear-gradient(
    179deg,
    #ffe05c 0%,
    #ffb300 57%,
    #ff820b 100%
  );
  --top-menu-buttons-background: linear-gradient(
    0deg,
    #ff820b 0%,
    #ffb300 38%,
    #ffe05c 100%
  );
  --top-menu-buttons-box-shadow: 0 2px 4px rgb(176 72 0 / 50%);
  --top-menu-close-button-shadow: 0 4px 6px -4px #b04800;
  --top-menu-primary-icon-width: 16px;
  --top-menu-primary-icon-width-desktop: 20px;
  --top-menu-minimize-icon-width: 14px;
  --top-menu-minimize-icon-width-desktop: 20px;
  --top-menu-home-button-icon-width: 20px;
  --top-menu-home-button-icon-width-desktop: 28px;
  --top-menu-sound-button-icon-width: 17px;
  --top-menu-sound-button-icon-width-desktop: 25px;
  --top-menu-info-icon-width: 6px;
  --top-menu-info-icon-width-desktop: 8px;
  --top-menu-settings-button-icon-width: 18px;
  --top-menu-settings-button-icon-width-desktop: 26px;
  --top-menu-extra-button-icon-width: 12px;
  --top-menu-extra-button-icon-width-desktop: 16px;
  --top-menu-cross-icon-width: 18px;
  --top-menu-cross-icon-width-desktop: 20px;
  --top-menu-demobox-background: var(--theme-color-1);

  /* start view */
  --start-view-overlay-background: linear-gradient(
    180deg,
    rgb(255 183 0 / 15%) 0%,
    rgb(255 183 0 / 80%) 100%
  );

  /* 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-8);
  --column-4-bingo-color-75-total: var(--theme-color-5);
  --column-5-bingo-color-75-total: var(--theme-color-4);

  /* settings component variables */
  --lot-highlight-color-1: #2eadfa;
  --lot-highlight-color-2: #bf18af;
  --lot-highlight-color-3: #6b9421;
  --lot-highlight-color-4: var(--theme-color-10);
  --lot-preview-settings-opacity: 0.5;
  --settings-selected-color: var(--theme-color-8);
  --toggle-bg-color: var(--theme-color-1-25);
  --toggle-bg-color-active: var(--theme-color-1);
  --toggle-handle-color: var(--theme-color-1-50);
  --toggle-handle-color-active: var(--color-white);
  --slider-bg-color: var(--theme-color-1-25);
  --slider-handle-color: var(--theme-color-1);
  --slider-active-handle-color: #ba6c1d;

  /* game info component */
  --game-info-modal-button-color: var(--theme-color-1-25);
  --game-info-modal-active-button-color: var(--theme-color-1);
  --game-info-heading-color: var(--theme-color-1);
  --game-info-bingo-row-background: var(--theme-color-7-15);

  /* list available prizes component variables */
  --prizes-background-color: var(--theme-color-2);
  --prizes-game-active-index: var(--color-white);
  --prizes-game-won-index: var(--color-gold);
  --prizes-header-font-color: var(--dark-text-color);
  --prizes-grid-columns: 80px 24px 36px 1fr;
  --prizes-grid-columns-large: 120px 36px 44px 1fr;
  --game-info-prizes-grid-columns: 30% 28% 17% 25%;
  --summary-grid-columns: 32% 17% 17% 1fr;
  --prize-levels-primary: var(--theme-color-1);
  --prize-levels-secondary: #ffca5a;
  --prize-levels-tertiary: rgb(231 196 160);

  /* Summary */
  --play-again-button-style: secondary;

  /* Scrollbars */
  --scroll-bar-thumb-color: var(--color-dark-blue);
  --scroll-bar-track-color: rgb(255 255 255 / 50%);

  /* Spinner */
  --spinner-background-color: var(--theme-color-1);
  --spinner-color: rgb(255 255 255 / 50%);

  /* Confirm modal */
  /* stylelint-disable */
  --confirm-background-overlay-color: linear-gradient(
    180deg,
    rgba(255, 183, 0, 0.15) 0%,
    rgba(255, 183, 0, 0.8) 100%
  );
  /* stylelint-enable */
  --confirm-heading-font-size: 20px;
  --confirm-heading-font-size-tablet: 28px;
  --checkmark-color: var(--theme-color-1);
  --confirm-modal-border-radius: 24px;
  --confirm-modal-border-radius-large: 36px;
  --confirm-purchase-button-style: primary;
  --bonus-bar-color-bottom: rgb(163 82 0 / 15%);
  --bonus-bar-middle: rgb(163 82 0 / 25%);
  --bonus-bar-top: rgb(163 82 0);
  --bonus-green-bar-confirmation: #8ed8a9;
  --bonus-green-bar-receipt: #6fa088;
  --bonus-dashed-lines-color: var(--theme-color-1);

  /* Root error modal */
  --modal-background-color: rgb(0 38 50 / 80%);
  --modal-text-color: var(--theme-color-8);

  /* Tutorial */
  --tutorial-background-color: rgb(3 42 61 / 60%);
  --tutorial-popup-background: var(--color-white);
  --tutorial-dialogue-background: #f8df8d;

  /* Dialogue/pop-up */
  --darkblue-popup-background: var(--theme-color-8);
  --light-popup-background: var(--color-white);

  /* Bingo balls */
  --bingo-balls-counter-color: var(--theme-color-8);
  --bingo-balls-font-size-mobile: 32px;
  --bingo-balls-font-size-tablet: 50px;
  --bingo-balls-font-size-desktop: 62px;

  /* Bingo card */
  --bingo-card-background-color: var(--color-white);
  --bingo-card-shadow: rgb(3 42 61 / 15%);
  --bingo-card-number-text-color: var(--theme-color-8);
  --bingo-card-number-border-color: var(--theme-color-9);
  --bingo-card-number-background-color: #eeedeb;
  --bingo-card-header-font: var(--root-font-family-secondary);
  --bingo-card-b-background-color: #bf18af;
  --bingo-card-i-background-color: #2eadfa;
  --bingo-card-n-background-color: #002548;
  --bingo-card-g-background-color: var(--theme-color-10);
  --bingo-card-o-background-color: #6b9421;
  --bingo-card-footer-background-color: var(--theme-color-1);
  --bingo-card-footer-text-color: var(--color-white);
  --bingo-card-border-radius: 4px;
  --bingo-card-outer-border-radius: 24px;
  --bingo-card-outer-border-radius-small: 12px;
  --bingo-card-footer-border-radius: 18px;
  --bingo-card-footer-border-radius-small: 8px;
}