body {
    font-family: "Code-Pro-LC","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif
}

body.bg-dark {
    background-color: #fff!important;
}

.top-header {
    border-bottom: 2px solid #2d3f7d;
}

.top-header, #navbarHeader.bg-dark {
   background-color: #fff!important;
}

#navbarHeader .text-white {
    color: #2d3f7d!important;
}

#b-nav-logo .site-logo {
    max-height: 30px!important;
}

.navbar-dark .navbar-nav .nav-link, .b-nav-balance-text {
	color: #2d3f7d!important;
}

@media (min-width: 576px) {
	#b-nav-logo .site-logo {
		max-height: 80px!important;
	}
}

#b-nav-login, #b-nav-register {
    display: none;
}

.side-drawer.dark {
    background-color: #fff!important;
}

.side-drawer.dark .nav-link, .side-drawer .text-light {
    color: #2d3f7d!important;
}

#b-nav-how-to-play span, #b-nav-contact span {
    text-transform: uppercase!important;
    font-weight: bold!important;
}

.ribbon {
    color: #fff;
    background: #f74231!important;
    background: linear-gradient(180deg, #f74231 0, #cf0404 27%)!important;
}

#contentSection .container #mainContent.rounded {
    background-color: rgba(52, 58, 64, 0.8) !important;
}

#b-nav-login, #b-nav-register {
    background-color: #2d3f7d!important;
    border-color: #2d3f7d!important;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 0 2 #009bdf!important;
}

#b-nav-login:hover, #b-nav-register:hover {
    background-color: #d88888!important;
    border-color: #d88888!important;
    color: #2d3f7d!important;
}

#b-nav-login:active, #b-nav-register:active, #b-nav-login:focus, #b-nav-register:focus {
    background-color: #d88888!important;
    border-color: #d88888!important;
    box-shadow: 0 0 0 #d88888!important;
    color: #2d3f7d!important;
}

.btn-success {
    background-color: #e32026!important;
    border-color: #e32026!important;
    box-shadow: 0 0 0 2 #e32026!important;
}

.btn-success:hover {
    background-color: #e32026!important;
    border-color: #e32026!important;
}

.btn-success:active, .btn-success:focus {
    background-color: #e32026!important;
    border-color: #e32026!important;
    box-shadow: 0 0 0 #e32026!important;
}

.btn-primary {
    background-color: #e32026!important;
    border-color: #e32026!important;
    color: #fff!important;
}

.btn-primary:hover {
    background-color: #d88888!important;
    border-color: #d88888!important;
    color: #2d3f7d!important;
}

.btn-primary:active, .btn-primary:focus {
    background-color: #d88888!important;
    border-color: #d88888!important;
    color: #2d3f7d!important;
}

.btn-white {
    color: #e32026!important;
}

.game-lobby-prize {
    color: #fff!important;
}

.game-lobby-prize-detail {
    color: #fff!important;
}

.payout-list-container {
    font-size: 90%!important;
}

.bonobo-win, .raffle-win {
    background-color: #009bdf!important;
    color: #fff!important;
}

.raffle-countdown-container, .raffle-highlight-container {
    background-color: #009bdf!important;
}

.game-over-background {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#286ad1+0,1f56a9+51,286ad1+100 */
    background: #009bdf; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #009bdf 0%, #1f56a9 51%, #0582b9 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #009bdf 0%,#1f56a9 51%,#0582b9 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #009bdf 0%, #1f56a9 51%,#0582b9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.dd-send-details-button {
    display: none;
}

footer {
    background-color: #fff;
}

footer a.text-muted {
    color: #fff!important;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

footer #footer-perma {
    margin-top: 70px;
}

footer #footer-perma .text-muted {
    color: #fff!important;
}

.copyright-section.text-muted {
    color: #fff!important;
}

.footer-image {
    display: inline-block;
    margin-right: 1em;
}

#footer-default {
    display: none;
}

.sticky-bottom {
    z-index: 1040!important;    
}

#oneClickBuyModal {
    /* old 
    font-family: Allroundgothic-medium, Georgia, sans-serif;
    */
    font-family: GothamSSm, Helvetica, Helvetica Neue, Arial
}

