html{color:#333;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;line-height:1.0em;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}object,embed{outline:none;}
em { display:none;}
h2 {	font-size:15px;	font-weight:bold;}
.clearfix:after {content:"";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}

body {
    /* max-width: 640px; */
    margin: auto;
	font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
	font-size:16px;
    clear: both;
    padding-bottom: 20px;
    overflow-x: hidden;
 
}

a:link, a:visited, a:hover {
	text-decoration:none;
	color:#333;
}

iframe {
    display: none;
}
.page_title {
display:none;
}
.top {
    border-bottom: 2px solid #999;
}

.top .page-menu-item {
	display:none;
}
.top .logo{
    float: left;
    width: 50px;
        padding: 7px 0px;
}

.top .logo img {
    width:100%;
}
.top .title {
    height: 37px;    
    text-align: center;    
    margin: 0 auto;
    padding: 10px;
    opacity: 0;
}
.top .title.builded {
    opacity: 1;
}
.top .title img{
    height: 100%;
}

header {
    /* font-weight: bold; */
        width: 100%;
    display:flex;
    border-bottom: 1px solid #999;
}

header div{
    flex:1;
    color: #a6a6a6;
    display: flex;
    justify-content: center;
    align-items: center;
    height:40px;
    font-size:17px;
    text-align: center;

}

header a {
    width: calc(100/3 * 100%);
}

header div.active {
    background-color:#7b0a00;
    color:#fbfbfb;
}

select {
    border-color: #b3b3b3;
    border-radius: 6px;
}

body.appview .top{
    display:none;
}

.content_table {
    margin-top: -1px;
}

.seasonPickCTN {
    position: relative;
    height: 30px;
    width: 100%;
}

.seasonpickTitle {
    position: absolute;
    width: 98.5%;
    text-align: center;
    margin-top: 5px;
    padding: 2px;
    border: 1px solid #999;
    z-index: -2;
    border-radius: 4px;
}

.seasonpickTitle .arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #7b0a00;
    position: absolute;
    right: 10px;
    top: 5px;
}

.seasonPick {
    width: 100%;
    margin: 5px 0;
    /* padding-left: calc(50% - 25px) !important; */
    text-align: center;
    text-align: -webkit-center;
    text-align-last: center;
    opacity: 0;
}

.backCTN {
    cursor: pointer;
}

.bottom_block{
    height: 60px;
    width: 100%;
    display: block;
}
table tr.matchItemDetailHeader, table tr.matchItemDetail:last-of-type{
    border-bottom: 2px solid #ff9933;
}


img[src="img/more_down.png"], img[src="img/more_up.png"] {
    background-color: #ff9933;
    border-radius: 3px;
}

body[page="odd"] .content_table thead td{
    word-break: keep-all;
}

body[page="odd"] table tbody:nth-child(even) {
    background-color:#fbfbfb;
}
body[page="odd"] table tbody:nth-child(odd) {
    background-color:#fdebd7;
}
body[page="odd"] table tbody[other="true"] tr:not(:first-child) {
    background-color:#ffe0be;
}
body[page="odd"] table tbody[other="true"]:not(.show-detail) tr:not(:first-child) {
    display: none;
}

body[page="odd"] table tbody[other="true"] tr:first-child{
    cursor: pointer;
}
body[page="odd"] table tbody[other="true"] tr:first-child td:first-child div {
    display: flex;
    height: 100%;
    align-content: center;
    align-items: center;
    justify-content: center;
}

body[page="odd"] img[src="img/more_down.png"], body[page="odd"] img[src="img/more_up.png"]{
    /* float: left; */
    width: 14px;
    margin-right: 5px;
}

body[page="odd"] table tbody:not(.show-detail) img[src="img/more_up.png"], body[page="odd"] table tbody.show-detail img[src="img/more_down.png"] {
    display: none;
}

@media screen and (min-width: 350px){
    body[page="odd"] .content_table td{
        word-break: keep-all;
    }   
}

@media screen and (max-width: 349px){
    body[page="odd"] table tr td {
        padding: 5px 3px;
    }
}

.pastdtl-ctn{
    display: flex;
    justify-content: space-evenly;
}
.pastdtl {
    min-width: 30px;
    /* height: 20px; */
    padding: 3px 0;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 3px;
}
.pastdtl:last-child{
    margin-right: 0;
}

.pastdtl.win {
    border: 1px solid #c41000;
    color:#c41000;
}

#piechart{
    position: relative;
    min-height: 200px;
}

.later {
    width: 100%;
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
}
.center  {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.racing_date_title {
    padding: 8px 35px 8px 35px;
    background-color: #fff;
    color: #000;
    border-radius: 3px;
    min-width: 85px;
}

.racing_date_title .arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #7b0a00;
    display: inline-block;
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
}

.racing-date-controllor{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.racing_date {
    min-height: 36px;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.jockeyItem .bar {
    height: 30px;
    margin-top: 22px;
    position: relative;
}
.jockeyItem .bar .headertag {
    left: -18px;
    position: absolute;
    height:30px;
    width: 18px;
    background-image: url(../img/arrow_1_L.png);
    background-size: 100% 100%;
}

.jockeyItem .bar .tailtag {
    background-image: url(../img/arrow_2.png);
    background-repeat: repeat-x;
    background-size: contain;
    height: 30px;
    float: left;
    width: 100%;
}

	span.cn {
		display:none;
	}
	
	header.cn {
		display:none;
	}
	
	body[lang="cn"] span.cn {
		display:block;
	}
	body[lang="cn"] span.zh {
		display:none;
	}
	
	body[lang="cn"] header.cn {
		display:flex;
	}
	body[lang="cn"] header.zh {
		display:none;
	}
	
	body[session="Stable"] .menu-item .Jockey {
		display:none;
	}
	body[session="Jockey"] .menu-item .Stable {
		display:none;
	}