/*vars*/
:root {
    --brand-x-light: #649FEE;
    --brand-light: #287CED;
    --brand: #0E4DA1;
    --brand-dark: #0B376E;
    --brand-x-dark: #08274F;

    --neutral-x-dark: #31333C;
    --neutral-dark: #62646F;
    --neutral: #CACACA;
    --neutral-light: #EAEAEA;
    --neutral-x-light: white;

    --accent-1-x-light: #0d72a6;
    --accent-1-light: #0d5d87;
    --accent-1: #0C223E;
    --accent-1-dark: #0e3f79;
    --accent-1-x-dark: #051528;

    --accent-2-light: #FFE330;
    --accent-2: #F7D118;

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

    --danger-light: #FF8E8E;
    --danger: #FF0000;
    --danger-dark: #7f0000;

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

    --warning-light: #FBE2A1;
    --warning: #F89825;
    --warning-dark: #E6A107;

    --gameNavFontColor: white;

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

    --loading-screen-background-color: var(--accent-1-dark);
    --loading-screen-font-color: white;

    /* Buttons */
    --button-radius: 5px;
    --button-large-padding: 0.4em 1em;
    --button-font-weight: 600;
    --button-small-padding: 0.313em 0.8em;

    /* 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-dark);
    --account-fullscreen-content-background: white;
    --account-fullscreen-content-font-color: var(--neutral-dark);

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

    --lobbyCasinoPreviewPanelBackgroundColor: var(--brand-x-dark);
    --game-category-font-color: var(--neutral-x-light);

    --lobbyRowDefaultBackgroundColor: none;
    --lobbyRowBackgroundColor__bingo: none;
    --lobbyRowBackgroundColor__casino: none;
    --lobbyRowBackgroundColor__promos: none;

    --lobbyPreviewPanelBackgroundColor: transparent;

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

    --lobbyPromosPreviewPanelBackgroundColor: transparent;


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


    --gameNavBackgroundColor: var(--brand-dark);
    --gameNavFontColor__mobile: white;
    --gameNavBackgroundColor__mobile: var(--brand-x-dark);
    --game-category-background-color: var(--brand);
    --game-category-background-color__mobile: 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;

    --loyalty-explanation-header-text-color: var(--brand-x-light);
    --loyalty-explanation-card-background-color: transparent;
    --loyalty-horizontal-menu-background-color: #670084;
    --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 'Montserrat', Helvetica, Roboto, Arial, sans-serif;
    --loyalty-horizontal-menu-radial-progress-stroke: #fff;
    --loyalty-page-main-bg: linear-gradient(135deg, #3f1e56, #da2565);

    --liveChatFloatingButtonBackground: rgba(0, 21, 129, 0.7);
    --genericPageContainerBackgroundColor: white;
    --genericPageNavFontSize: 1.6rem;
    --genericPageNavFontColor: var(--neutral-light);
    --genericPageActiveNavColor: white;
    --generic-page-nav-font: bold 1.8rem 'Montserrat', Helvetica, Roboto, Arial, sans-serif;

    --bingo-card-background-color: white;
    --bingo-card-details-background-color: white;
    --bingo-card-font: bold 1.8rem 'Montserrat', Helvetica, Roboto, Arial, sans-serif;

    --modal-title: 19px;
    --modalLoyaltyPointsLegendBackgroundColor: white;
    --modalLoyaltyPointsLegendH1Color: white;
    --modalLoyaltyPointsLegendH4Color: white;
    --modalLoyaltyPointsLegendCloseButtonColor: white;
    --modalOverlayColor_custom: rgba(0, 0, 0, 0.8);
    --creatingAccountH1Color: white;
    --creatingAccountH4Color: white;
    --send-email-background-color: var(--accent-1-x-light);

    --modalBankingStaticMessageBackgroundColor: var(--accent-1);

    --switch-bg-color: var(--neutral-light);
    --reward-bubble-color: var(--accent-2);

    --loyaltyRadialProgressbarFillColor: var(--accent-1-dark);
    --rewards-level-dropdown-radial-progressbar-background-color: var(--brand-light);

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

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

    --leaderboard-text-color: white;

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

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

    --footer-item-separator-color: var(--brand-light);

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

    --recentlyPlayedGamesBarBg: var(--brand-x-dark);
    --recentlyPlayedGamesBarBgMobile: var(--brand-x-dark);
    --recentlyPlayedGamesBarFontColor: white;

    --new-player-topbar-bg: var(--brand-x-dark);
    --new-player-bg: linear-gradient(135deg, #0f1f36, #294e82);

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

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

    --account-side-menu-container-background: var(--brand-x-dark);

    --topbar-background-color: var(--brand-dark);
    --gameNavActiveFontColor: white;
    --loginPageForegroundImageBottomValue: -2%;
    --game-page-sidebar-bg: var(--brand);
    --modalLogOutHeaderFontColor: var(--brand-x-dark);
    --gameNavMoreListColor: var(--neutral-x-dark);

    --recentlyPlayedGamesBarHeadingBackground__mobile: var(--accent-1);
    --recentlyPlayedGamesBarFontColor__mobile: #fff;

    /* NOTE: loading-sprite-height should be 0 minus the value of the height (needs to be negative) */
    --loading-sprite-height: -8215px;
    --loading-sprite-width: 123px;
    --loading-sprite-animation-timing-function: steps(55);
    --loading-sprite-animation-duration: 2.3s;
    --loading-sprite-canvas-height: 130px;

    --genericPageTableFontColor: black;
    --logo-max-width: 205px;

    --hooyu-info-container-background: var(--neutral-dark);
    --verification-option-default-background: var(--neutral-x-dark);

    --lobby-see-more-color: white;
}

