/* app css stylesheet */
html{
    /*
    min-height: 100%;
    height: 100%;
    */
    height: 100%;
    /* min-height: 100%; */
}
body, .view-container{
    width: 100%;
    transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    overflow: hidden;
}
html body .view-container{
    bottom: 0px;
    position: absolute;
}

body.scaling, body.scaling .view-container{
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}
html body.scaling .view-container{
    top: 0px;
    bottom: auto;
    position: absolute;
}
.ui-loader-default{
    display: none;
}
body{
    color: white;
    background-image: url(../images/backdrop.jpg);
    background-size: cover;
    background-position: center;
    height: 100%;
    transform-origin: 0% 0%;
    min-height: 100%;
}
div, span, a, p, h1, h2, h3, h4, h5{
    background-repeat: no-repeat;
    background-position: center;
    font-family: GROBOLD;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: #fff;
    //text-transform: capitalize;
}
.lang-zh div,
.lang-zh span,
.lang-zh a,
.lang-zh p,
.lang-zh h1,
.lang-zh h2,
.lang-zh h3,
.lang-zh h4,
.lang-zh h5{
    -webkit-text-stroke-width: 0px;
}

.lang-de div,
.lang-de span,
.lang-de a,
.lang-de p,
.lang-de h1,
.lang-de h2,
.lang-de h3,
.lang-de h4,
.lang-de h5{
    font-family: 'BowlbyOne-Regular';
}

html .ticket-grid .ticket span, html .btn .btn-val{
    -webkit-text-stroke-width: 1px;
}

input, button{
    color: black;
}
html body .currency-symbol{
    -webkit-text-stroke-width: 0px;
}
html.lang-de body .currency-symbol{
    -webkit-text-stroke-width: 1px;
}

html .ngdialog
{
    overflow: hidden;
}
html body .ngdialog.ngdialog-theme-default{
    display: flex;
    align-items: center;
    justify-content: center;
}
html body .ngdialog.ngdialog-theme-default .ngdialog-content{
    color: #fff;
    border: 2px solid black;
    background-image: url(../images/backdrop.jpg);
    background-size: cover;
    background-position: center;

    /*bottom: 10%;*/
    left: 0px;
    right: 0px;
    /*position: absolute;*/
}
.diag-win p{
    font-size: 20px;
}
.ngdialog-content .currency-symbol{
    color: white;
}
.ngdialog button{
    color: #fff !important;
    -webkit-text-stroke-width: 0px;
}
html body .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary{
    background-image: url(../images/button3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 57px;
    text-align: center;
    padding: 16px 30px;
    padding-bottom: 24px;
    font-family: GROBOLD;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    background-color: transparent;
}
html body .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary:hover{
    background-image: url(../images/button3-hover.png);
}
html body .ngdialog.ngdialog-theme-default input:disabled{
    background-color: white;
}
html body .ngdialog.ngdialog-theme-default .lucky-dip-num{
    font-size: 20px;
    width: 24px;
    display: inline-block;
    text-align: center;
    margin-top: 10px;
}
html body .ngdialog.ngdialog-theme-default .arrow{
    display: inline-block;
    margin-top: -10px;
}
html body .ngdialog .page
{
    display : none;
}
html body .ngdialog .page.active
{
    display : block;
}
.info-diag-content ul
{
    padding-left : 0px;
}
.info-diag-content .imgs-container
{
    text-align : center;
}
.info-diag-content .imgs-container img
{
    cursor : pointer;
}
.d-1of10{
    width: 10%;
    float: left;
}
.grid{
    padding: 0px;
    margin-bottom: 17px;
    /* padding-top: 160px; */
}
.view-container, .view-frame, .game-frame{
    /* height: 100%; */
}
.logo{
    display: block;
    /*  width: 100%; */
    max-width: 100%;
    padding: 15px;
    /* margin-bottom: 25px;  */
}
.sidebar .decimal-dot{
    font-size: 38px;
    line-height: 1px;
}
.lang-de .sidebar .decimal-dot{
    font-size: inherit;
    line-height: inherit;
}

.btn{
    width: 100%;
    padding: 0px 35px;
    margin-bottom: 10px;
}
.btn:hover{
    color: #fff;
}
.btn-inner{
    background-image: url(../images/button2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    font-size: 24px;
    position: relative;
    padding-top: 12px;
    padding-bottom: 27px;
}
.btn .btn-title{
    position: absolute;
    left: 0px;
    right: 0px;
    top: -20px;
    z-index: 99;
}
.btn .btn-val{
    font-size: 18px;
    position: relative;
    z-index: 99;
}
.ticket{
    cursor: pointer;
    list-style: none;
    font-size: 20px;
    /* border: white 3px solid; */
    text-align: center;
    padding: 10px 10px;
    background-image: url(../images/ticket-item.png);
    background-size: 109% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
    //visibility: hidden;
}
.ticket:after{
    transform: rotate(0deg) scale(0);
    visibility: hidden;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../images/cross-big.png);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    left: 0px;
    top: 0px;
    position: absolute;
    transition: transform 0.8s;
}

.ticket.selected-false{
    /* background-color: lightgray; */
}
.ticket.selected-true{
    /* background-color: lightcyan; */
    background-image: url(../images/ticket-item-select.png);
}
.ticket.isMatch-true{
    /* background-color: yellow; */
    background-image: url(../images/ticket-item-draw.png);
    color: #000;
    position: relative;
}
.ticket.isMatch-true:after{
    
    visibility: visible;
    transform: rotate(360deg) scale(1);
    
}
.ticket.selected-true.isMatch-true{
    /* background-color: greenyellow; */
    background-image: url(../images/ticket-item-win.png);
}
.ticket.selected-true.isMatch-true:after{
    display: none;
}
/*
.jackpot-icon{
    background-image: url(../images/jp.png);
    background-size: 100%;
    background-position: center;
    width: 50px;
    height: 50px;
    displaY: inline-block;
}
*/
.no-jackpot .btn.jackpot
{
    display : none;
}
.no-jackpot .btns-container
{
    padding-bottom: 76px;
}
.btn.jackpot .btn-inner:after {
        content: '';
        background-image: url(../images/jp.png);
        background-size: 100%;
        background-position: top;
        width: 53px;
        height: 61%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-41%);
        top: 4px;
        background-repeat: no-repeat;
    }
