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

body {
	font-family: 'Josefin Sans', sans-serif;
	background:#3f3f3f url(img/bg-ta.jpg) 100% 0% no-repeat; 
	background-size:cover; background-attachment:fixed;
	font-weight:300; font-size:16px; line-height:1.3;
}
a {
	color:#ffed58; text-decoration:none;
}
a:hover {
	color:#ffb908;
}
img {
	max-width:100%;
}
body > .container, header, .copyright {
	background: rgba(44,44,44,0.9);
    background: -moz-linear-gradient(-45deg, rgba(44,44,44,0.9) 0%, rgba(0,0,0,0.9) 51%, rgba(17,17,17,0.9) 60%, rgba(43,43,43,0.9) 76%, rgba(28,28,28,0.9) 91%, rgba(19,19,19,0.9) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(44,44,44,0.9)), color-stop(51%, rgba(0,0,0,0.9)), color-stop(60%, rgba(17,17,17,0.9)), color-stop(76%, rgba(43,43,43,0.9)), color-stop(91%, rgba(28,28,28,0.9)), color-stop(100%, rgba(19,19,19,0.9)));
    background: -webkit-linear-gradient(-45deg, rgba(44,44,44,0.9) 0%, rgba(0,0,0,0.9) 51%, rgba(17,17,17,0.9) 60%, rgba(43,43,43,0.9) 76%, rgba(28,28,28,0.9) 91%, rgba(19,19,19,0.9) 100%);
    background: -o-linear-gradient(-45deg, rgba(44,44,44,0.9) 0%, rgba(0,0,0,0.9) 51%, rgba(17,17,17,0.9) 60%, rgba(43,43,43,0.9) 76%, rgba(28,28,28,0.9) 91%, rgba(19,19,19,0.9) 100%);
    background: -ms-linear-gradient(-45deg, rgba(44,44,44,0.9) 0%, rgba(0,0,0,0.9) 51%, rgba(17,17,17,0.9) 60%, rgba(43,43,43,0.9) 76%, rgba(28,28,28,0.9) 91%, rgba(19,19,19,0.9) 100%);
    background: linear-gradient(135deg, rgba(44,44,44,0.9) 0%, rgba(0,0,0,0.9) 51%, rgba(17,17,17,0.9) 60%, rgba(43,43,43,0.9) 76%, rgba(28,28,28,0.9) 91%, rgba(19,19,19,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1 );
}
header p {
	font-size:18px;
}
#menu-parent {
	background:#64ab8a; position:relative;
}
#menu-parent:before {
	content:''; position:absolute; width:100%; height:50%;
	display:block; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%);

}
#menu {
	list-style:none; margin:0;
	display: flex; padding:5px 0;
	justify-content: center;
	z-index:2; position:relative;
}
#menu li {
	padding:2px 6px;
}
#menu li a {
	display:block; padding:12px 23px 10px; text-decoration:none; font-weight:700; text-transform:uppercase; font-size:15px;
	background:#000; color:#FFF; width:100%; text-align:center;
	border-radius: 15px; border-bottom:2px solid #FFF;
	transition: all 0.5s;
}
#menu li a:hover {
	background: #FFF; color:#000; border-color:#000;
}
#dataresultwrap {
	width:600px; max-width:100%; margin:20px auto 40px; background:#FFF; font-weight:400;
}
#dataresultwrap tr.bg-danger td, #dataresultwrap tr.bg-danger th {
	background:#000; color:#FFF; padding-top:10px; padding-bottom:8px;
}
#dataresultwrap td {
	font-size:16px;
}
#dataresultwrap .table-bordered tr, #dataresultwrap .table-bordered>:not(caption)>*>* {
	border-color:#CCC;
}
.table>:not(:first-child) {
	border-top:none;
}
.copyright { 
	color:#FFF; margin-bottom:0; font-size:13px;
	padding:15px 0;
}

.livedrawrap {
	background:#FFF; width:600px; margin:0 auto; padding:10px; max-width:100%;
}
.livedraw {
	width:100%; max-width:100%; margin:0;
	overflow:hidden; font-size:18px; padding:0;
}
.liveicon {
	background:#bfdcae; padding:13px 0;
}
.liveicon img {
	max-height:70px;
}
.livedate {
	font-size:20px; background:#ea5507; color:#FFF; font-weight:bold; padding:8px 0;
}
.livelabel {
	font-size:18px; font-weight:bold;
	background:#056676; color:#FFF;
}
.livenumber {
	background:#e8ded2;
}
.livelabel, .livenumber {
	min-height:60px; line-height:60px;
}
.ballres {
    width: 44px;
    height: 44px;
    background: #fa8ef4;
    border-radius: 50%;
    color: #000;
    display: inline-block;
    font-size: 22px;
    border: 1px solid #FFF;
    font-weight: 400;
	margin:0 2px;
	line-height:44px;
	text-align:center;
}
.color2 .ballres {
	background:#ffae01;
}
.color3 .ballres {
	background:#fffc02;
}
#contents h1 { font-size:36px; 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: 900px){
	.container {
		max-width: 900px !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 {
		background-position:50% 50%; font-size:13px;
	}
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
	}
	#menu {
		display:block;
	}
	#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:13px; }
	.livedraw { font-size:14px; } .liveicon { padding-left:10px; padding-right:10px; }
	.liveicon img { max-width:80%; }
	.livedate { font-size:14px; }
	.livelabel, .livenumber { min-height:auto; line-height:2; padding-top:8px; padding-bottom:8px; }
}
@media (max-width:669px) and (min-width:576px) {
	.ballres {
		width: 24px; height: 24px;
		font-size: 16px; margin:0 1px;
		line-height:22px;
	}
}