.bg--component-loading svg {
    color: var(--brand-light) !important;
}

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

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

/* Footer */
.bg--footer {
    --bg-footer-background-color-1: var(--accent-1-x-dark);
    --footer-menu-list-heading-color: white;
    --footer-menu-list-item-color: #9CA8B8;
    --footer-legal-text-font-color: #9CA8B8;
    --footer-trust-pilot-heading-font-color: white;
    --footer-font-color: #9CA8B8;
}

/* Player bar */
.bg--player-bar {
    --playerbar-background-color: var(--accent-1-x-dark);
    --playerbar-default-font-color: white;
    --playerbar-icon-caret-color__opened: black;
    --playerbar-icon-caret-color__closed: white;
    --playerbar-icon-bell-color__opened: var(--brand);
    --playerbar-icon-bell-color__closed: white;
    --playerbar-my-account-icon-color: white;
    --playerbar-item-background-color: var(--brand-x-dark);
    --playerbar-input-background-color: rgba(255, 255, 255, 0.3);
    --playerbar-input-icon-color: black;
    --playerbar-input-font-color: white;
    --playerbar-deposit-button-font-color: var(--brand);
    --playerbar-loyalty-active-background-color: white;
    --playerbar-loyalty-active-font-color: var(--brand-dark);
    --playerbar-notification-panel-background: white;
}

/* Top Bar */
.bg--top-bar {
    --logo-max-width: 205px;
    --topbar-background-color: var(--brand-dark);
    --topbar-active-nav-font-color: white;
    --topbar-font-color: var(--neutral);
    --topbar-inner-font-size: 1.25rem;
    --topbar-font-weight: normal;
    --top-bar-icon-button-color: white;
    --top-bar-ctas-mobile: 0.65rem;
    --top-bar-live-chat-color: white;

    --notification-dropdown-header-background: var(--neutral-light);
}

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

/* Winners feed */
.bg--winners-feed {
    --winnersFeedHeadingFontColor: white;
    --winnersFeedItemHoverColor: var(--brand-light);
    --winnersFeedItemFontColor: var(--neutral-dark);
    --winnersFeedBorderRadius: 8px;
    --winnersFeedHeaderTextTransform: none;
}

.bg--casino-preview {
    --header-color: white;
}

.loyalty-rewards-explanation-modal {
    --modalLoyaltyRewardsHeaderBackground: transparent;
    --modalLoyaltyRewardsBackground: var(--neutral-dark);
    --modalLoyaltyRewardsFontColor: white;

    --header-color: white;
}

.bg--page__generic-styles {
    --header-color: white;
}

.bg--page {
    --header-color: white;
}

.bg--bottom-bar {
    --bottom-bar-nav-floating-icon-color: var(--brand-light);
    --bottom-bar-background-color__active: var(--brand-light);
    --bottom-bar-nav-font-color: var(--brand-dark);
    --bottom-bar-nav-font-color__active: white;
}

.bg--support {
    --live-chat-font-color: white;
    --send-email-background-color: #287CED;
    --send-email-font-color: white;
}

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

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

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

.promotional-terms {
    --landingpage-terms-bg: var(--brand-dark);
    --landingpage-terms-color: var(--brand-x-light);
}

.bg--help-center {
    --header-color: var(--neutral-x-dark);
}

.bg--leaderboard {
    --leaderboard-bg-color: rgba(5,21,40,0.75);
}

