@media only screen and (max-width: 768px) {

#nav{
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index:1200;
}

#gameType{
	background-color:#eee100;
	position: fixed;
	top: 50px;
	left:0px;
	width: 100%;
	z-index:1200;
}

.gameTypeListDiv{
	border-radius: 15px 15px 0px 0px;
	overflow:hidden;
	box-shadow:none;
}
.gameTypeListDiv .btn{
	font-size:14px;
	line-height:20px;
	background-color:#FFF;
	border:0px;
	color:#666;
	border-radius:0px;
	padding:7px 5px;
}
.gameTypeListDiv .btn.active,
.gameTypeListDiv .btn:hover{
	background-color:#FFF;
	color:#000;
}
.gameTypeListDiv .btn.active:before,
.gameTypeListDiv .btn:hover:before {
	content : "";
	position: absolute;
	left    : 40%;
	bottom  : 0;
	height  : 5px;
	width   : 20%;
	border-bottom:5px solid #eee100;
}

#index,
#history,
#miss,
#rules{
	margin-top:84px;
}

#statHeader{
	margin-top:120px;
}

#index,
#historyData,
#statData,
#missData,
#rules{
	margin-bottom:80px;
}

#index .mainGame{
	margin-top:0px;
}

#index .mainGame .roundCover{
	border-radius:0px;
	border:0px!important;
}

#index .rounded-circle{
	border-radius:15px!important;
}

#index .mainGame .eventInfo{
	border:0px;
}

#index .eventName{
	line-height:32px;
	padding:0px;
}

#index .mainGame .videoCover{
	min-height:200px;
}

.videoCover{
	min-height:200px;
}

#index .mainGame .border-top{
	border-top:0px!important;
	border-left:1px solid #dee2e6!important;
}

#index .gameDivCover{
	margin:15px 0px;
}

#index .eventName{
	margin-bottom:10px;
}

#index .eventVal{
	margin-bottom:10px;
	padding:0px;
}

#index .dateVal .col-6{
	padding:0px;
}

#index .gameDivCover .rounded{
	border:0px!important;
}

#index .gameDivCover .roundCover{
	border:1px solid #dee2e6!important;
	border-radius:0.25rem!important;
}

.bottomDiv{
	border-top:1px solid #dee2e6!important;
	font-size:12px;
	text-align:center;
	position: fixed;
	left:0px;
	bottom: 0;
	width: 100%;
	background-color:#FFF;
	z-index:1200
}
.bottomDiv .navItm{
	padding:0px;
}
.bottomDiv .navItm .nav-link{
	color:#000;
	padding:10px 0px 15px 0px;
}
.bottomDiv .navItm.active .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0px;
    width: 10%;
    left: 40%;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #F00;
}

#history{
	position:fixed;
	width:100%;
	left:0px;
	z-index:1200;
}

#historyData{
	margin-top:130px;
}

#history .filterOptDiv{
	position:relative;
}

#history .filterYear{
	position:absolute;
	top:0px;
	left:-100vw;
	z-index:1200;
	background-color:#FFF;
	box-shadow: 0px 5px 5px #00000033;
	height:50vh;
}
#history .filterYear .btn{
	width:15.5%;
}

#history .filterPos{
	position:absolute;
	top:0px;
	left:-100vw;
	z-index:1200;
	background-color:#FFF;
	box-shadow: 0px 5px 5px #00000033;
	height:50vh;
}

#history .filterPos .btn{
	width:24%;
}

#history .filterAnimal{
	position:absolute;
	top:0px;
	left:-100vw;
	z-index:1200;
	background-color:#FFF;
	box-shadow: 0px 5px 5px #00000033;
	height:50vh;
}

#history .filterAnimal .btn{
	width:15.5%;
}
#history .filterAnimal .btn#zodiacreset{
	width:100%;
}

#historyData .tbRow{
	box-shadow: 5px 5px 5px #00000033;
	margin-bottom:10px;
}
#historyData .tbRow>div.eventDetails{
	border:0px;
	margin-top:10px;
}
#historyData .tbRow>div.eventDetails .eventNo{
	border:0px;
	line-height:30px;
	text-align:left;
	padding:0px;
	padding-left:10px;
}
#historyData .tbRow>div.eventDetails .eventReferenceDate{
	border:0px;
	line-height:30px;
	text-align:right;
	padding:0px;
	padding-right:10px;
}
#historyData .tbRow>div.stdnoResult{
	border-left:0px; 
	border-right:0px; 
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
}
#historyData .tbRow>div.exnoResult{
	border-left:1px solid #dee2e6; 
	border-right:0px;
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
}
#historyData .tbRow>div.dashed{
	border-bottom: 1px dashed #dee2e6;
	padding:0 5px;
	margin-top:5px;
	margin-bottom:5px;
}
#historyData .tbRow>div.oeResult{
	border-right:0px;
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
#historyData .tbRow>div.ouResult{
	border-left:1px solid #dee2e6; 
	border-right:0px;
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
#historyData .tbRow>div.totalSumOeResult{
	border-left:1px solid #dee2e6; 
	border-right:0px;
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
#historyData .tbRow>div.totalSumOuResult{
	border-left:1px solid #dee2e6; 
	border-right:0px;
	border-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
#historyData .tbRow>div .title{
	font-size:12px;
	font-weight:normal;
}

#stat .statOptDiv{
	position:absolute;
	top:0px;
	left:-100vw;
	z-index:1400;
	background-color:#FFF;
	box-shadow: 5px 5px 5px #00000033;
	height:100vh;
	width:100vw;
}

#statHeader .chartTitle h3{
	font-size:16px;
	margin:0px;
	line-height:30px;
}
#statHeader .chartTitle h3:after{
	content:none;
}

#statData .roadSheet td{
	padding:0px;
	text-align:center;
}

#miss .marketopt.btn-yellow{
	background-color:#f6f07f;
}

#miss .selection01>div>div th,
#miss .selection01>div>div td,
#miss .selection02>div>div th,
#miss .selection02>div>div td{
padding:3px 0px;
}

#miss .selection01>div>div:nth-child(2),
#miss .selection02>div>div:nth-child(2){
	border-top:0px;
}

#miss .selection01>div>div:nth-child(odd),
#miss .selection02>div>div:nth-child(odd){
	border-bottom:1px solid #efeded;
	border-left:1px solid #efeded;
	border-right:1px solid #efeded;
}

#miss .selection01>div>div:nth-child(even),
#miss .selection02>div>div:nth-child(even){
	border-bottom:1px solid #efeded;
	border-left:1px solid #efeded;
	border-right:1px solid #efeded;
}

#miss .selection03>div>div:nth-child(7){
	border-left:1px solid #efeded;
}

#miss .selection04>div>div:nth-child(7){
	border-left:1px solid #efeded;
}

#miss .typeopt:nth-child(1),
#miss .typeopt:nth-child(2){
	width:21%;
}
#miss .typeopt:nth-child(3),
#miss .typeopt:nth-child(4){
	width:26.4%;
}

#miss .market01 .btn{
	width:32%;
}
#miss .market02 .btn{
	width:32%;
}
#miss .market03 .btn{
	width:24%;
}
#miss .market04 .btn{
	width:24%;
}

#rulesData .rulesHeader{
	text-align:center;
}

.headerLogo{
	height:120px;
	vertical-align:top;
	margin-top:10px;
}
}