@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap');

body {
	font-family: 'Oswald', sans-serif;
	background:#333; font-weight:400;
}
a {
	color:#ffd000;
}
a:hover {
	color:#bc9900;
}
img {
	max-width:100%;
}
.glowing {
    -webkit-box-shadow: inset 0 0 20px #ffd200;
    -moz-box-shadow: inset 0 0 20px #008c9a;
    box-shadow: inset 0 0 20px #ffd200;
    border-color: #ffd200 !important;
}
#menu {
    list-style: none;
    margin: 5px 0 10px;
    display: flex;
    justify-content: center;
    -webkit-box-shadow: 0 0 6px 3px #bf9c00;
    -moz-box-shadow: 0 0 6px 3px #bf9c00;
    box-shadow: 0 0 6px 3px #bf9c00;
    background: #bf9c00;
}
#menu li {
	padding:0; border-right:1px solid #dab300;
}
#menu li:first-child {
	border-left:1px solid #dab300;
}
#menu li a {
	display:block; padding:10px 18px; text-decoration:none; color:#FFF; font-weight:bold;
}
#menu li a:hover {
	background:#876e00;
}
#dataresultwrap tr.bg-danger td, #dataresultwrap tr.bg-danger th {
	background:#ad8d00 !important;
    border: 1px solid #ddd !important;
}
 .table-sm>:not(caption)>*>* {
    padding: .25rem .25rem;
    background: #fff;
}
  .table>:not(:first-child) {
    border-top: 2px solid #ddd;
}
@-webkit-keyframes colorchange {
  0% {
    color: red;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: yellow;
  }
  50% {
    color: DeepSkyBlue;
  }
  60% {
    color: purple;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}
.copyright {
	color:#d5c5b6; margin-bottom:3px; font-size:12px;
}

.Wrap-Table {
    border: 6px solid #fff;	
    text-align: center;
    margin: auto;
    width: 90%;
    border-radius: 10px;
}
.Parent-Table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    table-layout: fixed;
}
.Wrap-Header {
    border-bottom: 5px solid #fff;
    margin: auto;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}
.Header-Table {
    width: 100%;
}
.Bglive {
    background-color: #056676;
}
.Body-Table-Child {
    background-color: #12151f;
    border: 3px solid #fff;
    padding: 5px 0 5px 0;
    color: #fff;
    letter-spacing: 1.5px;
}
.Body-Table-Parent {
    border: 3px solid #fff;
    padding: 5px 0 5px 0;
    color: #fff;
}
.Body-Table-Child a {
    font-size: 25px;
    color: #f4f4f4;
}
.Wrap-Body {
	font-size: 18px;
}
@media screen and (max-width: 1200px) {
	.Wrap-Body {
		font-size: 16px;
	}
	.Header-Table {
		font-size: 18px;
	}
	.Body-Table-Parent {
		border: 3px solid #fff;
		padding: 5px 0 5px 0;
		color: #fff;
	}
	.Wrap-Table {
		width:100%;
	}
}

@media (min-width: 992px){
	.container {
		max-width: 950px !important;
	}	
	#dataresultwrap {
		font-size:18px;
	}
}
@media (max-width:767px){
	.datapaito .tahun th {
		font-size:16px;
	}
	.datapaito td, .datapaito th {
		font-size:12px;
	}
    .table-sm>:not(caption)>*>* {
    padding: 1px;
    background: #fff;
}
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
	}
}
@media (max-width:575px){
	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 solid #ffd200 !important;
	}
  .table-sm>:not(caption)>*>* {
    padding: 1px;
    background: #fff;
}
}
.liveicon,
.livelabel,
.livenumber {
	text-align: center;
}

