/* game page */

.container-game { width: auto; height: auto; }
.game-page { background-color: #0d47a1; min-height: 100vh; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; }
.game-header { background: #fff; box-shadow: 0 2px 11px 0 rgba(8,52,121,.4); padding-left: 20px; padding-right: 17px; height: auto; /*50px;*/ }
.game-right a { line-height: 3.5; }
.game-right a.btn-xs { padding: 0px 20px; border-radius: 20px;}
.game-bar { margin: 0 auto; padding: 10px 0; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.game-left { display: grid; align-items: center; }
.game-left span { color: #42a5f5; font-size: 15px; float: left; margin: 2px 4px 0 0; }
.game-bar h1 { color: #2e303b; font-size: 20px; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; padding: 0; margin: 0 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-right { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: flex; }
.game-right a span, .game-right a { transition: all 0.25s ease; }
.game-right a:hover span { color: #0d47a1; transition: all 0.25s ease; }
.game-right a:hover.btn-money { color: #fff; background: #0d47a1; transition: all 0.25s ease; }
.game-right .btn-money { background-color: #42a5f5; color: #fff; font-family: Graphik-Semibold, HelveticaNeue-Light, sans-serif; font-size: 13px; text-transform: uppercase; padding: 18px 25px; margin: 0 20px 0 0; border: 0; outline: 0; letter-spacing: 2px; text-decoration: none; border-radius: 25px; }
.game-right .btn-close { cursor: pointer; text-decoration: none; align-items: center; display: flex; padding: 0px 13px; border-radius: 50px; background-color: #97989d; }
.game-right .btn-close span { color: #FFF; font-size: 20px; }
.game-right .btn-icons span { color: #97989d; font-size: 46px; margin-right: 20px; cursor: pointer; text-decoration: none; display: flex; align-self: center; }
.game-bar p { color: #717275; font-size: 13px; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; padding: 0; margin: 2px 0 0; -ms-flex-item-align: center; align-self: center; }
.game-center .right { padding: 0; height: calc(100vh - 70px); -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 30px; transition: width .3s cubic-bezier(.6, -.28, .74, .05); overflow: hidden; width: 300px; }
.game-center .right.active { width: 30px; }
.game-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; background-repeat: no-repeat; flex-direction: row; }
.game-center .left { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; padding: 5px; }
.game-center .game { height: calc(100vh - 60px);/*position: relative;*/}
.game-center .right .right-button { height: 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; background-color: rgba(6,39,92,.5); cursor: pointer; border: 0; width: 30px; padding: 0; margin: 0; display: block; transition: height .2s cubic-bezier(0, .75, .5, 1.02), background-color .4s cubic-bezier(0, .15, .5, 1.02); box-shadow: inset 0 1px 42px 0 rgba(0,0,0,.1); will-change: background-color, heigth; text-decoration: none; text-align: center; align-items: center; display: flex; }
.game-center .right .right-button:hover { background-color: #0f65f0; }
.game-center .right .winners { padding: 20px; background-color: #06275c; }
.game-center .right .winners h4 { color: #fff; text-align: center; line-height: 13px; text-transform: uppercase; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; font-size: 13px; letter-spacing: .46px; }
.game-center .right .middle { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; background-color: #053786; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 10px 20px; }
.game-center .right .info { background-color: #053786; padding: 10px 20px; color: #fff; font-size: 11px; line-height: 1.3; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; font-weight: 400; border-top: 1px solid rgb(6, 39, 92); }
.game-center .right .info h2 { font-size: 16px; color: #42a5f5; line-height: 1.2; padding: 15px 0; }
.game-center .right .info p { line-height: 1.8; }
.game-center .right .bottom { padding: 10px; color: #fff; background-color: #06275c; font-family: Graphik-Semibold, HelveticaNeue-Light, sans-serif; text-transform: uppercase; width: 100%; }
.game-center .right .right-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; height: 100%; min-width: 30px; position: relative; }
.game-center .right .right-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; }
.game-center .right .right-content { width: calc(100% - 30px); overflow: hidden; position: absolute; top: 0; bottom: 0; left: 30px; }
.right .right-button span { color: #fff; align-items: center; margin: auto; transform: rotate(0deg); transition: all 0.25s ease; font-size: 16px; }
.right.active .right-button span { transform: rotate(180deg); transition: all 0.25s ease; }
.winners-list .g1 { float: left; width: 50%; overflow: hidden; }
.winners-list .g2 { float: right; width: 50%; overflow: hidden; }
.winners-list a { width: 100%; cursor: pointer; }
ul.winners-list { margin: 0; padding: 0; font-family: Graphik-Semibold, HelveticaNeue-Light, sans-serif; max-height: 610px; overflow: hidden; transition: all 0.5s ease-out; position: relative; }
ul.winners-list::after { content: ""; position: absolute; cursor: pointer; right: 0; bottom: 0; background: linear-gradient(hsla(0,0%,100%,0) 0, #053786 50%); width: 100%; height: 100px; border: 0; padding: 0 10px 0 0; margin: 0; text-align: right; z-index: 999; }
ul.winners-list li { display: flex; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); list-style: none; align-items: center; }
ul.winners-list li:last-child { border-bottom: 0; }
.winners-list h2 { font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; text-align: left; color: #42a5f5; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winners-list p { font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; text-align: left; color: #fff; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winners-list .g2 { font-size: 13px; font-weight: 600; line-height: 1.13; letter-spacing: 0.6px; text-align: right; color: #ffffff; }
.newScoreAdd { animation: pulse2 0.7s cubic-bezier(0, 0, 0.8, 1); transform-origin: 100% 0; }
@keyframes pulse2 {  
    from {transform: translate3d(-0, -10px, 0);opacity: 0;background: #fff;margin-top: -50px;}
    to { transform: translate3d(0, 0, 0); opacity: 1; background: transparent; margin-top: 0; }
}
#games-area .row { display: -ms-grid; display: grid; -ms-grid-columns: (calc(50% - 5px))[2]; grid-template-columns: repeat(4, calc(50% - 88px)); -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 10px; margin-bottom: 10px; }
#tournament-games #flex-box { position: relative; top: 0px; display: inline-block; width: calc(25% - 7px ); margin-bottom: 40px; float: left; margin-right: 7px; }
#flex-box .game-listing { position: relative; will-change: transform; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-shadow: 0 4px 7px 0 rgba(0,0,0,.05); width: 100%; }
#flex-box .game-image-container { position: relative; will-change: transform; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-shadow: 0 4px 7px 0 rgba(0,0,0,.05); }
#flex-box a:active, #flex-box a:hover { outline-width: 0; }
#flex-box a:hover { text-decoration: underline; }
#flex-box .game-image { position: relative; height: 0; padding-bottom: 79.2%; background-color: #e8e8e8; overflow: hidden; }
#flex-box a:hover .game-image img { -webkit-transform: scale(1.1); transform: scale(1.1); }
#flex-box .game-image img, #flex-box .game-image:after { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
#flex-box .game-image img { width: 100%; height: 100%; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
#flex-box .game-image:after { content: ""; background-color: transparent; background-repeat: no-repeat; background-position: 50%; background-image: url(../../images/play.svg); background-size: 25%; opacity: 0; transition: opacity .2s cubic-bezier(.2, 0, .5, 1); }
#flex-box .game-image img, #flex-box .game-image:after { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
#flex-box a:hover .game-image:after { background-color: rgba(0,0,0,.4); opacity: 1; }
#games-area h3 { -ms-flex-item-align: start; align-self: flex-start; letter-spacing: .92px; font-size: 11px; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; margin: 0 0 10px; width: 100%; }
/*pie chart */
.chart canvas { position: absolute; left: -3px; top: -3px; border-radius: 25px; }
.chart span { position: relative; color: #2c63bc; font-family: Graphik-Semibold, HelveticaNeue-Light, sans-serif; font-size: 12px; text-align: center; top: 16px; display: block; z-index: 2; }
.chart { position: relative; /* left: 0; */
width: 48px; float: left; background: #fff; height: 49px; border-radius: 25px; box-sizing: border-box; border: 2px solid #2c63bc; margin-right: 10px; }
.infoBar { width: 270px; border-radius: 30px; background-color: #ECF6FE; color: #0d47a1; font-size: 12px; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; line-height: 1.3; transition: all 0.35s ease; margin-right: 20px; padding: 0px; }
.infoBar p { color: #0d47a1; font-size: 12px; font-family: Graphik-Medium, HelveticaNeue-Light, sans-serif; line-height: 1.3; margin-top: 10px; }



@media (max-width: 991px) {

}

@media (max-width: 899px) {
    /* .game-header { height: 70px; } */
    .game-center .game { /*position: relative;*/ }

}

@media (max-width: 767px) {
    .game-left {
        max-width: 45%;
    }

    header .btn-login, header .btn-singup {
        padding: 2px 15px;
    }
}

@media (max-width: 699px) {

}

@media (max-width: 680px) {
    #gameplayiframe { position: absolute; top: 50px; /*5px*/ left: 0; width: 100%; min-height: 70vh; /*90vh*/ bottom: 0; height: calc(100% - 50px) !important; }
    .game-right a { line-height: 2.7; margin: 0}
    .game-right a:last-child { margin-right: 5px; }
    #root.gamemaster { margin-top: 0 !important; }
    .game-right .btn-money { padding: 12px 15px; }
    .game-header { height: 50px; position: absolute;/*relative*/ top: 0; z-index: 9999; width: 100%; /*padding-top: 5px;*/ }
    .game-bar h1 { font-size: 14px; }
    .game-bar { padding: 0; margin: 0; margin-top: 7px; }
    .game-header .game-right .btn-icons { display: none; }
    .game-center { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; }
    /*.game-center .game {height: 100vh;}*/
    .game-center .right { display: none; }
    .game-center .left { width: 100%; padding: 0; }
    .game-center .game { /*height: calc(100vh - 45px); position: relative; */}
    .game-right .btn-close { padding: 0px 9px}
}

@media (max-width: 599px) {

}

@media (max-width: 499px) {

}

@media (max-width: 399px) {
    .game-left {
        max-width: 40%;
    }
}

@media only screen and (max-device-width: 1368px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
    .auto-hide .game-header {
        opacity: 0%;
        filter: opacity(0%);
        height: 5px;
    }
}
/* not sure that -webkit-device-pixel-ratio: 3 works with -webkit-device-pixel-ratio: 2 hence replicating*/
@media only screen and (max-device-width: 1368px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
    .auto-hide .game-header {
        opacity: 0%;
        filter: opacity(0%);
        height: 5px;
    }
}