body {
    background-color: #E5E5E5;
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body label, body span, body em, body a {
    color: #7f7e7e;
}

header.navbar .container, .info-section div.container, footer .container, .hero-section .container {
    max-width: 1110px;
}

.mx-auto, .ml-auto {
    margin-left: auto!important;
}

.mx-auto, .mr-auto {
    margin-right: auto!important;
}

#login {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow-x: hidden;
}

#login .main {
    flex: 1;
    min-width: 0;
}

.login-block {
    background: #FFFFFF;
    padding: 50px;
}

.img-block {
    background-color: #ec8e1b;
}

#login h2 {
    font-size: 20px;
}

#login label, #login span, #login a {
    font-size: 13px;
}

#login .links {
    margin-top: 10px;
    margin-bottom: 20px;
}

#login button {
    width: 100%;
    background-color: #8C30F5;
    color: #FFFFFF;
}

#login .row > * {
    padding-left: 0;
    padding-right: 0;
}
.form-group .card {
    border: medium none;
}

#login .card-group > .card.img{
    background-color: #f3c745;
    background-image: url("/static/images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    width: 100%;
}

#login .card span {
    position: absolute;
    margin-left: 20px;
    margin-top: -3px;
}

#login .card a {
    text-decoration: none;
}

#login .card a:hover {
    color: #8C30F5;
}

header {
    background-color: #FFFFFF;
}

#logo {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: inline-block;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:visited,
.navbar-dark .navbar-nav .nav-link:link  {
    color: #222222;
}

.navbar-dark .navbar-nav .nav-item {
    margin-right: 10px;
}

#btn-login {
    background-color: #f0f0f0;
    border-color: #8c30f5;
    padding-right: 25px;
    padding-left: 25px;
    color: #8c30f5;
    font-size: 12px;
}

#btn-logout {
    background-color: #c90b0b;
    border-color: #c90b0b;
    padding-right: 25px;
    padding-left: 25px;
    color: #fff;
    font-size: 12px;
}


#btn-sign-up {
    background-color: #8c30f5;
    border-color: #8c30f5;
    padding-right: 25px;
    padding-left: 25px;
    color: #FFFFFF;
    font-size: 12px;
}

.btn.btn-dash {
    background-color: #5bc6cf;
    border-color: #5bc6cf;
    padding-right: 25px;
    padding-left: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}

.privacy-link, .privacy-link:hover, .privacy-link:visited {
    color: #F22BB2;
    font-size: 12px !important;
    text-decoration: none;
}

.error, .form-group em {
    color: #c90b0b;
    font-size: 12px;
}

.alert {
    padding: 0.1rem 0.4rem;
    color: #ff001791;
    border: medium none;
    background: none;
}

.sidebar .nav-link:hover {
    background: #fff !important;
}

.nav-justified .nav-item, .nav-justified > .nav-link {
    margin-right: 5px;
}

/* Ball CSS */

.ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    /*background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);*/
    background: #686363;
}

.ball:hover, .ball.selected, .ball .eight:hover, .ball.selected .eight.selected, .ball.selected {
    background: #8C30F5;
    color: #fff;
    font-weight: bold;
}

.ball.selected .eight:before {
    color: #fff;
    font-weight: bold;
}

.eight:hover, .ball:hover{
    cursor: pointer;
    background: #8C30F5;
    color: #fff;
    font-weight: bold;
}

.ball:before {
    content: "";
    position: absolute;
    background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    bottom: 2.5%;
    left: 5%;
    opacity: 0.6;
    height: 100%;
    width: 90%;
    -webkit-filter: blur(5px);
    z-index: 2;
}
/*.ball:after {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 5%;*/
/*    left: 10%;*/
/*    border-radius: 50%;*/
/*    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);*/
/*    -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);*/
/*    -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);*/
/*    -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);*/
/*    -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);*/
/*    transform: translateX(-80px) translateY(-90px) skewX(-20deg);*/
/*    -webkit-filter: blur(10px);*/
/*}*/

.bet-form fieldset .form-group {
    align-items: center;
    display: flex;
    justify-content: center;
}

.ball .eight {
    width: 80%;
    height: 80%;
    margin: 10%;
    background: white;
    border-radius: 50%;
    position: absolute;
    z-index: 100;
}

.ball .eight:before {
    content: "8";
    display: block;
    position: absolute;
    text-align: center;
    height: 80px;
    width: 100px;
    left: 55px;
    margin-left: -82px;
    top: 20px;
    margin-top: -48px;
    color: black;
    font-family: Arial;
    font-size: 22px;
    line-height: 104px;
}

