html {
	background: none;
}
html, body {
	height:100%;
}
body {
	background-color: #FFF;
	overflow:auto;
	overflow:initial;
}

.hiddenItm{
	display:none;
}

.headerLogo{
	height:70px;
	vertical-align:text-top;
}

@media only screen and (max-width: 768px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
 
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
 
#no-more-tables tr { border: 1px solid #ccc; }
  
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
white-space: normal;
text-align:left;
}
 
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0px;
left: 5px;
width: 30%;
padding-right: 0px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
 
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }

.table-sm td, .table-sm th{
	padding:0px;
}

}

.opacity-20{
	opacity:0.2;
}

.w20{
	width:20%;
}
.w80{
	width:80%;
}
.w100{
	width:100%;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 1400px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

#button-bar {
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

.clickable{
	cursor: pointer;
}

.ballopt{
	cursor:pointer;
}


.ball {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	font-family: arial;
	font-size:14px;
	line-height:26px;
	color:#000;
	font-weight:bold;
	font-family:arial;
	background-image: url("../images/ball_red_bg.png");
	background-size: contain;
	text-align:center;
	position:relative;
}

.ball {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	font-family: arial;
	font-size:14px;
	line-height:26px;
	color:#000;
	font-weight:bold;
	font-family:arial;
	background-image: url("../images/ball_red_bg.png");
	background-size: contain;
	text-align:center;
	position:relative;
}

.b01, .b02, .b07, .b08, .b12, .b13, .b18, .b19, .b23, .b24, .b29, .b30, .b34, .b35, .b40, .b45, .b46 {
	background-image: url("../images/ball_red_bg.png");
}
.b03, .b04, .b09, .b10, .b14, .b15, .b20, .b25, .b26, .b31, .b36, .b37, .b41, .b42, .b47, .b48 {
	background-image: url("../images/ball_blue_bg.png");
}
.b05, .b06, .b11, .b16, .b17, .b21, .b22, .b27, .b28, .b32, .b33, .b38, .b39, .b43, .b44, .b49 {
	background-image: url("../images/ball_green_bg.png");
}
/*
.ball {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	font-family: arial;
	font-size:12px;
	line-height:30px;
	color:#FFF;
	background-color: rgb(240, 165, 0);
	box-shadow: inset -5px -10px 10px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}

.b01, .b02, .b07, .b08, .b12, .b13, .b18, .b19, .b23, .b24, .b29, .b30, .b34, .b35, .b40, .b45, .b46 {
	background-color: rgb(180, 35, 40);
	box-shadow: inset -5px -10px 10px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
.b03, .b04, .b09, .b10, .b14, .b15, .b20, .b25, .b26, .b31, .b36, .b37, .b41, .b42, .b47, .b48 {
	background-color: rgb(50, 100, 150);
	box-shadow: inset -5px -10px 10px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
.b05, .b06, .b11, .b16, .b17, .b21, .b22, .b27, .b28, .b32, .b33, .b38, .b39, .b43, .b44, .b49 {
	background-color: rgb(55, 115, 25);
	box-shadow: inset -5px -10px 10px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
*/

.bg-yellow{
	background-color:#eee100;
}

.btn-yellow{
	background-color:#eee100;
}
.bg-white{
	background-color:#FFF;
}
.btn-blue,
.btn-blue:hover{
	background-color:#081b60;
	color:#FFF;
}

#nav{
	line-height:50px;
	position: sticky; /* Set the navbar to fixed position */
}
#nav #navbarText{
	line-height:30px;
	padding:20px 0px 0px 0px;
}
#nav .nav-item{
	display:inline-block;
}
#nav .nav-item .nav-link{
	color:#081b60;
	border-bottom:5px solid transparent;
	font-family:Microsoft JhengHei;
	font-size:16px;
	position:relative;
	font-weight:bold;
}
#nav .nav-item.active .nav-link{
	color:#081b60;
}
#nav .nav-item.active .nav-link:before,
#nav .nav-item:hover .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;
}