.bg--leaderboards {
    --header-color: var(--neutral-x-dark);
    --leaderboard-user-position-bg: var(--brand-dark);
    --leaderboard-list-card-background: var(--brand-dark);
    --leaderboard-table-text-color: var(--neutral-x-dark);
    --leaderboard-text-color: #fff;
    --leaderboard-info-bg-color: #0B376E;
    --leaderboard-table-bg-color: #EEF5FD;
    --leaderboard-table-bg-color-hover: #E4EBF3;
    --leaderboard-desc-color: #fff;
    --no-leaderboards-active-text-color: white;
}

.rg-week {
    --rg-week-logo-width: 16rem;
}

.bg--registration {
    --table-alt-background-color: var(--neutral-light);
}

.bg--free-spins-shuffle {
    --free-spins-bg: linear-gradient(180deg, rgba(10,27,57,1) 0%, rgba(4,92,135,1) 76%);
}
/*end vars*/

/*buttons*/
/* -------------------------------------------------- */
/* --------------------- PRIMARY -------------------- */
/* -------------------------------------------------- */
.bg--button--primary {
    --background: var(--accent-2);
    --color: #FF0000;
    --border: 3px solid transparent;
}

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

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

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

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

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

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

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

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

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

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

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

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

.bg--button--primary__plain:hover {
    --color: var(--accent-2-dark);
}

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

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


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

.bg--button--accent {
    --background: var(--brand-light);
    --color: white;
    --border: 3px solid transparent;
    --box-shadow: none;
}

.bg--button--accent:hover {
    --background: var(--brand-x-light);
    --color: white;
}

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

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

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

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

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

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

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

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

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

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

/*end buttons*/
body {
    color: var(--body-font-color);
    line-height: 1.6;
}

.bg-casino-new-player-homepage {
    background-color: #082954 !important;
    background-size: 100%, 121% !important;
}

@media only screen and (max-width: 600px) {
    .bg-casino-new-player-homepage {
        background-size: 100%, 361% !important;
    }
}

.landing-page {
    /*background-image: url(https://1796954902.rsc.cdn77.org/shared-brands-images/LandingPageImages/cod-landing-page-bg.jpg);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-color: #040d17;
}

.landing-page .section-2 {
    display: none !important;
}

.landing-page section.section-1 .logo {
    max-width: 272px;
}

.bg--new-player-homepage.landing-page .hero-offer {
    left: 60px;
}

.slot-machine .card-slot .back .short-form .text-offer .text-tiny {
    padding: 0 0.35rem;
}

@media only screen and (max-width: 600px) {
    .slot-machine .card-slot .back .short-form .text-offer .text-small.bonus {
        padding: 0 24px;
    }

    .slot-machine .card-slot .back .short-form .text-offer .text-tiny {
        padding: 0 1.25rem;
    }
}

.bg--new-player-homepage .wrap .slot-machine .card-slot .back .short-form .text-offer .text-huge {
    padding: 0 1rem;
    font-size: 1.4rem;
}

.casino-loyalty-page-main__wrapper .casino-loyalty-page-main::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 172px;
    background: url("https://1796954902.rsc.cdn77.org/CasinoOfDreams/images/loyalty/bent-line.png") no-repeat bottom;
    background-size: contain;
}


@media (min-width: 1025px) {
    .bg-casino-new-player-homepage section.section-4 .content-inner {
        width: 445px;
        top: -56px;
    }

    .bg-casino-new-player-homepage {
        background-size: 100%, 121% !important;
    }
}


.lobby-wrapper, .bg--casino-preview, .bg--page, .bg--maintenance-page {
    background: url("https://1796954902.rsc.cdn77.org/CasinoOfDreamsUk/images/backgrounds/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bg--leaderboards {
    color: white;
}
.bg--leaderboards .t_and_c_overlay {
    color: var(--neutral-x-dark);
}


.bg--lobby-nav--container {
    border-top: 1px solid var(--accent-1-x-light);
    border-bottom: 1px solid var(--accent-1-x-light);
}

.bg--terms-and-conditions .subheader{
    color: var(--header-color);
}
.bg--terms-and-conditions h2 {
    margin-top: 1.5rem;
}

.bg--page, .bg--maintenance-page{
    color: white;
}

.bg--page__generic-styles > .row{
    background: rgba(5,21,40,0.75);
}

.page-404 {
    padding-bottom: 10rem;
    padding-top: 3rem;
}

.custom-skin {
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.custom-skin .bg--casino-preview, .custom-skin .bg--page, .custom-skin .bg--maintenance-page {
    background: transparent !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.bg--choose-your-bonus {
    --choose-your-bonus-close-bg: var(--brand-dark);
    --choose-your-bonus-close-bg-hover: var(--brand-x-dark);
}