.particle-canvas{
    display: block;
    z-index: 99999;
    /* background-color: red; */
    position: absolute;
    height: 150px;
    width: 150px;
    left: -53px;
    top: -51px;

    pointer-events: none;
}
.arrow{
    cursor: pointer;
}
.award-table{
    list-style-type: none;
    padding: 0px;
    padding-left: 13px;
    /* padding-top: 160px; */
    color: #fff;
    padding-top: 10px;
}
.award-table .decimal-dot{
    font-size: 30px;
    line-height: 1px;
}
.lang-de .award-table .decimal-dot{
    font-size: inherit;
    line-height: inherit;
}

.award-tile{
    padding: 0px 2px;
    text-align: center;
    color: transparent;
    /* overflow: auto; */
    background-image: url(../images/win-tile-bg.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    border-radius: 15px;
    margin: 10px;
    margin-top: -5px;
    position: relative;
    height: 20px;
    /* overflow: hidden; */
    
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,204,255,0.8);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,204,255,0.8);
    box-shadow: 0px 0px 5px 5px rgba(0,204,255,0.8);
}
.award-tile.active{
    //background-image: url(../images/win-tile-bg-active.png);
}
.award-tile .background{
    width: 100%;
    height: 100%;
    background-image: url(../images/win-tile-bg.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 15px;
}
.award-tile .background1{
    width: 100%;
    height: 100%;
    background-image: url(../images/win-tile-bg-active.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    border-radius: 15px;
}
.award-tile .value{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 15px;
    -webkit-text-stroke-width: 0px;
    display: none;
}
.award-tile.isVisible .value{
    -webkit-text-stroke-width: 1px;
    display: block;
}
.award-tile.active .background{
   
}
.award-tile.active .background1{
    display: block;
    -webkit-animation: flash 1s infinite linear;
}
.award-tile.isVisible{
    color: #fff;
}
.award-tile:first-child{
    display: none;
}
.award-table .award-tile .value:before{
    
}
.award-tile .index{
    position: absolute;
    left: 0px;
    top: -2px;
    //padding:5%;
    background-image: url(../images/prize-ball.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: block;
    content: '';
    float: left;
    height: 25px;
    width: 25px;
    color: #fff;
}
.balling{
    padding: 0px;
    overflow: hidden;
    padding-right: 45px;
    padding-bottom: 15px;
    padding-top: 19px;
    //height: 100px;
}
.balling .ball{
    width: 40px;
    height: 40px;
    background-color: red;
    border-radius: 100%;
    color: white;
    float: right;
    padding: 10px;
    text-align: center;
    right: 105%;
    position: relative;
    transition: transform 4s linear, right 4s linear;
    font-weight: 900;
    text-decoration: underline;
    background-image: url(../images/BallResult.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
}
.balling .ball .ball-val{
    transform: rotate(0deg);
    transition: transform 4s linear, right 4s linear;
    position: relative;
}
.balling .ball.is-drawn-true{
    right: 0%;
}
.balling .ball.is-drawn-true .ball-val{
    transform: rotate(720deg);
}
.balling .ball.is-match-true{
    background-color: greenyellow;
    background-image: url(../images/BallResultGreen.png);
}
.draw-area-top{
    height: 84px;
}
/** diags **/
.ngdialog .decimal-dot{
    font-size: 40px;
    line-height: 1px;
}
.lang-de .ngdialog .decimal-dot{
    font-size: inherit;
    line-height: inherit;
}

.auto-diag{
    padding: 0px;
    list-style-type: none;
}
.auto-diag .auto-number{
    width: 50%;
    padding: 1px 4px;
    float: left;
    text-align: center;
    cursor: pointer;
}
.auto-diag .auto-number span{
    padding: 5px;
    background-color: lightgray;
    width: 100%;
    display: block;
    background-image: url(../images/button3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 57px;
    text-align: center;
    padding: 5px 20px;
    padding-bottom: 10px;
    font-family: GROBOLD;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    background-color: transparent;
}
.auto-diag .auto-number span:hover{
    background-image: url(../images/button3-hover.png);
}
.ngdialog-content{
    overflow: auto;
}
.btn1{
    cursor: pointer;
    //text-transform: capitalize;
}
.btn1:hover{
    color: #fff;
}
.btn1-inner{
    background-image: url(../images/button1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    /* font-size: 24px; */
    position: relative;
    padding-top: 15px;
    padding-bottom: 57px;
    text-align: center;
    display: table;
    padding: 0px;
    height: 68px;
    padding-bottom: 13px;
}
.btn1-inner:hover{
    background-image: url(../images/button1-hover.png);
}
.btn1 .btn-title{
    /* position: absolute; */
    left: 0px;
    right: 0px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    text-transform: uppercase;
}
.btn1.stop-auto .btn1-inner{
    background-image: url(../images/button1-ap.png);
}
.btn1.stop-auto .btn1-inner:hover{
    background-image: url(../images/button1-ap-hover.png);
}
.controls{
    width: 100%;
    max-width: 900px;
    display: table;
    float: left;
    position: relative;
    /* margin: auto; */
    /* margin-top: 15px; */
}
.controls .game-session-id{
    position: absolute;
    bottom: -1px;
    right: 5px;
    font-size: 12px;
    z-index: 99;
}
.controls .game-session-id .decimal{
    font-size: 20px;
    line-height: 0px;
}
.controls .game-session-id:before
{
    /*content: '';
    background-image: url(../images/number_sign.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    color: white;
    left: 0px;
    top: 0px;
    z-index: 99999;*/
}
.controls .game-version-id{
    position: absolute;
    bottom: 0px;
    right: 60px;
    font-size: 10px;
    display: none;
}
.controls .game-version-id .decimal{
    font-size: 20px;
    line-height: 0px;
}
.controls ul{
    padding: 0px;
    list-style-type: none;
}
.controls ul li{
    width: 25%;
    float: left;
    font-size: 18px;
    padding: 0px 2px;
}
.controls .controls-inner{
    padding-left: 0px;
}
.controls .btn{
    margin-top: 0px;
    //text-transform: capitalize;
}
.controls-item.start-item{
    /* width: 22%; */
    font-size: 27px;
    /* margin-top: -2px; */
    /* padding-right: 47px; */
}
.controls .btn1.start{ 
    /* margin-top: -19px; */
}
.controls .btn1.start .btn1-inner{
    /*
    padding-top: 17px;
    padding-bottom: 56px;
    */
}
.stake-inner{
    position: relative;
}
.stake .img-container{
    position: absolute;
    top: 50%;
    bottom: 0px;
    display: block;
    height: 40px;
    width: 20px;
    float: none;
}
.stake img{
    /*
    float: left;
    width: 14%;
    padding-top: 18px;
    cursor: pointer;
    margin-right: -9px;
    margin-left: -8px;
    z-index: 9999;
    position: absolute;
    top: 0px;
    */
    padding: 0px;
    height: 100%;
    position: relative;
    margin: 0px;
    max-width: 100%;
    width: auto;
    padding-top: 0px !important;
    z-index: 9999;
    top: -68%;
}
.stake .img-container:first-child{
    left: -15px;
}
.stake .img-container:last-child{
    right: -15px;
}
.stake .btn{
    float: left;
    width: 70%;
    padding: 0px;
}
.config{
    padding-left: 23px;
    padding-top: 34px;
}
html.home .config .home-btn
{
    display: block;
}
.home-btn{
    background-image: url(../images/button-home.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 25px;
    width: 25px;
    display: block;
    cursor: pointer;
    float: left;
    display: none
}
.home-btn:hover{
    background-image: url(../images/button-home-hover.png);
}
.info-btn{
    background-image: url(../images/button-info.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 25px;
    width: 25px;
    display: block;
    cursor: pointer;
    float: left;
}
.info-btn:hover{
    background-image: url(../images/button-info-hover.png);
}
.sound-btn{
    background-image: url(../images/button-sound.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 25px;
    width: 25px;
    display: block;
    cursor: pointer;
    float: left;
    position: relative;
}
.sound-btn:hover{
    background-image: url(../images/button-sound-hover.png);
}
.sound-btn.sound-off:after{
    content: '';
    background-image: url(../images/icon-cross.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    display:block;
}
#ballfan-container1{
    width: 202px;
    height: 188px;
    position: relative;
    pointer-events: none;
}
#ballfan-container1 #ballfan1{
    float: left;
    display: block;
    /* left: 17px; */
    /* top: -62px; */
    position: absolute;
    height: 200px;
    width: 200px;
}
#ballfan-container1 .ballfan-inner{
    display: block;
    position: absolute;
    top: 60px;
    left: -20px;
}
#ballfan-container1 .ballfan-glass{
    width: 910px;
    height: 580px;
    background-image: url(../images/glass1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    top: -454px;
    left: 27px;
}
#ballfan-container1 .canvas-container{
    float: left;
    display: block;
    left: 17px;
    top: -62px;
    position: absolute;
    height: 175px;
    width: 175px;
    overflow: hidden;
}
#ballfan-container1 .balls-container{
    position: absolute;
    left: 200px;
    top: -452px;
    height: 500px;
    width: 750px;
    overflow: hidden;
}
#ballfan-container1 .ball-container{
    position: absolute;
    bottom: 1px;
    left: -24px;
    height: 40px;
    width: 40px;
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform: rotate(45deg);
    display: block;
    
}
#ballfan-container1 .ball-container1{
    /* position: absolute; */
    bottom: 0px;
    height: 40px;
    width: 40px;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform: rotate(0deg);
    display: block;
}
#ballfan-container1 .ball.test{
    left: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 100%;
    color: white;
    float: right;
    padding: 10px;
    text-align: center;
    /* right: 105%; */
    /* position: absolute; */
    transition: transform 4s linear;
    font-weight: 900;
    text-decoration: underline;
    background-image: url(../images/BallResult.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    transform: rotate(0deg);
}
#ballfan-container1 .ball-container .ball.is-match-true{
    background-image: url(../images/BallResultGreen.png);
}
#ballfan-container1 .ball-container.ball1 .ball{
    transform: rotate(0deg);
}
#ballfan-container1 .ball-container.ball2 .ball{
    transform: rotate(390deg);
}
#ballfan-container1 .ball-container.ball3 .ball{
    transform: rotate(410deg);
}
#ballfan-container1 .ball-container.ball4 .ball{
    transform: rotate(340deg);
}
#ballfan-container1 .ball-container.moving1 .ball{
    -webkit-animation: moving1 1s infinite linear;
}
#ballfan-container1 .ball-container.moving2 .ball{
    -webkit-animation: moving2 1s infinite linear;
}
#ballfan-container1 .ball-container.moving3 .ball{
    -webkit-animation: moving3 1s infinite linear;
}
#ballfan-container1 .ball-container.moving4 .ball{
    -webkit-animation: moving4 1s infinite linear;
}
#ballfan-container1 .ball.test.moving{
    /* transform: rotate(1440deg); */
}
#ballfan-container1 .ball .ball-val{
    top: 6px;
    position: absolute;
    left: 8px;
    text-decoration: underline;
}


