body {
  /*font-family:Tahoma, Geneva, sans-serif;*/
}

#tbl {
  /*font-family: "Tahoma", Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;
  width: 80%;
  margin-left:10%;
  margin-right:10%;
  font-size:14px;
  padding-top:20px;
}

#tbl td {
  border: 1px solid #999;
  padding: 8px;
}

#tbl tr:nth-child(even){background-color: #ddd;}

#tbl tr:hover {background-color: #f2f2f2;}

#tbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color:#B8B8B8;/*asal*/
 /*background-color:#b1b1b1;*/
  color: black;
  text-transform:uppercase;
  border: 1px solid #888;
}

#tbl_noline {
  /*font-family: "Tahoma", Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;
  width: 80%;
  margin-left:10%;
  margin-right:10%;
  border: solid 1px #000;
  font-size: 14px;
}

#tbl_noline td, #tbl_noline th {
  padding: 8px;
}

#tbl_noline tr:nth-child(even){background-color: #f2f2f2;}

#tbl_noline tr:hover {background-color: #ddd;}

#tbl_noline th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color:#d7d7d7;
  color: black;
  text-transform:uppercase;
}

#tbl_popup {
  /*font-family: "Tahoma", Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;
  width: 96%;
  margin-left:2%;
  margin-right:2%;
  font-size:14px;
	margin-top:6px;
}


#tbl_popup td {
  border: 1px solid #999;
  padding: 4px;

}

#tbl_popup th {
	padding:10px;
  text-align: center;
  background-color:#d7d7d7;
  color: black;
  text-transform:uppercase;
  border: 1px solid #999;
}

#tbl_popup tr:hover {background-color:#FFC;}

#tbl_popup2 {
  border-collapse: collapse;
  font-size:14px;
	margin-top:6px;
}

#tbl_popup2 td {
	border: 1px solid #999;
	padding: 2px;
	color: #000;
	vertical-align:top;

}

#tbl_popup2 th {
	padding: 2px;
	text-align: center;
	background-color: #d7d7d7;
	color: black;
	text-transform: uppercase;
	border: 1px solid #999;
	font-weight: bold;
}

/*display data */
#tbl_display {
  /*font-family: "Tahoma", Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;
  font-size:16px;
	margin-top:6px;
}

#tbl_display td {
	border: 1px solid #999;
	padding: 4px;
	color: #000;
	vertical-align:top;

}

#tbl_display th {
	padding: 6px;
	text-align: center;
	background-color: #d7d7d7;
	color: black;
	text-transform: uppercase;
	border: 1px solid #999;
	font-weight: bold;
}

#lbl {
 /*font-family: "Tahoma", Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;
  width: 80%;
  margin-left:10%;
  margin-right:10%;
	font-size:14px;
}

#lbl td, #lbl th {
  border: 1px solid #ddd;
  padding: 8px;
}

#lbl tr:nth-child(even){background-color: #f2f2f2;}

#lbl tr:hover {background-color: #ddd;}

#lbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color:#333;
  color: white;
  font-weight:bold;
}
.td1{
	color:#000;
	background-color:#f5f5f5;
	font-weight:bold;}

.req {
	color:#F00;
	font-weight:bold;
	}

.topnav {
  background-color: #999;
  overflow: hidden;
  font-weight:bold;  
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color:black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  width:13%;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  width:13%;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: black;
}
.topnav-right {
  float: right;
}
.button { /* Green */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
  font-weight:bold;
}

.button1 {
	background-color: #f55043;
	color: white;
	border-radius: 4px; 
	width: 100px;
	text-decoration: none; 
}
.button1 a{color:white;}

.button1:hover{
	background-color: #df1a0c;
	color:#fff;
}

.button2 {
	background-color: #999;
	color: black;
	border-radius: 4px;
	width: 100px;
}

.button2 a{color:black;}	

.button2:hover{
	background-color: #444;
	color:#fff;
}

.button3 {background-color: #e7e7e7; color: black;border-radius: 4px;width: 200px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

.button6 {
	background-color: #999;
	color: black;
	border-radius: 4px;
	width: 130px;
}

.button6 a{color:black;}	

.button6:hover{
	background-color: #444;
	color:#fff;
}
.tengah{
	width:80%;
	margin-left:10%;
	margin-right:10%}
	
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

.td_left{
	background-color:#d7d7d7
}
.td_center{
	text-align:center;
	}
	
.td_content{
	background-color:#fff
}
/*----start : footer---*/
.footer_div
{	width: 80%;
	margin-left:10%;
	margin-right:10%;
}	
.footer_context span
{
	padding:2px
}
.footer_button
{
	margin:2px;
}
	
	.img_responsive
	{
	max-width: 100%;
	height: auto;  
	}
	
	.footer{
		background-color: #3D3D3D;
		margin-top:20px;
		color:#fff;
	}
/*----end :footer---*/

.tableR {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

.tableR caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

.tableR tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
 /* padding: .35em;*/
}

.tableR th,
.tableR td {
 /* padding: .625em;
  text-align: center;*/
}

.tableR th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tableTitle{
	margin-left:10px;margin-right:10px;
	width:95%;	
	text-transform: uppercase;
	font-weight:bold;
	font-size:14pt;
}
.tableTitle td{
	padding:5px;
}

.tableWide{
	margin-left:10px;margin-right:10px;
	border: 1px solid #444;
	width:95%
}

.tableWide th{
	background-color:#FFCC66;
	padding:5px;
	text-align:center;
	font-weight:bold;
}

.tableWide td{
	padding:2px;
}
.tableForm{
	width:60%;
	border: 1px solid #444;
}

.tableForm td{
	padding:3px;
}

.tableForm .leftColumn{
	background-color:#DCDCDC
}


@media screen and (max-width: 600px) {
  .tableR {
    border: 0;
  }

  .tableR caption {
   /* font-size: 1.3em;*/
  }
  
  .tableR thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .tableR tr {
    border-bottom: 3px solid #ddd;
    display: block;
    /*margin-bottom: .625em;*/
  }
  
  .tableR td {
    border-bottom: 1px solid #ddd;
    display: block;
    /*font-size: .8em;*/
    text-align: right;
  }
  
  .tableR td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
   /* content: attr(data-label);*/
   /* float: left;*/
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .tableR td:last-child {
    border-bottom: 0;
  }
}

input {
    padding: 3px;
}

@media print{
 .no-print{visibility:hidden;}
}