/* ================= GLOBAL ================= */
* {
	box-sizing: border-box;
}

body {
	background: #ffffff;
	font-family: 'Oswald', sans-serif;
	color: #222;
	margin: 0;
	padding: 0;
}

/* ================= OVERLAY & POPUP ================= */
.overlay{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,.4);
	transition:opacity .5s;
	visibility:visible;
	opacity:1;
	z-index:999;
}
.overlay:target{
	visibility:hidden;
	opacity:0;
}
.popup{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:10px;
	background:#ffffff;
	border-radius:6px;
	width:30%;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.popup h2{
	margin-top:0;
	color:#222;
	font-family:Tahoma,Arial,sans-serif;
}
.popup .close{
	position:absolute;
	right:8px;
	top:0;
	font-size:28px;
	font-weight:700;
	text-decoration:none;
	color:#666;
}
.popup .close:hover{
	color:#d1243d;
}
.popup .content{
	margin-top:30px;
	color:#333;
	max-height:30%;
	overflow:auto;
}

/* ================= LAYOUT ================= */
.space{
	width:100%;
	height:150px;
}
.container2{
	width:65%;
	margin:auto;
}

/* ================= BANNER ================= */
.banner-float{
	position:fixed;
	width:100%;
	text-align:center;
	bottom:0;
	z-index:9999;
}
.banner-float img{
	width:728px;
}
.banner1 img,
.headerbanner img{
	display:inline-block;
	width:99.4%;
	border:1.5px solid #d1243d;
	padding:2px;
}
.headerbanner{
	text-align:center;
}

/* ================= FLOATING ================= */
.floating-top,
.floating-bottom{
	background:transparent;
	position:fixed;
	width:100%;
	text-align:center;
	z-index:1001;
}
.floating-top{top:0;}
.floating-bottom{bottom:0;}
.floating-top img,
.floating-bottom img{
	width:49%;
}

/* ================= HEADER ================= */
.head{
	width:100%;
	padding:20px;
	background:#ffffff;
	border:1px solid #e0e0e0;
}
.logo{
	display:block;
	width:450px;
	height:180px;
	background:url("/img/logo.webp") center no-repeat;
	background-size:contain;
	margin:auto;
}

/* ================= MENU ================= */
.menu{
	width:100%;
	text-align:center;
	background:#d1243d;
}
.menu a{
	display:inline-block;
	padding:10px 20px;
	text-decoration:none;
	color:#ffffff;
	font-size:18px;
}
.menu a:hover{
	background:#ffffff;
	color:#d1243d;
}

/* ================= CONTENT ================= */
.content{
	width:100%;
	border:1px solid #e0e0e0;
	background:#ffffff;
}
.content p{
	font-size:16px;
	color:#333;
	margin:10px;
	text-align:left;
}

/* ================= HEADING ================= */
h1,h2,h3{
	text-align:center;
	color:#222;
}
h3{
	margin:40px 0;
	font-size:26px;
	font-family:Arial;
}
.title-head,
.title-footer{
	text-decoration:none;
	color:#d1243d;
	font-weight:600;
}

/* ================= FORM ================= */
.t1,.t2,.t3{
	background:#ffffff;
	border:1px solid #ccc;
	padding:6px 10px;
	font-size:16px;
}

/* ================= TABLE ================= */
table{
	background:#ffffff;
	border-collapse:collapse;
	min-width:500px;
	margin:1px;
}
td,th{
	border:1px solid #d9d9d9;
	text-align:center;
	padding:3px;
	color:#222;
}
.head th{
	background:#d1243d;
	color:#ffffff;
}
tr:nth-last-child(5n+1){
	background:#f2f2f2!important;
}

/* ================= LINK ================= */
.out-link{
	list-style:square;
	margin:0 35px;
	color:#333;
}
.out-link a{
	text-decoration:none;
	color:#333;
}
a:hover{
	color:#d1243d;
}

/* ================= INPUT ================= */
input.cari{
	width:50px;
	text-align:center;
	color:#d1243d;
	font-weight:700;
	background:#f5f5f5;
	border:1px solid #ccc;
}

/* ================= WARNA BOLA ================= */
.e1,.e2,.e3,.e4,.e5,.e6,.e7,.e8,.e9,.e0{background:#ff4d4d;color:#fff}
.k1,.k2,.k3,.k4,.k5,.k6,.k7,.k8,.k9,.k0{background:#28a745;color:#fff}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c0{background:#007bff;color:#fff}
.a1,.a2,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a0{background:#ff9800;color:#fff}

/* ================= DRAWING TABLE ================= */
#drawing-table thead td{
	background:#d1243d!important;
	color:#fff;
}
#drawing-table td{
	font-family:'Roboto',sans-serif;
	font-size:13px;
	font-weight:bold;
}

/* ================= COLOR SELECTOR ================= */
#color-selector .color{
	float:left;
	height:25px;
	width:11%;
	cursor:pointer;
}
#color-selector .selected{
	box-shadow:inset 0 0 0 2px #000;
}

/* ================= BUTTON ================= */
#btnSubmit{
	background:#d1243d;
	color:#fff;
	border:none;
	font-size:9px;
	font-weight:600;
	height:25px;
	cursor:pointer;
	text-transform:uppercase;
}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
	.container2{width:100%}
	.logo{width:280px;height:80px}
	.menu a{display:block;border-bottom:1px solid rgba(255,255,255,.3)}
	.banner-float img{width:100%}
}
@media (max-width:550px){
	.logo{width:200px;height:70px}
}