#ballfan-outer2{
    width: 100%;
    overflow: hidden;
    position: absolute;
    height: 100%;
    left: 0px;
    bottom: 0px;
    pointer-events: none;
    display: none;
}
#ballfan-outer2 #ballfan-container2{
    width: 245px;
    height: 188px;
    position: absolute;
    bottom: -200px;
    left: 50%;
    pointer-events: none;
    /* overflow: hidden; */
}
#ballfan-outer2 #ballfan2{
    float: left;
    display: block;
    /* left: 17px; */
    /* top: -62px; */
    position: absolute;
    height: 200px;
    width: 200px;
}
#ballfan-outer2 .ballfan-inner{
    display: block;
    position: absolute;
    top: 0px;
    left: -50%;
    /* overflow: hidden; */
    width: 245px;
    height: 200px;
}
#ballfan-outer2 .ballfan-inner .ballfan-inner1{
    position: relative;
    height: 200px;
    /* top: 200px; */
}
#ballfan-outer2 .ballfan-glass{
    width: 245px;
    height: 200px;
    background-image: url(../images/glass2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#ballfan-outer2 .canvas-container{
    float: left;
    display: block;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 175px;
    width: 175px;
    overflow: hidden;
}
.mobile-balls{
    display: none;
}
.mobile-balls.balls-container{
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    
}
.mobile-balls .ball-container{
    position: absolute;
    bottom: -40px;
    left: 0px;
    height: 40px;
    width: 40px;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    /* transform: rotate(45deg); */
}
.iphone-orientation-change .mobile-balls .ball-container{
    margin-bottom: -10px;
}
.mobile-balls .ball-container .cross{
    transform: rotate(0deg) scale(0);
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-image: url(../images/cross-big.png);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    left: 0px;
    top: 0px;
    position: absolute;
    transition: transform 0.8s;
    display: block;
}
.mobile-balls .ball-container .cross.animation-finished{
    visibility: visible;
    transform: rotate(360deg) scale(1);
}
.mobile-balls .ball-container .ball.is-match-true .cross.animation-finished{
    display: none;
}
.mobile-balls .ball-container1{
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 40px;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform: rotate(0deg);
}
.mobile-balls .ball.test{
    left: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 100%;
    color: white;
    float: right;
    padding: 5px;
    text-align: center;
    //right: 105%;
    position: absolute;
    transition: transform 4s linear;
    font-weight: 900;
    text-decoration: underline;
    background-image: url(../images/BallResult.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    transform: rotate(0deg);
}
.mobile-balls .ball-container .ball.is-match-true{
    background-image: url(../images/BallResultGreen.png);
}

.ngdialog-overlay{
    /* display: none; */
}
.ngdialog-content{
    box-shadow: 0px 0px 20px 6px;
}
.game-frame{
    position: relative;
}
.config{
    /* margin-top: 10px; */
    padding: 0px;
    display: block;
    top: 0px;
    right: 47px;
    position: absolute;
    z-index: 999;
}
.jackpot-container{
    position: absolute;
    top: 0px;
    width: 100%;
    left: 0px;
    height: 100%;
    z-index: 9999;
    /* display: none; */
    opacity: 0;
    transition: all 0.2s linear;
    pointer-events: none;
}
.jackpot-container.visible{
    opacity: 1;
    display: block;
}
.jackpot-container .jackpot-canvas{
    position: absolute;
    /* top: 0px; */
    width: 100%;
    left: 0px;
    /* height: 100%; */
    top: 50%;
    /* margin-top: -50%; */
    transform: translateY(-50%);
}
.jp-glow-container{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 20% 40%;
}
.jp-glow{
    position: relative;
    left: 0px;
    top: 50px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    /* border: solid green 98px; */
    background-color: rgba(255,255,255, 0.7);
    -webkit-box-shadow: 0px 0px 200px 50px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 200px 50px rgba(255,255,255,1);
    box-shadow: 0px 0px 200px 50px rgba(255,255,255,1);
}

@-webkit-keyframes flash {
  0% {
    opacity: 0;
    //background-image: url(../images/win-tile-bg.png);
  }
  50%{
    opacity: 1;
    //background-image: url(../images/win-tile-bg-active.png);
  }
  100% {
    opacity: 0;
    //background-image: url(../images/win-tile-bg.png);
  }
}

@-webkit-keyframes moving1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes moving2 {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(390deg);
  }
}
@-webkit-keyframes moving3 {
  0% {
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(410deg);
  }
}
@-webkit-keyframes moving4 {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(340deg);
  }
}

