body{
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	color: #222;
}
p{
	font-family: inherit;
}
.navbar-light .navbar-toggler{
	background: rgba(255,255,255,1);
}
.bgBody{
	background: #0000c8;
}

/* ---- header ---- */
.header{
	background: url(malaysia.jpg) repeat-x 0 0;
	background-size: auto 100%;
	border-bottom: 6px solid #1f5fd0;
	min-height: 170px;
	padding: 16px 0 6px;
	align-items: stretch;
}
.header .container{
	max-width: 1230px;
	position: relative;
	align-items: flex-end;
}
.header .navbar-brand{
	padding: 0;
	margin: 0 auto auto 0;
}
.header .navbar-brand img{
	height: 95px;
	width: auto;
	max-width: 100%;
}
.header .btn-light{
	background: #eab035;
	border-color: #eab035;
	border-radius: 10px !important;
	color: #fff;
	min-height: 38px;
	padding: .4rem .8rem;
}
.header .btn-light:hover, .header .btn-light:focus{
	background: #d99a1f;
	border-color: #d99a1f;
	color: #fff;
}
.site-clock{
	position: absolute;
	top: -8px;
	right: 15px;
	text-align: right;
	color: #1a1a1a;
	line-height: 1;
	white-space: nowrap;
}
.site-clock-date{
	font-size: 16px;
}
.site-clock-time{
	font-size: 46px;
	margin-top: 2px;
}

/* ---- page panel ---- */
.container.bg{
	max-width: 1175px;
	margin-top: 14px;
	margin-bottom: 3rem;
	padding: 25px 37px;
	background: #f2f2f2;
	box-shadow: 0 0 10px 2px rgba(255,255,255,.75);
}
.banner{
	margin: 0 0 14px;
}
.banner img{
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.footer{
	background: #0000c8;
	margin: 1.5rem -37px -25px;
}

/* ---- result cards ---- */
.draw-card{
	background: #f2f2f2;
	border: 1px solid #222;
}
.draw-date{
	padding: 8px 6px;
	font-size: 16px;
	line-height: 1.5;
}
.draw-bar{
	margin: 0;
	padding: 6px 8px;
	background: linear-gradient(to bottom, #1f73e4 0%, #0b4cb6 100%);
	color: #fff;
	font-size: 30px;
	font-weight: 400;
	line-height: 38px;
	text-align: center;
}
.draw-title{
	margin-top: 26px;
}
.draw-grid{
	margin: 26px -7px 0;
}
.draw-title + .draw-grid{
	margin-top: 14px;
}
.draw-grid > div{
	padding: 0 7px;
	margin-bottom: 25px;
}
.prize-row{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 53px;
	padding: 4px 2px;
	border-top: 1px solid #222;
}
.prize-label{
	margin-right: 6px;
	font-size: 16px;
	white-space: nowrap;
}
.prize-balls{
	display: flex;
	flex-wrap: nowrap;
}
.bola1, .bola2, .bola3{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.bola1 img, .bola2 img, .bola3 img{
	height: 60%;
}
.bola1{
	background: linear-gradient(to bottom, #ee0000 15%, #660000 100%);
}
.bola2{
	background: linear-gradient(to bottom, #ff9900 15%, #ff3300 100%);
}
.bola3{
	background: linear-gradient(to bottom, #f7e600 15%, #ff9900 100%);
	color: #111;
	text-shadow: none;
}

/* the current draw: bigger balls, no lines, panel on the right */
.draw-main-body{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
}
.draw-main-prizes{
	flex: none;
}
.draw-main .prize-row{
	border-top: 0;
	min-height: 63px;
	justify-content: center;
}
.draw-main .prize-label{
	font-size: 26px;
}
.draw-main .bola1, .draw-main .bola2, .draw-main .bola3{
	width: 52px;
	height: 52px;
	font-size: 30px;
}
.draw-side-text{
	flex: none;
	padding-left: 30px;
	color: #ff6600;
	font-size: 30px;
	font-weight: bold;
}
.draw-side-text p{
	display: flex;
	align-items: center;
	min-height: 63px;
	margin: 0;
	white-space: nowrap;
}

.blinking{
	animation: fadeIn 1s linear infinite;
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* ---- smaller screens ---- */
@media (max-width: 1199.98px) {
	.draw-main .prize-row{
		padding-right: 16px;
	}
	.draw-main .bola1, .draw-main .bola2, .draw-main .bola3{
		width: 42px;
		height: 42px;
		font-size: 26px;
	}
	.draw-main .prize-label{
		font-size: 20px;
	}
	.bola1, .bola2, .bola3{
		width: 34px;
		height: 34px;
		font-size: 22px;
	}
	.draw-bar{
		font-size: 24px;
	}
	.draw-side-text{
		font-size: 22px;
	}
}
@media (max-width: 991.98px) {
	.header.sticky-top{
		position: static;
	}
	.header{
		min-height: 0;
		padding: 10px 0;
	}
	.header .navbar-brand img{
		height: 60px;
	}
	.site-clock{
		position: static;
		order: 3;
		flex: 0 0 100%;
		margin-top: 8px;
		text-align: center;
	}
	.site-clock-date{
		font-size: 14px;
	}
	.site-clock-time{
		font-size: 30px;
	}
	.navbar-collapse{
		order: 4;
	}
	.container.bg{
		padding: 15px;
	}
	.footer{
		margin: 1.5rem -15px -15px;
	}
	.draw-main-body{
		flex-direction: column;
	}
	.draw-main .prize-row{
		justify-content: center;
		padding-right: 2px;
	}
	.draw-side-text{
		padding: 4px 0;
		font-size: 20px;
	}
	.draw-side-text p{
		justify-content: center;
		min-height: 36px;
	}
}
@media (max-width: 767.98px) {
	.bola1, .bola2, .bola3{
		width: 29px;
		height: 29px;
		font-size: 18px;
	}
	.prize-label{
		font-size: 14px;
	}
	.banner img{
		height: auto;
	}
}
@media (max-width: 575.98px) {
	.bola1, .bola2, .bola3, .draw-main .bola1, .draw-main .bola2, .draw-main .bola3{
		width: 38px;
		height: 38px;
		font-size: 24px;
	}
	.prize-label, .draw-main .prize-label{
		font-size: 15px;
	}
}
@media (max-width: 380px) {
	.bola1, .bola2, .bola3, .draw-main .bola1, .draw-main .bola2, .draw-main .bola3{
		width: 32px;
		height: 32px;
		font-size: 20px;
	}
}