/*VARS*/
:root {
    --brand-x-light: #FFFFFF;
    --brand-light: #F6FEFE;
    --brand: #DEEDEF;
    --brand-dark: #C6D7D9;
    --brand-x-dark: #92A5A7;
    --neutral-x-dark: #292929;
    --neutral-dark: #333333;
    --neutral: #5F5F5F;
    --neutral-light: #E1DDDD;
    --neutral-x-light: #F8F8F8;

    --accent-1-light: #FFA29C;
    --accent-1: #F2635D;
    --accent-1-dark: #BF4249;
    --accent-2-light: #FFED94;
    --accent-2: #FEE042;
    --accent-2-dark: #FFC20F;

    --success-dark: #168D48;
    --success: #1CB85E;
    --success-light: #60F899;

    --danger-light: #FF837D;
    --danger: #FF422C;
    --danger-dark: #E1240D;

    --info-light: #A0D0F4;
    --info: #2597ea;
    --info-dark: #1B8BDD;

    --warning-light: #F3C576;
    --warning: #F4A720;
    --warning-dark: #D68A05;

    --brand-font-scale: 1;
    --body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    --brand-font-family: 'Passion One';
    --loading-screen-background-color: var(--accent-1);

    --loyalty-page-main-bg: url("https://1796954902.rsc.cdn77.org/GlossyBingo/images/loyalty/main-bg.png");
    --loyalty-page-header-font: normal 2.4rem 'Passion One', Helvetica, Roboto, Arial, sans-serif;
    --loyalty-progress-bar-level-indicator-color: black;
    --loyalty-page-header-text-color: black;
    --loyalty-page-progress-bar-fill: rgba(255, 162, 156, 0.9);
    --loyalty-page-progress-bar-seperator: 1px dashed black;
    --loyalty-label-points-label-color: black;
    --loyalty-tip-text-color: black;
    --loyalty-tip-text-link-color: black;
    --loyalty-explanation-card-font-color: var(--neutral-dark);
    --loyalty-explanation-card-read-more-color: var(--accent-1);
    --loyalty-reward-card-header-height: 220px;
    --learn-more-circle-text-color: black;
    --generic-page-nav-font: normal 2.1rem 'Passion One', Helvetica, Roboto, Arial, sans-serif;
    --bingo-card-font: 400 2.1rem 'Passion One', Helvetica, Roboto, Arial, sans-serif;

    --modal-title: 26px;

    --lobbyRowDefaultBackgroundColor: var(--brand-light);
    --lobbyRowBackgroundColor__bingo: var(--brand);
    --lobbyRowPadding__bingo: 0.5rem;
    --lobbyRowBackgroundColor__casino: var(--brand-light);
    --lobbyRowBackgroundColor__promos: var(--brand);
    --lobbyPreviewPanelBackgroundColor: var(--brand);
    --lobbyCasinoPreviewPanelBackgroundColor: var(--brand-light);
    --lobbyPromosPreviewPanelBackgroundColor: var(--brand);

    --bingo-rooms-panel-background-color: var(--brand);

    /* Buttons */
    --button-radius: 4px;
    --button-font-family: 'Helvetica';
    --button-font-size__small: 1em;

    --loyaltProgressbarFillColor: var(--accent-1);
    --loyaltProgressbarBGColor: var(--accent-1-light);
    --loyaltProgressbarBorderColor: var(--accent-1-dark);

    --rotatingBannerBackgroundColor: var(--brand-x-dark);

    --notification-dropdown-header-title-color: var(--brand-x-dark);

    --leaderboard-text-color: var(--neutral-dark);

    --verification-banner-background-color: var(--info);

    --acceptCookiesBarBackgroundColor: var(--neutral-dark);

    --footer-item-separator-color: var(--brand-x-dark);

    --reg-form-input-field-border-color__default: var(--brand-x-dark);

    --lobby-redirect-from-game-font-color: black;

    --recentlyPlayedGamesBarBg: var(--brand-dark);
    --recentlyPlayedGamesBarBgMobile: var(--brand-x-light);
    --recentlyPlayedGamesBarHeadingBackground__mobile: var(--brand-dark);
    --recentlyPlayedGamesBarFontColor__mobile: var(--neutral);

    --game-page-sidebar-bg: var(--neutral-dark);
    --side-menu-bingo-room: var(--brand);

    --new-player-topbar-bg: var(--neutral-dark);
    --new-player-bg: linear-gradient(to bottom, #3b0305 0%, #000000 75%, #000000 100%);

    --daily-deal-slot-machine-panel-secondary-color: var(--neutral-dark);

    --help-center-page-background-color: var(--brand-light);
    --category-box-shadow: 0px 4px 3px -1px var(--brand-x-dark);
    --category-box-shadow__active: 0px 4px 0px -1px var(--brand-x-dark);
    --category-box-shadow__hover: 0px 4px 6px -1px var(--brand-x-dark);
    --category-card-background__hover: #f2f2f2;
    --category-box-border-radius: 3px;
    --category-box-font-color: black;
    --category-box-icon-color: var(--brand-x-dark);
    --questions-font-color: var(--neutral-dark);
    --question-text-font-color: 'Helvetica';

    --top-bar-lite-title-font-color: black;
    --top-bar-lite-home-icon-color: black;

    --loading-sprite-animation-timing-function: steps(70);
    /* NOTE: loading-sprite-height should be 0 minus the value of the height (needs to be negative) */
    --loading-sprite-height: -11900px;
    --loading-sprite-animation-duration: 2s;
    --loading-sprite-canvas-height: 130px;

    --modalDefaultHeaderBackgroundColor: var(--neutral-x-dark);
    --modalBankingStaticMessageBackgroundColor: var(--modalDefaultHeaderBackgroundColor);

    --loginPageForegroundMaxWidth: 65%;
    --loginPageForegroundImageBottomValue: -5%;

    --themed-games-background: var(--accent-1);
    --choose-your-bonus-bg: var(--brand-x-dark);
}

.bg--bingo-card {
    --bingo-card-size-small: cover;
    --bingo-card-details-background-color: white;
}

.bg--top-bar {
    --balanceDisplayPaneBonusIconColor: #fff;
    --balanceDisplayPaneCashIconColor: #fff;
    --top-bar-icon-button-color: var(--neutral);
    --new-search-label: var(--accent-1);
}

.bg--top-bar-bingo-room {
    --topbar-bingo-background-color: var(--neutral-x-dark);
    --top-bar-lite-title-font-color: white;
    --logo-max-width:80px;
}

.bg--top-bar-inner {
    --brand-font-scale: 1.1rem;
}

.bg--bottom-bar {
    --bottom-bar-font-color: var(--neutral);
    --bottom-bar-nav-font-color: var(--neutral);
    --bottom-bar-nav-font-color__active: var(--neutral);
    --bottom-bar-background-color__active: var(--brand);
}

/* Balance display pane */
.bg--balance-display-pane {
    --balanceDisplayPaneFontFamily: 'Helvetica';
    --balanceDisplayPaneBonusIconColor: white;
    --balanceDisplayPaneCashIconColor: white;
    --balanceDisplayPaneBonusInfoTextColor: var(--brand-x-light);
    --balanceDisplayPaneBonusInfoTextColor__generic: var(--brand-x-light);
    --balanceDisplayPaneItemValueColor__generic: var(--brand-x-light);
    --balanceDisplayPaneItemBackgroundColor: var(--brand-x-light);
    --balanceDisplayPaneBonusIconColor__generic: var(--brand-x-light);
    --balanceDisplayPaneCashIconColor__generic: var(--brand-x-light);
}


.bg--modal__identity {
    --header-color: var(--brand-x-dark);
}

/* landingPage */
.landing-page {
    --landingpage-text-color: var(--accent-1-dark);
    --landingpage-wrap-bg: var(--neutral-x-dark);
}
.promotional-terms {
    --landingpage-terms-bg: var(--neutral-light);
    --landingpage-terms-color: var(--neutral-dark);
}

.loyalty-explanation-card {
    --header-color: var(--neutral-dark);
}

.bg--banking-page {
    --game-client-swift-banking-background-color: #1c1b1b;
    --game-client-swift-banking-image-width: 13%;
}

.bg--modal {
    --loggingInH2Color: var(--neutral-x-dark);
}

.rg-week {
    --rg-week-logo-width: 9rem;
    --rg-week-logo-width__mobile: 6.7rem;
    --rg-week-gradient-background__to-right: linear-gradient(to right, var(--accent-1) 0%, var(--accent-1-dark) 75%, var(--accent-1-dark) 100%);
    --rg-week-gradient-background__to-left: linear-gradient(to left, var(--accent-1) 0%, var(--accent-1-dark) 75%, var(--accent-1-dark) 100%);
    --rg-week-header-background: var(--accent-1);
}

.bg--leaderboards {
    --leaderboard-user-position-bg: var(--accent-1-dark);
    --leaderboard-leaders-bg: var(--accent-1-dark);
}

.bg--search-bar {
    --searchBarBackgroundColor__persistent: var(--accent-1);
}

.bg--display-feed {
    --display-feed-background-color__mobile: var(--brand-x-light);
    --display-feed-background-color: var(--brand-x-light);
    --display-feed-left-border-color: var(--accent-1);
}

.bg--free-spins-shuffle {
    --free-spins-bg: #b73b40;
}

.bg--bingo-info-page {
    --bingo-info-page-font-family: var(--body-font-family);
    --bingo-info-page-info-box-background-color: var(--brand);
    --bingo-info-page-time-info-background-color: var(--brand-dark);
}

/*END VARS*/

/*BUTTONS*/
/* -------------------------------------------------- */
/* --------------------- PRIMARY -------------------- */
/* -------------------------------------------------- */
.bg--button--primary {
    --background: var(--accent-1-dark);
    --color: white;
    --border: 3px solid transparent;
}

.bg--button--primary:hover {
    --background: var(--accent-1);
    --color: white;
    --border: 3px solid transparent;
}

.bg--button--primary__disabled {
    --background: var(--accent-1-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__disabled:hover {
    --background: var(--accent-1-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__hollow {
    --background: transparent;
    --border: 2px solid var(--accent-1-dark);
    --color: var(--accent-1-dark);
}

.bg--button--primary__hollow:hover {
    --background: var(--accent-1-dark);
    --border: 2px solid var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__hollow:active {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__hollow:focus {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__plain {
    --background: transparent;
    --color: var(--neutral-dark);
}

.bg--button--primary__plain:hover {
    --background: var(--accent-1-light);
}

.bg--button--primary__plain:active {
    --background: var(--accent-1-light);
}

.bg--button--primary__plain:focus {
    --background: var(--accent-1-light);
    --button-border: 3px solid var(--accent-1);
}

/* -------------------------------------------------- */
/* --------------------- ACCENT --------------------- */
/* -------------------------------------------------- */

.bg--button--accent {
    --background: var(--accent-2);
    --color: var(--neutral-dark);
    --border: 3px solid transparent;
}

.bg--button--accent:hover {
    --background: var(--accent-2-light);
}

.bg--button--accent:active {
    --background: var(--accent-2-dark);
}

.bg--button--accent:focus {
    --background: var(--accent-2);
    --button-border: 3px solid var(--accent-2-dark);
}

.bg--button--accent__disabled {
    --background: var(--accent-2-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__disabled:hover {
    --background: var(--accent-2-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__hollow {
    --background: transparent;
    --border: 2px solid var(--accent-2);
    --color: var(--neutral-dark);
}

.bg--button--accent__hollow__disabled {
    --color: var(--accent-2-light);
    --border: 2px solid transparent;
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__hollow:hover {
    --background: var(--accent-2);
    --color: var(--neutral-dark);
    --border: 2px solid transparent;
}

.bg--button--accent__hollow:active {
    --color: var(--neutral-dark);
    --border: 2px solid transparent;
}

.bg--button--accent__hollow:focus {
    --background: var(--accent-2);
    --color: var(--neutral-dark);
    --button: 2px solid var(--accent-2-dark);
}

.bg--button--accent__plain {
    --background: transparent;
    --color: var(--neutral-dark);
    --border: 3px solid transparent;
}

.bg--button--accent__plain__disabled {
    --opacity: 0.75;
}

.bg--button--accent__plain:hover {
    --color: var(--neutral-dark);
}

.bg--button--accent__plain:active {
    --color: var(--neutral-dark);
}

.bg--button--accent__plain:focus {
    --background: var(--accent-2-light);
    --button-border: 3px solid var(--accent-2-dark);
    --color: var(--neutral-dark);
}

/*END BUTTONS*/

.bg--new-player-homepage {
    background-color: #F8F6F6;
}

.bg--new-player-homepage .quote h1{
    color: #46474B;
}

.bg--new-player-homepage section.section-1 .top-cta .login {
    border-color: #FEE042;
}

.bg--new-player-homepage section.section-1 .top-bar-fixed .logo {
    max-width: 90px;
}


@media (min-width: 1025px) {
    .bg--new-player-homepage section.section-3 .hero-b {
        animation: none !important;
    }

    .bg--new-player-homepage section.section-3 .hero-a {
        width: 380px;
    }

    .bg--new-player-homepage section.section-5 .content-inner {
        width: 488px;
    }
}

.custom-skin {
    background-position: 0 bottom;
    background-attachment: fixed;
    background-size: contain;
    background-repeat: no-repeat;
}
.custom-skin > div {
    background: transparent !important;
    --lobbyRowBackgroundColor__casino: transparent !important;
    --lobbyRowBackgroundColor__bingo: transparent !important;
    --lobbyRowBackgroundColor__promos: transparent !important;
    --lobbyCasinoPreviewPanelBackgroundColor: transparent !important;
    --lobbyPromosPreviewPanelBackgroundColor: transparent !important;
    --bingo-rooms-panel-background-color: transparent !important;
}

.bg--bingo-card .bingo-room-img {
    margin-bottom: 0;
}
@media only screen and (max-width: 620px) {
    .bg--bingo-card .bingo-room-img {
        margin-bottom: 0
    }
}