.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    -webkit-transform: rotateX(90deg) translateZ(-150px);
    -moz-transform: rotateX(90deg) translateZ(-150px);
    -ms-transform: rotateX(90deg) translateZ(-150px);
    -o-transform: rotateX(90deg) translateZ(-150px);
    transform: rotateX(90deg) translateZ(-150px);
    z-index: -1;
}
.stage {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: 10px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.eight.one::before {content: '1';}
.eight.two::before {content: '2';}
.eight.three::before {content: '3';}
.eight.four::before {content: '4';}
.eight.five::before {content: '5';}
.eight.six::before {content: '6';}
.eight.seven::before {content: '7';}
.eight.nine::before {content: '9';}
.eight.ten::before {content: '10';}
.eight.eleven::before {content: '11';}
.eight.twelve::before {content: '12';}
.eight.thirteen::before {content: '13';}
.eight.fourteen::before {content: '14';}
.eight.fifteen::before {content: '15';}
.eight.sixteen::before {content: '16';}
.eight.seventeen::before {content: '17';}
.eight.eighteen::before {content: '18';}
.eight.nineteen::before {content: '19';}
.eight.twenty::before {content: '20';}
.eight.twenty_one::before {content: '21';}
.eight.twenty_two::before {content: '22';}
.eight.twenty_three::before {content: '23';}
.eight.twenty_four::before {content: '24';}

/**
 Home page stylesheet
*/
.hero-section {
    background-color: #face33;
}

.hero-section .slider-img {
    text-align: end;
}


.hero-section .slider-content {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    z-index: 8;
}

.hero-section .slider-img img {
    width: 100%;
    max-width: 630px;
    height: auto;
}

.hero-section div.container h1 {
    font-weight: bold;
}

.hero-section div.container h2 {
    font-weight: bold;
}

.hero-section div.container div.sub-title {
    color: white;
    font-style: italic;
    background-color: #8C30F5;
    padding: 0.3em 0em 0.3em 0.2em;
}

.info-section {
    background-color: #8C30F5;
}

.info-section div.container {
    position: relative;
    top: -10px;
    padding: 1rem 5em 0em 5em;
    background-color: white;
}

.nav-tabs {
    border-bottom: 1px solid #8C30F5;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    background-color: #FECE22;
    margin-right: 0.2em;
    color: black;
    font-weight: 700;
}

.nav-tabs .nav-link.active {
    color: white;
    background-color: #8C30F5;
    border-color: #dee2e6 #dee2e6 #fff;
}

.tab-pane > div.row {
    margin-top: 1em;
    margin-bottom: 2em;
}
.lotto-number-box {
    margin-bottom: 1rem;
}

.lotto-number-box h1 {
    font-size: 1.5rem;
}
.lotto-number-box p {
    color: #8C30F5;
}
.sub-lotto-number-box {
    background-color: #F2F2F2;
    margin: auto;
    padding: 2em;
}

.lotto-number {
    width: 50px;
    height: 50px;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    padding: 10px;
    text-align: center;
    background-color: #FECE22;
}
span.lotto-number {
    text-align: center;
    background-color: #FECE22;
}

h1.head-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    vertical-align: middle;
    padding-top: 15px;
    padding-left: 30px;
    color: white;
    font-size: 2.5em;
    background-color: #8C30F5;
}
p.p-number {
    color: #212529;
}

p.p-header {
    color: #8C30F5;
    font-size: 6em;
    font-weight: 500;
    line-height: 1em;
}

td:nth-child(1), td:nth-child(2) {
    color: #8C30F5;
}

footer {
    background-color: #323232;
}
footer .nav-link {
    color: white;
}

footer .nav-link:hover {
    color: #FECE22;
}

footer span.icons {
    width: 30px;
    height: 30px;
    margin-right: 1em;
    color:#FECE22;
}

.nav-tabs .nav-link {
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.btn-violet {
    background: #8C30F5;
    color: #fff;
    font-weight: bold;
}

.bet-form fieldset:not(:first-of-type) {
    display: none
}

.input-group-addon {
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    color: #495057;
    text-align: center;
    background-color: #e9ecef;
    border: 1px solid rgba(0, 0, 0, .15);
    border-left-color: rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem .25rem .25rem 0.25rem;
}

#privacy-content ol li::marker {
    font-size: 24px !important;
}

#privacy-content.info-section div.container{
    top: 0;
}

#privacy-content h2 a:hover {
    color: #8C30F5;
}

/****** media query ********/

#all_or_night_tables td, #all_or_night_tables th{
    text-align: center;
}


@media (max-width: 1024px) {
    #login .card-group > .card.img {
        display: none;
    }
}

@media (max-width: 768px) {
    #login .card-group > .card.img {
        display: none;
    }
}


@media (max-width: 480px) {

}


@media (max-width: 320px) {

}