.livenumber {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.livelabel {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pb-2 {
    padding-bottom: 2px !important;
}
.pt-2 {
    padding-top: 2px !important;
}

.livedrawrap {
    background: #ddd;
    width: 95%;
    margin: 0 auto;
    padding: 4px;
    max-width: 100%;
}

.livedraw {
	width: 100%;
  max-width: 100%;
  margin: 0;
	overflow: hidden;
  font-size: 16px;
  padding: 0;
  background: #ddd;
  border: 2px solid #ddd;
}

.liveicon {
	background: #ad8d00;
	padding: 10px 0;
}

.liveicon img {
	max-height: 60px;
}

.livedate {
	font-size: 18px;
	background: #00753f;
	color: #FFF;
	font-weight: bold;
	padding: 6px 0;
	text-align: center;
}

.livelabel {
	font-size: 16px;
	font-weight: bold;
	background: #ad8d00;
	color: #FFF;
}

.livenumber {
	background: #fff;
}

.livelabel, .livenumber {
	min-height: 50px;
	line-height: 50px;
	padding: 0 5px;
}

.ballres {
	width: 38px;
	height: 38px;
	background: linear-gradient(to bottom, #ffd65e 0%, #f2f200 52%, #febf04 100%);
	border-radius: 50%;
	color: #000;
	display: inline-block;
	font-size: 18px;
	border: 1px solid #febf04;
	font-weight: 700;
	margin: 0 1.5px;
	line-height: 38px;
	text-align: center;
}
@media (max-width: 669px) {
	.liveicon,
	.livelabel,
	.livenumber {
		text-align: center;
	}

	.livenumber {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.livelabel {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pb-2 {
		padding-bottom: 2px !important;
	}
	.pt-2 {
		padding-top: 2px !important;
	}

	.livedrawrap {
		background: #ddd;
		width: 95%;
		margin: 0 auto;
		padding: 4px;
		max-width: 100%;
	}

	.livedraw {
		width: 100%;
		max-width: 100%;
		margin: 0;
		overflow: hidden;
		font-size: 14px;
		padding: 0;
		background: #ddd;
		border: 2px solid #ddd;
	}

	.liveicon {
		background: #ad8d00;
		padding: 8px 0;
	}

	.liveicon img {
		max-height: 50px;
	}

	.livedate {
		font-size: 15px;
		background: #00753f;
		color: #FFF;
		font-weight: bold;
		padding: 5px 0;
		text-align: center;
	}

	.livelabel {
		font-size: 14px;
		font-weight: bold;
		background: #ad8d00;
		color: #FFF;
	}

	.livenumber {
		background: #fff;
	}

	.livelabel, .livenumber {
		min-height: 40px;
		line-height: 40px;
		padding: 0 4px;
	}

	.ballres {
		width: 30px;
		height: 30px;
		background: linear-gradient(to bottom, #ffd65e 0%, #f2f200 52%, #febf04 100%);
		border-radius: 50%;
		color: #000;
		display: inline-block;
		font-size: 16px;
		border: 1px solid #febf04;
		font-weight: 700;
		margin: 0 1px;
		line-height: 30px;
		text-align: center;
	}

	.row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		justify-content: space-between;
	}

	.col-sm-4 {
		width: 50% !important;
		flex: 0 0 auto;
	}
  .col-sm-8 {
        width: 50%;
        flex: 0 0 auto;
    }
}
.banner-float {
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 0px;
	z-index: 9999;
}

.banner-float img {
	width: 728px;
	
}
.banner1 img {
	display: inline-block;
	width: 49%;
}

.floating-top {
	background: transfarant; top: 0; height: auto; left: 0; padding: 0px; position: fixed; text-align: center; width: 100%; z-index: 1001;
}
.floating-bottom {
	background: transfarant; bottom: 0; height: auto; left: 0; padding: 0px; position: fixed; text-align: center; width: 100%; z-index: 1001;
}

.floating-top img {
	width: 32%;
}
.floating-bottom img {
	width: 32%;
}
.headerbanner{
text-align:center;
}
.headerbanner img {
	width:49.5%;
}

.banner-top img {
	width: 728px;
	
}
@media only screen and (max-device-width: 1000px) {
	
  .floating-top img {
width:100%
}
.floating-bottom img {
width:100%
}
  .headerbanner img{
  width:100%;
  }	
	.banner1 {
		display: block;
		
	}
	
	.banner1 img {
		display: block;
		width: 100%;
	}
		
	.banner2 {
		display: block;
		
	}
	
	.banner2 img {
		display: block;
		width: 100%;
	}
	
	.banner {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: #3a3a3a;
}

.banner img {
	display: inline-block;
	width: 48%;
	box-sizing: border-box;
	margin: 5px;
}
.banner-float {
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 1px;
	z-index: 9999;
}

.banner-float img {
	width: 728px;
	
}

	.banner-top {
		width: 100%;
		
	}
	
	.banner-float img {
		width: 100%;
		
	}

	.banner-top img {
		width: 100%;
		
	}
	

}

@media only screen and (max-device-width: 550px) { 
  .banner1 img {
		display: inline-block;
		width: 100%;
	}
}  
.banner1 {
		display: block;
		text-align:center;
	}
	
.banner img {
		display: block;
		width: 100%;
		margin: 3px;
	}
	.banner-float {
		width: 100%;
		
	}
	
	.banner-float img {
		width: 100%;
		
	}
	.headerbanner {
    text-align: center;
    padding-top: 5px;
}

@media screen and (max-width: 768px) {
  a img {
    height: auto !important;
    max-width: 100% !important;
  }
  .headerbanner {
    text-align: center;
    padding-top: 5px;
}
}
@media screen and (max-width: 768px) {
  img.responsive-banner {
    height: auto !important;
    max-width: 100% !important;
  }
  .headerbanner {
    text-align: center;
    padding-top: 5px;
}
}
.py-3 {
    padding-top: 0rem !important;
    padding-bottom: 1rem !important;
}