html, body {
    -ms-touch-action: none;
    background: #111;
    padding: 0;
    border: 0;
    margin: 0;
    height: 100%;
    -webkit-touch-callout: none !important;
}

canvas {
    /*background-color: #111;*/
}

div#game:-webkit-full-screen
{
    /*position: absolute;
    width: 100%;
    height: 100%;*/
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

/*
div#game #logo {
    position: absolute;
    width: 100%;
    height: 100%; 
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/logo.png");
}

#loading {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100px;
    background-image: url('../images/LoadingIndicator.gif');
    background-position: center top;
    background-repeat: no-repeat;
    background-color: transparent;

}
#msg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 90px;
    line-height: 90px;
    text-align:center;
    color:#FFFFFF;
}
*/
#msg {
    color:#FFFFFF;
}

@media screen and (orientation: portrait) {
    #logo {
        position: fixed;
        width: 100%;
        height: 60%;
        background-repeat: no-repeat;
        background-position: center top 90%;
    }
    
    #loading {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20%;
        background-image: url('../images/LoadingIndicator.gif');
        background-position: center top 20%;
        background-size: auto 20%;
        background-repeat: no-repeat;
        background-color: transparent;
            
    }
	#msg {
		position: fixed;
		bottom: 8%;
		left: 0px;
		right: 0px;
		text-align:center;
	}

    #poweredby {
        position: fixed;
        bottom: 20%;
        width: 100%;
        height: 20%;
        background-image: url('poweredby.png');
        background-position: top right 15%;
        background-repeat: no-repeat;
        background-color: transparent;
    }
}
@media screen and (orientation: landscape) {
    #logo {
        position: fixed;
        width: 99%;
        height: 70%;
        background-repeat: no-repeat;
        background-position: center top 80%;
    }
    
    #loading {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        height: 25%;
        background-image: url('../images/LoadingIndicator.gif');
        background-position: center top 20%;
        background-size: auto 20%;
        background-repeat: no-repeat;
        background-color: transparent;
    }
	#msg {
		position: fixed;
		bottom: 10%;
		left: 0px;
		right: 0px;
		text-align:center;
	}
    #poweredby {
        position: fixed;
        right: 36px;
        bottom: 0px;
        width: 152px;
        height: 25%;
        /*background-image: url('poweredby.png');*/
        background-position: center bottom 20px;
        background-repeat: no-repeat;
        background-color: transparent;
    }
}

#iphone-tips {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    max-height: 600px;
    margin: auto;
    visibility: hidden;
    touch-action: pan-y;
}

#iphone-tips-drag-animation {
    margin: auto;
    display: table-cell;
    height: 100%;
}
#iphone-tips-close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15%;
}


#iosTips {
	touch-action: pan-y;
}

#chrome-tips {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    max-height: 600px;
    margin: auto;
    visibility: hidden;
}

#android-chrome-tips-doubletap-animation {
    margin: auto;
    display: table-cell;
    height: 100%;
}
#android-chrome-tips-close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15%;
}


@media (orientation: portrait) {
    #iphone-tips {
        display: none;
    }
    #chrome-tips {
        display: none;
    }
}

@media screen and (max-height: 271px) and (orientation: landscape) {
    #logo {
		background-size:auto 100%;
    }
}
@media screen and (max-height: 308px) and (orientation: landscape) {
    #loading {
        background-position: center top 10%;
		background-size:auto 25%;
	}
    #poweredby {
		background-size:auto 74%;
        background-position: center bottom 100%;
    }
}





#slotDetailLayer {
    display: none;
}

#slotDetailTop {
	position: absolute;
    width: 100%;
    height: 12vh;
    background-color: #f5333f;
    font-size: 30px;
    display: flex;
 
}
#slotDetail {
    width: 100%;
    height: 88vh;
    border: 0px;
    margin-top: 12vh;
}

#slotDetail-back-btn {
    background: url(../images/ic_keyboard_arrow_left_white.png) no-repeat center center;
    height: 12vh;
    width: 10vw;
}

#slotDetail-close-btn {
    background: url(../images/ic_close_white.png) no-repeat center center;
    height: 12vh;
    width: 10vw;

}

.forIOS13Safari {
    margin-top: 50px;
}

#slotDetail-title {
    width: 80vw;
    text-align: left;
    height: 12vh;
    display: table;
}

#slotDetail-title-text {
	font-family: "Arial";
    font-size: 6vh;
    color: #FFFFFF;
    display: table-cell;
    vertical-align: middle;
}

@media (orientation: portrait) {
    #slotDetailTop {
        height: 6vh;
    
    }
    #slotDetail {
        height: 80vh;
        margin-top: 6vh;
    }

    #slotDetail-back-btn {
        height: 6vh;
        width: 15vw;
    }

    #slotDetail-close-btn {
        height: 6vh;
        width: 15vw;

    }

    #slotDetail-title {
        height: 6vh;
        width: 70vw;
    }
    #slotDetail-title-text {
        font-size: 3vh;
    }
}