#oneClickBuyModal .modal-content {
    border: 0px solid #f5f6f9!important;
    border-bottom: 0px solid #f5f6f9!important;
}

#oneClickBuyModal .modal-footer {
    border: 0px solid #f5f6f9!important;
    border-bottom: 0px solid #f5f6f9!important;
}

#oneClickBuyModal .react-step.active {
    background-color: #fff!important;
    /* DOESN'T WORK color: #e32026!important; */
}

#oneClickBuyModal .react-step-active {
    color: #e32026!important;
}

#oneClickBuyModal .react-step-inactive {
    color: #e32026!important;
}

#allDrawsFromDate {
    display: none;
}

@media (min-width: 576px) {
    .sticky-bottom {
        /*margin-bottom: 0px!important;*/
    }
}

@media (min-width: 320px) {
    .one-click-footer-container {
       margin-bottom: -200px;
    }
}

@media (min-width: 768px) {
    .one-click-footer-container {
    margin-bottom: -150px;
    }
}

.modal-body .scotto-blue, .form-text .text-muted {
    color: #e32026!important;
    font-family: GothamSSm, Helvetica, Helvetica Neue, Arial
}

.scotto-blue, .text-blue {
    color: #e32026!important;
}

.scotto-blue {
    font-family: GothamSSm, Helvetica, Helvetica Neue, Arial;
}

.one-click-step3 #emailHelp, .one-click-step3 #phoneHelp {
    color: #000!important;    
}

.one-click-step3 #emailHelp, .one-click-step3 #phoneHelp {
    font-family: GothamSSm, Helvetica, Helvetica Neue, Arial;
}

.one-click-step4 .d-flex.flex-wrap.flex-sm-nowrap {
    background-color: #fff;
    border-radius: 5px;
    padding: 5px;
    color: #000!important;
}

#oneClickBuyModal .modal-content {
    border: 1px solid black;
    background-color: #fff;
}

#oneClickBuyModal .valid-feedback {
    color: #28a745!important;
}

#oneClickBuyModal .modal-header {
    background-color: #e32026!important;
    border-bottom: 0px solid #fff!important;
}


#allDrawsFromDate {
    display: none;
}

@media (min-width: 576px) {
    .sticky-bottom {
        /*margin-bottom: 0px!important;*/
    }
}

@media (min-width: 320px) {
    .one-click-footer-container {
       margin-bottom: -200px;
    }
}

@media (min-width: 768px) {
    .one-click-footer-container {
    margin-bottom: -150px;
    }
}

.modal-body .scotto-blue, .form-text .text-muted {
    color: #000!important;
}

.one-click-step4 .d-flex.flex-wrap.flex-sm-nowrap {
    background-color: #fff;
    border-radius: 5px;
    padding: 5px;
    color: #000!important;
}

.one-click-step4 .text-smaller-85.font-weight-light.line-height-100 {
    color: #000!important;    
}

#oneClickBuyModal .invalid-feedback {
    color: #e32026!important;    
}

#oneClickBuyModal .text-accent {
    color: #e32026!important;    
}

:root {
    --step1a-image-url: url("https://static-scl.bonoboplc.com/assets/47/5/ed6b799b-ddfb-4b21-870b-b00e24ef9201.png");
    --step1b-image-url: none; 
    --step1c-image-url: url("https://static-scl.bonoboplc.com/assets/47/51/a6abff36-a363-4442-98f3-cc782a867f3c.png");
    --step2-desktop-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/503a8d9d-6fe7-4915-b7a1-866146f28a3e.png);
    --step2-mobile-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/503a8d9d-6fe7-4915-b7a1-866146f28a3e.png);
    --step3-desktop-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/471a20bc-5eda-45f3-bbf1-1fe425cca311.png);
    --step3-mobile-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/471a20bc-5eda-45f3-bbf1-1fe425cca311.png);
    --step4-desktop-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/4084a4de-a8c7-47b2-b3b7-b867ad49584a.png);
    --step4-mobile-image-url: url(https://static-scl.bonoboplc.com/assets/47/5/4084a4de-a8c7-47b2-b3b7-b867ad49584a.png);
    --step-background: none;
}

#oneClickBuyModal .modal-body {
    background-image: var(--step-background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#oneClickBuyModal .modal-body.one-click-step-processing, #oneClickBuyModal .modal-body.one-click-step-failed {
    background-image: none;
    color: #000!important;
}

