/*VARS*/
:root {
    --brand-x-light: #FFF0F3;
    --brand-light: #FFF;
    --brand: #FF6A6A;
    --brand-dark: #FB4343;
    --brand-x-dark: #9F0808;

    --neutral-x-dark: black;
    --neutral-dark: #2C2D33;
    --neutral: #46474B;
    --neutral-light: #DBDCDE;
    --neutral-x-light: #F8F6F6;

    --accent-1-x-light: #C5D7FE;
    --accent-1-light: #97B9FF;
    --accent-1: #7490FC;
    --accent-1-dark: #5078D1;

    --accent-2-light: #FEE4A7;
    --accent-2: #FFB500;

    --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;

    /* Typography */
    --brand-font-scale: 0.85;
    --top-bar-ctas-mobile: 0.75rem;
    --body-font-family: Helvetica, Roboto, Arial, sans-serif;
    --body-text-color: #46474B;
    --brand-font-family: 'Mada';
    --global-font-weight: 400;
    --header-font-weight: 800;
    --body-font-color: var(--neutral-x-dark);
    --header-color: var(--neutral-x-dark);

    --button-radius: 24px;
    --button-large-padding: 0.55em 1em;
    --button-small-padding: 0.42em 0.85em;
    --acceptCookiesButtonBorderColor: white;
    /* Account */
    --account-details-header-font-color: var(--brand);
    --account-details-icon-color: var(--brand);
    --account-details-divider-color: var(--brand-light);
    --account-fullscreen-background: var(--brand-x-light);
    --account-fullscreen-content-background: var(--neutral-x-light);
    --account-fullscreen-content-font-color: var(--neutral-dark);

    --loyaltProgressbarFillColor: var(--brand-dark);
    --loyaltProgressbarBGColor: var(--brand-light);
    --loyaltProgressbarBorderColor: var(--brand-x-dark);

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

    --lobbyCasinoPreviewPanelBackgroundColor: transparent;

    --lobbyRowDefaultBackgroundColor: #F8F6F6;
    --lobbyRowBackgroundColor__bingo: #F8F6F6;
    --lobbyRowPadding__bingo: 0.5rem;
    --lobbyRowBackgroundColor__casino: #fff;
    --lobbyRowBackgroundColor__promos: #F8F6F6;

    --lobbyPreviewPanelBackgroundColor: transparent;

    --bingo-rooms-panel-background-color: transparent;

    --lobbyPromosPreviewPanelBackgroundColor: transparent;


    --navigation-item-label-color: var(--neutral-dark);
    --navigation-item-hover-color: var(--brand);
    --navigation-item-active-color: var(--brand);
    --navigation-item-background: var(--brand-x-light);
    --navigation-item-icon-color: var(--brand-x-dark);
    --navigation-item-header-color: var(--brand-x-dark);


    --gameNavBackgroundColor: var(--neutral-x-light);
    --gameNavFontColor__mobile: var(--neutral-x-light);
    --gameNavBackgroundColor__mobile: var(--brand-x-dark);
    --game-category-background-color: var(--accent-1);
    --game-tile-padding-small: 2px;
    --game-tile-padding-large: 0 0 0 5px;
    --game-tile-border-radius: 4px;
    --game-tile-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --game-category-title-text-transform: none;


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

    --loyalty-explanation-header-text-color: var(--brand-x-light);
    --loyalty-explanation-card-background-color: var(--accent-1-dark);
    --loyalty-horizontal-menu-background-color: var(--brand-x-dark);
    --loyalty-horizontal-menu-text-color: #fff;
    --loyalty-horizontal-menu-text-color-active: #fff;
    --loyalty-horizontal-menu-text-color-hover: #fff;
    --loyalty-page-header-text-color: #fff;
    --loyalty-reward-card-header-height: 200px;
    --loyalty-background-color: #460043;
    --loyalty-page-header-font: bold 1.8rem var(--body-font-family);
    --loyalty-horizontal-menu-radial-progress-stroke: #fff;
    --loyalty-page-main-bg: url("https://1796954902.rsc.cdn77.org/RosyBingo/images/loyalty/main-bg.png");

    --liveChatFloatingButtonBackground: var(--brand-dark);
    --genericPageContainerBackgroundColor: var(--neutral-x-light);
    --genericPageNavFontSize: 1.6rem;
    --generic-page-nav-font: bold 1.8rem var(--body-font-family);

    --bingo-card-background-color: #fff;
    --bingo-card-size: contain;
    --bingo-card-font: bold 1.8rem var(--body-font-family);

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

    --modal-title: 19px;
    --modalLoyaltyPointsLegendBackgroundColor: var(--accent-1);
    --modalLoyaltyRewardsBackground: var(--accent-1);
    --modalLoyaltyRewardsFontColor: white;
    --modalLoyaltyRewardsHeaderBackground: var(--accent-1);
    --modalDefaultHeaderBackgroundColor: var(--brand-x-dark);
    --modalBankingStaticMessageBackgroundColor: var(--modalDefaultHeaderBackgroundColor);

    --balanceDisplayPaneBonusIconColor: var(--neutral);
    --balanceDisplayPaneCashIconColor: var(--neutral);
    --balanceDisplayPaneBonusInfoTextColor: var(--neutral);
    --balanceDisplayPaneBonusInfoTextColor__generic: var(--neutral-x-light);
    --balanceDisplayPaneItemValueColor__generic: var(--neutral-x-light);
    --balanceDisplayPaneItemBackgroundColor: var(--neutral-x-light);
    --balanceDisplayPaneBonusIconColor__generic: var(--neutral-x-light);
    --balanceDisplayPaneCashIconColor__generic: var(--neutral-x-light);

    /* Player bar */
    --playerbar-background-color: white;
    --playerbar-default-font-color: var(--body-text-color);
    --playerbar-input-icon-color: var(--body-text-color);
    --playerbar-input-font-color: var(--body-text-color);
    --playerbar-input-background-color: var(--neutral-x-light);
    --playerbar-my-account-icon-color: var(--neutral);
    --playerbar-item-background-color: var(--neutral-x-light);
    --playerbar-icon-bell-color__opened: var(--neutral);
    --playerbar-icon-bell-color__closed: var(--neutral);
    --playerbar-deposit-button-font-color: var(--brand);
    --playerbar-loyalty-active-background-color: var(--neutral-x-light);
    --playerbar-loyalty-active-font-color: var(--playerbar-default-font-color);
    --playerbar-notification-panel-background: var(--neutral-x-light);
    --playerbar-font-family: 'Helvetica';

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

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

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

    --recentlyPlayedGamesBarBg: var(--brand-dark);
    --recentlyPlayedGamesBarBgMobile: white;
    --recentlyPlayedGamesBarFontColor: white;
    --recentlyPlayedGamesBarHeadingBackground__mobile: var(--accent-1);
    --recentlyPlayedGamesBarFontColor__mobile: white;

    --live-chat-background-color: var(--brand-dark);
    --send-email-background-color: var(--accent-1-light);
    --live-chat-font-color: white;

    --new-player-topbar-bg: var(--brand-dark);
    --new-player-bg: linear-gradient(to bottom, #65100f 0%, #b00806 75%, var(--brand-x-dark) 100%);

    --category-box-shadow: 0px 0px 12px -7px rgba(0,0,0,0.4);
    --category-box-shadow__active: 0px 0px 9px -7px rgba(0,0,0,0.4);
    --category-box-shadow__hover: 0px 0px 15px -7px rgba(0,0,0,0.4);
    --category-card-background__hover: #f2f2f2;
    --category-box-icon-color: var(--accent-1);
    --category-box-font-color: black;
    --category-box-border-radius: 12px;
    --help-center-page-background-color: var(--neutral-x-light);
    --help-center-page-header-background-color: var(--brand-x-dark);

    --loading-sprite-animation-timing-function: steps(75);
    /* NOTE: loading-sprite-height should be 0 minus the value of the height (needs to be negative) */
    --loading-sprite-height: -12750px;
    --loading-sprite-canvas-height: 160px;

    --loginPageForegroundImageBottomValue: 0;
    --themed-games-background: var(--accent-1);
    --choose-your-bonus-bg: var(--neutral);
}

.bg--usp{
    --bg-usp-overlay: none;
}

.bg--account--side-menu {
    --header-color: var(--brand);
    --account-side-menu-username-color: var(--neutral-x-light);
    --account-side-menu-overview-background: var(--brand);
    --account-side-menu-title-color: var(--neutral-x-light);
    --account-side-menu-container-background: var(--neutral-x-light);
    --account-side-menu-overview-font-color: var(--brand-light);
    --account-side-menu-close-button-color: var(--neutral-x-light);
}


.bg--game-player-bar .logo img {
    width: 65% !important;
}


/* Footer */
.bg--footer {
    --bg-footer-background-color-1: var(--brand-dark);
    --footer-menu-list-heading-color: var(--neutral-x-light);
    --footer-menu-list-item-color: var(--brand-x-light);
    --footer-legal-text-font-color: var(--brand-x-light);
    --footer-trust-pilot-heading-font-color: var(--neutral-x-light);
    --footer-font-color: var(--brand-x-light);
}

/* Top Bar */
.bg--top-bar, .bg--top-bar-lite {
    --topbar-background-color: var(--brand-dark);
    --topbar-active-nav-font-color: white;
    --topbar-font-color: var(--brand-light);
    --topbar-inner-font-size: 1.25rem;
    --topbar-font-weight: bold;
    --top-bar-icon-button-color: white;
    --top-bar-ctas-mobile: 0.65rem;
    --top-bar-live-chat-color: white;
    --bg-notifications-counter: var(--accent-1);
}

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

/* Bonus Money Rules */
.bg--bonus-money-strapline {
    --bonus-money-strapline-background-color: #FFFFFF;
    --bonus-money-strapline-font-color: var(--neutral);
}

/* Winners feed */
.bg--winners-feed {
    --winnersFeedHeadingBackgroundColor: var(--accent-1);
    --winnersFeedHeadingFontColor: var(--neutral-x-light);
    --winnersFeedItemHoverColor: var(--brand-light);
    --winnersFeedItemFontColor: var(--neutral-dark);
    --winnersFeedBorderRadius: 0px;
    --winnersFeedHeaderTextTransform: none;
}

input {
    --input-autofill-color: #9e9e9e;
}

.loyalty-explanation-card {
    --header-color: white;
}

.bg--modal__identity {
    --header-color: var(--accent-1-dark);
}

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

.daily-deal-slot-machine-panel-container .bg--bonus-money-strapline {
    --bonus-money-strapline-font-color: white;
}

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

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

.bg--bottom-bar {
    --bottom-bar-background-color__active: var(--brand-x-light);
}

.rg-week {
    --rg-week-logo-width: 8rem;
    --rg-week-logo-width__mobile: 5.5rem;
    --rg-week-gradient-background__to-right: linear-gradient(to right, var(--brand-dark) 0%, var(--brand-x-dark) 75%, var(--brand-x-dark) 100%);
    --rg-week-gradient-background__to-left: linear-gradient(to left, var(--brand-dark) 0%, var(--brand-x-dark) 75%, var(--brand-x-dark) 100%);
    --rg-week-header-background: var(--brand-dark);
}

.bg--leaderboards {
    --leaderboard-user-position-bg: var(--brand-x-dark);
    --leaderboard-list-card-background: var(--neutral);
}

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

.bg--free-spins-shuffle {
    --free-spins-bg: #f26a6b;
}
/*END VARS*/

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

.bg--button--primary:hover {
    --background: var(--accent-1-dark);
}

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

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

.bg--button--primary__disabled {
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__disabled:hover {
    --opacity: 0.75;
    --cursor: not-allowed;
}

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

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

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

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

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

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

.bg--button--primary__plain__disabled {
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__plain:hover {
    --color: white;
}

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

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


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

.bg--button--accent {
    --background: var(--brand);
    --color: #fff;
    --border: 2px solid transparent;
}

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

.bg--button--accent:hover {
    --background: var(--brand-dark);
}

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

.bg--button--accent__disabled {
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__disabled:hover {
    --opacity: 0.75;
    --cursor: not-allowed;
}

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

.bg--button--accent__hollow:hover {
    --background: var(--brand-dark);
    --color: white;
}

.bg--button--accent__hollow:active {
    --background: var(--brand-dark);
    --color: white;
}

.bg--button--accent__hollow:focus {
    --background: var(--brand-dark);
    --color: white;
}

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

.bg--button--accent__plain:hover {
    --background: var(--brand-light);
}

.bg--button--accent__plain:active {
    --background: var(--brand-light);
}

.bg--button--accent__plain:focus {
    --background: var(--brand-light);
    --button-border: 2px solid var(--brand);
}

/*END BUTTONS*/



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

.bg--new-player-homepage section.section-1 .top-cta a {
    color: #fff;
}

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

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

.bg--new-player-homepage section.section-1 .top-bar .menu-icon {
    top: 34px;
}

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

@media (min-width: 1025px) {
    .bg--new-player-homepage section.section-1 .hero-a {
        right: 20px;
        top: 115px;
        width: 700px;
    }

    .bg--new-player-homepage section.section-3 .hero-a {
        /*right: 219px;*/
    }

    .bg--new-player-homepage section.section-3 .ball {
        top: 117px;
        left: 18px;
    }

    .bg--new-player-homepage section.section-4 .hero-b {
        right: 9px;
    }

    .bg--new-player-homepage section.section-4 .ball {
        top: -60px;
    }
}

@media (min-width:320px) and (max-width: 961px) {
    .bg--new-player-homepage section.section-1 .logo {
        width: 86px;
        top: -4px;
    }
}

.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;
}

.bg--modal[aria-label="Loyalty Rewards"] {
    --header-color: white;
}