.btn-alert-off{
	background-color:#EEE;
	padding:6px 12px;
	padding-left:23px;
	border-right:12px solid #666;
	border-left:1px solid #666;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}

.btn-alert-on{
	background-color:#FFF;
	padding:6px 12px;
	padding-right:23px;
	border-left:12px solid #081b60;
	border-right:1px solid #666;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}

.contentDiv{
	background-color:#081b60;
	border-radius:30px;
	padding-top:30px;
	padding-bottom:30px;
}

.contentRound{
	border-radius:30px;
	border:3px solid #FFF;
	overflow:hidden;
}
.contentRound .paddingY{
	padding-top:30px;
	padding-bottom:30px;
}


.gameTitle{
	color:#081b60;
	font-size:18px;
	font-weight:bold;
}
.gameDetails{
	color:#081b60;
	font-size:12px;
	font-weight:bold;
}
.btn-live,
.btn-live:hover{
	background-color:#081b60;
	border-radius:10px;
	color:#FFF;
	font-size:12px;
	line-height:12px;
	padding:3px 8px;
}
.countDownDiv{
	padding-top:10px;
	padding-bottom:10px;
}
.hour,
.minute,
.second
{
	display:inline-block;
	background-color:#FF3300;
	color:#FFF;
	font-size:24px;
	line-height:30px;
	border-radius:5px;
	font-weight:bold;
	padding: 3px 5px 7px 5px;
}
.colon{
	display:inline-block;
	color:#FF3300;
	font-size:24px;
	line-height:30px;
	font-weight:bold;
	padding: 3px 5px 7px 5px;
}
.bottomShadow{
	display:block;
	background-color:#CCC;
	height:2px;
	margin-top:20px;
	margin-bottom:20px;
}
.gameResultDetails{
	color:#081b60;
	font-size:12px;
}
.btn-history{
	background-color:#FFF;
	border-radius:10px;
	border:1px solid #081b60;
	font-size:12px;
	line-height:12px;
	padding:3px 8px;
}
.historyTitle{
	color:#081b60;
	font-size:18px;
	line-height:18px;
	font-weight:bold;
}
.historyDetails{
	color:#081b60;
	font-size:12px;
	line-height:18px;
}
.historyFilter{
	border-radius:10px;
	border:1px solid #CCC;
	overflow:hidden;
}
.historyFilter .input-group-text{
	background-color:#FFF;
	border:0px;
	color:#CCC;
}
.historyFilter .form-control{
	border:0px;
}
.historyTable{
	color:#081b60;
	border-radius:10px;
	overflow:hidden;
	border:1px solid #EEE;
}
.historyTable>.row{
	margin:0px;
	padding:10px 0px;
	border-bottom:1px solid #EEE;
}
.historyTable .tableHeader{
	color:#081b60;
	background-color:#f4f7fe;
	text-align:center;
	padding:5px 0px;
}
.historyTable>.row>div{
	padding:0 5px;
}
.historyItmPlay{
	color:#FF3300;
	font-size:24px;
}
.historyItmTitle{
	color:#081b60;
	font-size:18px;
	font-weight:bold;
}
.historyItmDetails{
	color:#333;
	font-size:12px;
}

.channelControlDiv{
	position:absolute;
	top:15px;
	right:15px;
	z-index:100;
	font-size:12px;
}

.mainGame .eventInfo{
	border-bottom:1px solid #000;
	margin-bottom:10px;
}

.mainGame .roundCover{
	border-radius: 20px;
	overflow: hidden;
}

.mainGame .roundCover .gameItm{
	vertical-align:middle;
	border-bottom:1px solid #efeded;
	font-weight:bold;
	font-size:18px;
	background-color:#FFF;
	cursor:pointer;
}

.mainGame .roundCover .gameItm.active,
.mainGame .roundCover .gameItm:hover{
	background-color:#efeded;
}

.mainGame .roundCover .shadow tr:last-child .gameItm{
	border-bottom:none;
}

.mainGame .videoCover{
	border-radius: 10px;
	overflow: hidden;
	height:300px;
}

.videoCover{
	min-height:100px;
}

.videoContainer{
	height:100%;
}

.videoContainerDiv{
	position:relative;
	text-align:center;
	height:100%;
}
.videoContainerDiv .videoControl{
}

.eventName{
	font-size:22px;
	font-weight:bold;
	font-family:Microsoft JhengHei;
	text-align:left;
	line-height:50px;
}

.eventVal .btn{
	background-color:#eee100;
	font-weight:bold;
	font-size:12px;
}

.resultVal .roundItm{
	padding:5px;
	background-color:#fffddb;
	font-weight:bold;
	font-size:14px;
}
.resultVal .dateItm{
	padding:5px;
	color:#666;
	font-size:14px;
}
.resultVal .special{
	border-left: 1px solid #dee2e6;
}

.gameTypeListDiv{
	box-shadow: 5px 5px 5px #00000033;
}

.gameTypeListDiv .btn{
	width:100%;
	vertical-align:middle;
	border:1px solid #efeded;
	font-weight:bold;
	font-size:18px;
	background-color:#FFF;
	cursor:pointer;
}

.gameTypeListDiv .btn.active,
.gameTypeListDiv .btn:hover{
	background-color:#efeded;
}

.gameTypeListDiv .btn:not(:first-child){
	border-top:0px;
}

#historyData .tbHead>div{
	border-top:1px solid #dee2e6;
	border-right:1px solid #dee2e6; 
	border-bottom:1px solid #dee2e6; 
	background-color:#dee2e6;
	font-weight:bold;
}
#historyData .tbHead>div:first-child{
	border-left:1px solid #dee2e6;
}