#oneClickBuyModal .modal-body.one-click-step-processing h4 {
    color: #000!important;
}

#oneClickBuyModal .modal-body.one-click-step-confirm, #oneClickBuyModal .modal-body.one-click-step-success {
    color: #000!important;
}

#oneClickBuyModal .modal-body.one-click-step-success {
    text-align: left;
}

#oneClickBuyModal .modal-body.one-click-step-success .text-accent {
    color: #000!important;
}

@media (min-width: 320px) {
.one-click-footer-container {
   margin-bottom: -400px;
}
}

@media (min-width: 768px) {
.one-click-footer-container {
margin-bottom: -150px;
}
}
    
@media (max-width: 767px) {
    #oneClickBuyModal .modal-body.one-click-step1 {
        /* // background-image: var(--step1a-image-url); */
        background-image: var(--step1a-image-url), var(--step1b-image-url), var(--step1c-image-url), var(--step-background);
        background-size: 70% auto, auto 50%, 75% auto, cover;
        background-repeat: no-repeat;
        background-position: 50% 15%, bottom center, 50% 36%, center;
    }
    
    /* promotion only override */
    #oneClickBuyModal .modal-body.one-click-step1.promotion {
        background-image: var(--step1a-image-url), var(--step1b-image-url), var(--step1c-image-url), var(--step-background);
        background-size: 70% auto, 90%, 40% auto, cover !important;
        background-repeat: no-repeat;
        background-position: 100% 24%, center, 95% 45%, center !important;
    }

}

@media (min-width: 768px) {
    #oneClickBuyModal .modal-body.one-click-step1 {
        background-image: var(--step1a-image-url), var(--step1b-image-url), var(--step1c-image-url), var(--step-background);
        background-size: 32% auto, contain, 40% auto, cover;
        background-repeat: no-repeat;
        background-position: 5% 42%, 85% 12em, 90% 10%, center;
    }

    /* promotion only override */

    #oneClickBuyModal .modal-body.one-click-step1.promotion {
        background-image: var(--step1a-image-url),
            var(--step1b-image-url),
            var(--step1c-image-url),
            var(--step-background);
        background-size: 32% auto, 40%, 30% auto, cover !important;
        background-repeat: no-repeat;
        background-position: 5% 42%, 50% 70%, 95% 14%, center !important;
    }
}

@media (min-width: 768px) {
#oneClickBuyModal div.one-click-step2-image {
    background: var(--step2-desktop-image-url) no-repeat!important;
    background-size: 70% auto, 0% auto!important;
    min-height: 400px;
    background-position: 65% 42%, 50% 70%, 95% 14%, center !important;
}
}

@media (max-width: 767px) {
#oneClickBuyModal div.one-click-step2-image {
    background: var(--step2-mobile-image-url) no-repeat!important;
    background-size: 100% auto, 0% auto!important;
    min-height: 400px;
    max-width: 800px;
}
}

@media (min-width: 768px) {
#oneClickBuyModal div.one-click-step3-image {
    background: var(--step3-desktop-image-url) no-repeat!important;
    background-size: 80% auto, 0% auto!important;
    min-height: 400px;
        max-width: 800px;
    background-position: 95% 42%, 50% 70%, 95% 14%, center !important;
}
}

@media (max-width: 767px) {
#oneClickBuyModal div.one-click-step3-image {
    background: var(--step3-mobile-image-url) no-repeat!important;
    background-size: 100% auto, 0% auto!important;
    min-height: 400px;
    max-width: 800px;
}
}

@media (min-width: 768px) {
#oneClickBuyModal div.one-click-step4-image {
    background: var(--step4-desktop-image-url) no-repeat!important;
    background-size: 75% auto, 0% auto!important;
    min-height: 400px;
        max-width: 800px;
    background-position: 65% 42%, 50% 70%, 95% 14%, center !important;
}
}

@media (max-width: 767px) {
#oneClickBuyModal div.one-click-step4-image {
    background: var(--step4-mobile-image-url) no-repeat!important;
    background-size: 100% auto, 0% auto!important;
    min-height: 400px;
    max-width: 800px;
}
}