@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&family=Kay+Pho+Du:wght@400;700&display=swap');

body {
	font-family: 'Kay Pho Du', serif;
	background:#000; 
	font-weight:400; font-size:14px;
}
a {
	color:#383eff; text-decoration:none;
}
a:hover {
	color:#004eff;
}
img {
	max-width:100%;
}
body > .container {
    margin-top: 20px;
    margin-bottom: 0;
    background-color: #FFF;	
}
header {
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
	border-bottom:2px solid #000; cursor:pointer;
}
.headtitle {
	font-family: 'Chakra Petch', sans-serif; font-weight:400; font-size:60px; line-height:1; text-transform:uppercase; margin-bottom:4px; color:#27388a;
}
header p {
	font-size:18px;
}
#menu {
	list-style:none; margin:0;
	display: flex; padding:0 0 2px;
	justify-content: center;
    background-color: #000;
}
#menu li {
	padding:0; width:25%; padding:0 2px;
}
#menu li a {
	display:block; padding:10px 0 8px; text-decoration:none; font-weight:700; text-transform:uppercase; font-size:15px;
	background:#27388a; color:#FF0; width:100%; text-align:center;
	border-top-left-radius: 10px; border-top-right-radius: 10px;
	transition: all 0.5s;
}
#menu li a:hover {
	background: #FFF; color:#000;
}
#dataresultwrap {
	width:100%; max-width:100%; margin:20px auto 30px;
}
#dataresultwrap tr.bg-danger td, #dataresultwrap tr.bg-danger th {
	background:#27388a; color:#FF0;
}
#dataresultwrap td {
	font-size:16px;
}
#dataresultwrap .table-bordered tr, #dataresultwrap .table-bordered>:not(caption)>*>* {
	border-color:#4d4d4d;
}
.table>:not(:first-child) {
	border-top:none;
}
.copyright { 
	color:#FFF; margin-bottom:0; font-size:13px;
	background:#535353; padding:15px 0;
}

.livedraw {
	background:#cdd6ff; width:100%; max-width:100%; margin:0;
	overflow:hidden; font-size:18px; padding:0;
}
.liveicon {
	background:#27388a; padding:10px 0;
}
.livedate {
	font-weight:bold; padding:8px 0;
}
.liveborder {
	border-bottom:1px solid #27388a;
}
.livetitle {
	font-size:18px; font-weight:bold; padding-bottom:5px;
}
.livecol {
	padding-top:10px; padding-bottom:10px;
}
.ballres {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    color: black;
    display: inline-block;
    font-size: 18px;
    border: 1px solid #27388a;
    font-weight: bold;
	margin:0 2px;
	line-height:28px;
}
#contents h1 { font-size:40px; font-weight:700; }
#contents h2 { font-size:32px; font-weight:700; }
#contents h3 { font-size:26px; font-weight:700; }
#contents h4 { font-size:20px; font-weight:700; }

@media (min-width: 800px){
	.container {
		max-width: 800px !important;
	}	
}
@media (max-width:767px){
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
	}
	.headtitle { font-size:48px; }
	header p { font-size:14px; }
	#contents h1 { font-size:34px; }
	#contents h2 { font-size:28px; }
	#contents h3 { font-size:24px; }
	#contents h4 { font-size:20px; }
}
@media (min-width: 576px) {
	.container, .container-sm {
		max-width: 100%;
	}
	#menu li a {
		font-size:14px;
	}
}
@media (max-width:669px){
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
	}
	#menu {
		display:block; margin:0; padding:0;
	}
	#menu li, #menu li:first-child {
		display:block; width:100%; border:none !important;
		border-bottom:1px #000 solid !important; padding:0;
	}
	#menu li a {
		border-radius:0;
	}
	#menu li:first-child a {
		border-top-left-radius: 10px; border-top-right-radius: 10px;
	}
	#contents h1 { font-size:30px; }
	#contents h2 { font-size:24px; }
	#contents h3 { font-size:20px; }
	#contents h4 { font-size:16px; }
	#menu li a { font-size:12px; }
	.livedraw { font-size:14px; } .liveicon { padding-left:10px; padding-right:10px; }
}
@media (max-width:669px) and (min-width:576px) {
	.ballres {
		width: 24px; height: 24px;
		font-size: 16px; margin:0 1px;
		line-height:22px;
	}
}