#historyData .tbRow>div{
	border-right:1px solid #dee2e6; 
	border-bottom:1px solid #dee2e6; 
}
#historyData .tbRow>div:first-child{
	border-left:1px solid #dee2e6;
}

#historyData .tbRow .eventNo{
	padding:3px 0px;
	display:block;
	font-size:16px;
	color:#a37a01;
	background-color:#fffbf0;
	font-weight:bold;
}
#historyData .tbRow .eventReferenceDate{
	padding:3px 0px;
	display:block;
	font-size:12px;
	color:#999;
}
#historyData .tbRow .ballDiv{
	padding:3px 0px;
}

#miss .filterTable{
	border-spacing:0px;
	border-collapse:collapse;
	margin:0px;
}

#miss .filterTable th{
	width:25%;
}

#miss .filterTable td{
	width:15%;
}

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

#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-right:1px solid #efeded;
}

#miss .selection03>div>div{
	border-top:1px solid #efeded;
	border-bottom:1px solid #efeded;
	border-right:1px solid #efeded;
	padding:3px 0px;
}

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

#miss .selection04>div>div{
	border-top:1px solid #efeded;
	border-bottom:1px solid #efeded;
	border-right:1px solid #efeded;
	padding:3px 0px;
}

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

#statHeader .chartTitle{
	text-align:left;
}

#statHeader .chartTitle h3{
	font-size:28px;
	font-weight:bold;
	font-family:Microsoft JhengHei;
	position:relative;
	display:inline-block;
	z-index:20;
	padding:0px 10px;
}
#statHeader .chartTitle h3:after {
	content : "";
	position: absolute;
	left    : 0;
	bottom  : 0px;
	height  : 12px;
	width   : 100%;
	border-bottom:12px solid #eee100;
	z-index:-1;
}

#statHeader .chartBtn{
	text-align:right;
}

#statData .roadSheet td{
	vertical-align: top;
	font-size:12px;
}
#statData .roadSheet td:nth-child(odd){
	background-color:#FFF;
}


.rulesDiv h3{
	font-size:24px;
	font-weight:bold;
	font-family:Microsoft JhengHei;
	position:relative;
	display:inline-block;
	z-index:20;
	padding:0px 10px;
}
.rulesDiv h3:after {
	content : "";
	position: absolute;
	left    : 0;
	bottom  : 0px;
	height  : 10px;
	width   : 100%;
	border-bottom:10px solid #eee100;
	z-index:-1;
}