@media (min-width: 1200px){
    .container {
        width: 970px;
    } 
}

@media (max-width: 992px){
    .logo-container{
        text-align: center;
        /* padding-left: 50px; */
        
        float: left;
        width: 25%;
        margin-top: 10px;
    }
    
    .logo{
        display: block;
        /*  width: 100%; */
        max-width: 100%;
        padding: 0px;
        margin-bottom: 25px; 
        height: 100px;
        display: inline-block;
    }
    .btns-container{
        float: left;
        width: 75%;
        padding-right: 50px;
        margin-top: 24px;
    }
    .config{
        margin-top: 26px;
        right: 0px;
    }

    .home-btn
    {
        clear: both;
    }

    .no-jackpot .btns-container
    {
        padding-bottom: 0px;
    }
    .btn{
        width: 24%;
        padding: 0px 4px;
    }
    .no-jackpot .btn
    {
        width : 32%;
    }
    #ballfan-container1{
        display: none;
    }
    .draw-area-top{
        display: none;
    }
    .award-table{
        /* display: none; */
        padding-left: 14px;
    }
    .controls .config{
        display: none;
    }
    .controls ul li.controls-item{
        font-size: 20px;
    }
    .controls ul li.controls-item.start-item{
        font-size: 24px;
    }
    .stake .img-container{
        height: 30px;
    }
    .stake img{
        top: -75%
    }
    .stake .img-container:first-child{
        left: -11px;
    }
    .stake .img-container:last-child{
        right: -11px;
    }
    .particle-cnvas{
        height: 100px;
        width: 100px;
        left: -31px;
        top: -32px;
    }
    .mobile-balls{
        display: block;
    }
    #ballfan-outer2{
        display: block;
    }
    .ticket.isMatch-true:after{
        display: none;
    }
    .btn.jackpot .btn-inner:after {
        content: '';
        background-image: url(../images/jp.png);
        background-size: 100%;
        background-position: top;
        width: 53px;
        height: 61%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-41%);
        top: 4px;
        background-repeat: no-repeat;
    }
}
@media (max-width: 992px){
    .award-table{
        padding-top: 0px;
    }
    .award-tile{
        margin: 10px 0px;
    }
    .award-tile{
        margin: 0px;
    }
    .award-tile .index{
        left: -10px;
        height: 20px;
        width: 20px;
        font-size: 11px;
    }
    .ticket{
        font-size: 12px;
        padding: 10px 0px;
    }
    .logo{
        display: inline;
        margin-bottom: 0px;
        height: 90px;

        margin-bottom: 10px;
        height: 80px;
    }
    
}
@media (max-width: 768px){
    .logo-container{
        float: left;
        width: 25%;
        margin-top: 10px;
    }
    .btns-container{
        float: left;
        width: 75%;
        padding-right: 50px;
        margin-top: 28px;
    }
    .config{
        margin-top: 28px;
    }
    .btn{
        width: 24%;
        padding: 0px 4px;
    }
    .btn-inner{
        font-size: 18px;
    }
    .btn-inner .btn-val{
        font-size: 15px;
        
    }
    .controls ul li{
        /* width: 26%; */
    }
    .controls ul li.controls-item{
        font-size: 13px;
    }
    .controls ul li.controls-item.start-item{
        font-size: 16px;
    }
    .award-tile.isVisible .value{
        font-size: 11px;
        padding-left: 6px;
    }
}
@media (max-width: 540px){
    .row .config{
        margin-top: 14px;
    }
    .config span{
        /* float: none; */

    }
    html.home .config span{
        clear: none;
    }
    .logo-continer{
        margin-top: 22px;
    }
    .sidebar .btns-container{
        margin-top: 14px;
        padding-right: 29px;
    }
    .btns-container .btn{
        width: 48%;
        margin-bottom: 5px;
    }
    .btns-container .btn .btn-inner{
        font-size: 16px;
        padding-top: 3px;
        padding-bottom: 11px;
    }
    .btns-container .btn .btn-inner .btn-title{
        top: -14px;
    }
    .btns-container .btn .btn-inner .btn-val{
        font-size: 13px;
    }
    .btn.jackpot .btn-inner:after{
        width: 25px;
        height: 90%;
    }
    .stake img {
        top: -63%;
    }
    .btn.jackpot .btn-inner:after {
        width: 33px;
        height: 76%;
        top: -2px;
    }
    .info-diag-content{
        font-size: 11px;
    }
    html body .ngdialog.ngdialog-theme-default {
         padding-bottom: 0px;
         padding-top: 0px;
    }
    html body .ngdialog.ngdialog-theme-default .ngdialog-content{
        height: 100%;
        width: 100%;
        top: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        position: absolute;
        line-height: 14px;
        padding-top: 10px;
    }


}
@media (max-width: 350px){
    .award-tile.isVisible .value{
        font-size: 10px;
        padding-left: 8px;
    }
    .award-tile .index {
        width: 13px;
    }
    .award-tile.isVisible .value {
        padding-left: 3px;
        text-align: left;
    }
    .controls .controls-inner
    {
        margin-top: -7px;
    }
    .controls .game-session-id
    {
        bottom: -3px;
    }
    .controls .game-version-id
    {
        bottom: -3px;
        right: auto;
        left: 4px;
    }
    .stake img
    {
        max-width: 60%;
        height: 86%;
        padding-top: 5px !important;
    }
    .btn1 .btn-title
    {
        line-height: 0.8em;
        font-size: 12px;
    }
    .ngdialog.ngdialog-theme-default
    {
        padding-top: 248px;
    }
    .container
    {
        padding-left: 5px;
        padding-right: 5px;
    }
    .ticket-grid
    {
        width: 70%;
    }
    .award-table
    {
        width: 30%;
    }
    .sound-btn
    {
        margin-top: 11px;
    }
    html.home .sound-btn
    {
        margin-top: 0px;
    }
    html.home .config span.home-btn {
        clear: both;
    }
    .btns-container .btn .btn-inner .btn-val
    {
        font-size: 11px;
    }
    .btn
    {
        padding: 0px 0px;
    }
}
@media (max-height: 400px) and (max-width: 992px){
    
    .logo{
        display: inline;
        margin-bottom: 0px;
        height: 90px;
        
        margin-bottom: 0px;
        height: 67px;
    }
    .config{
        margin-top: 38px;
    }
    /*html.home .config{
        margin-top: 38px;
    }*/
    .controls .btn1 .btn1-inner{
        height: 42px;
    }
    .award-tile{
        height: 13px;
    }
    .ticket{
        padding: 4px 0px;
    }
    .btn-inner{
        padding-top: 4px;
        padding-bottom: 15px;
    }
    .btns-container{
        margin-top: 39px;
    }
    .btns-container .btn .btn-inner{
        font-size: 16px;
        padding-top: 1px;
        padding-bottom: 9px;
    }
    
    .award-tile .value{
        font-size: 12px;
        margin-top: -1px;
    }
    .award-tile{
        -webkit-box-shadow: 0px 0px 2px 2px rgba(0,204,255,0.8);
        -moz-box-shadow: 0px 0px 5px 5px rgba(0,204,255,0.8);
        box-shadow: 0px 0px 2px 2px rgba(0,204,255,0.8);
    }
    .controls .btn1 .btn1-inner{
        padding-bottom: 8px;
    }
    .btn.jackpot .btn-inner:after {
        width: 33px;
        height: 76%;
        top: -2px;
    }

    
}
@media (max-height: 400px) and (max-width: 768px){
    /*
    .logo{
        margin-bottom: 0px;
        height: 67px;
    }
    */
    .btn-inner .btn-val {
        font-size: 12px;
    }
}

@media (max-height: 400px) and (max-width: 540px){
    html.home .home-btn {
        clear: both;
        float: right;
    }
}

@media (max-height: 400px){

    html body .ngdialog.ngdialog-theme-default {
        padding-bottom: 0px;
        padding-top: 0px;
    }
    html body .ngdialog.ngdialog-theme-default .ngdialog-content{
        height: 100%;
        width: 100%;
        top: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        position: absolute;
        line-height: 14px;
        padding-top: 10px;
    }
    html.home .config .home-btn{
        clear: none;
    }

    html.home .btns-container{
        padding-right: 75px;
    }
}

@media (max-width: 540px) and (min-height: 400px){
    html.home .config span {
        clear: both;
    }

}