html, body {
	margin: 0; padding: 0;
}
html {
	height: 100%;
	background: #040404 bottom right no-repeat fixed;
}
body {
	background: transparent 0 -7px repeat-x fixed;
	padding-bottom: 10px;
}
body, tbody {
	font-family: verdana;
	font-size: 11px;
}

h1, h2, h3 {
	margin: 0; padding: 3px 0;
	font-family: Trebuchet MS, Verdana, Arial;
	font-weight: normal;
	color: #D02;
}

h4, h5, h6 {
	margin: 0; padding: 5px 0;
	font-family: Arial;
	font-weight: bold;
	letter-spacing: -0.01em;
	color: #999;
}
h1 {
	font-size: 20px;
}

h2 {
	font-size: 19px;
}

h3 {
	font-size: 17px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 15px;
}

h6 {
	font-size: 14px;
}
p { margin: 3px 0; padding: 0; }
a {
	text-decoration: none; color: #E05114;
}
a img {
	border: 0;
}
b {
	color: #E33;
}
sup {
	color: #999;
	font-size: 0.8em;
}
form {
	margin: 0 0 5px; padding: 0;
}
table.spasi {
	margin: 3px 0; padding: 0;
}
#container {
	width: 98%;
	margin: 0 auto;
}
#header, #content, #footer {
	margin: 0;
	padding: 0;
}
#footer {
	background: transparent url(../img/bgfoot.gif) no-repeat;
	height: 2px;
	font-size: 0.9em;
	color: #fff;
}
#footer p {
	padding: 8px; 
	text-align: center;
}
#footer b {
	color: #FFF91F;
}
#header {
	background: transparent url(../img/logo.png) 0 5px no-repeat;
	z-index: 0;
	height: 141px;
	padding-top: 9px;
	position: relative;
}

#header #webtitle {
	padding-top: 0;
	padding-left: 170px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#header .siteclick {
	position: absolute;
	padding: 0;
	font-family: arial;
	font-size: 9px; 
	right: 5px; top: 45px;
	z-index: 10;
}

.closeclick {
	position: absolute;
	padding: 0;
	font-family: arial;
	font-size: 9px; 
	right: 5px; top: 5px;
	line-height: 1.4em;
}

#header .siteclick a, .closeclick a {
	display: block;
	padding: 2px 5px;
	text-decoration: none;
	background: #FABF39;
	color: #AA0A2F;
	clear: right;
}

#content {
	background: #EFD8BF;
}
input, select, textarea {
	font-family: tahoma; font-size: 1em;
	line-height: 1.5em;
}
select {
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	padding: 0px;
	margin: 0;
	background: #eed;
	font-family: verdana;
	font-size: 10px;
}
.select-selected {
	color: #ffffff;
	padding: 2px 16px;
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
  }
option {
	padding: 1px 2px;
	margin-right: 1px;
	border: 0;
}
option.red {
	background: red;
	color: #EEE;
}
input.textbox {
	border: 1px solid #999;
	padding: 0 2px 3px;
}
.disable {
	background: #999;
}
textarea.textbox {
	width: 400px;
	border: 1px solid #ccc;
	padding: 3px;
	overflow: auto;
}
html> body input.textbox {
	padding: 3px;
	height: auto;
}

table.table_emboss {
	padding: 0; margin: 0;
}
table.table_emboss caption {
	padding-bottom: 3px;
}
table.table_emboss th {
	position: sticky;
	background: #160544; color: #CCC;
	top: 0;
	z-index: 2;
}

table.table_emboss th, table.table_emboss td {
	padding: 2px 3px; 
	border-right: 1px solid #160544; /*#666*/
	border-bottom: 1px solid #160544;
	border-top: 1px solid #AAA;
	border-left: 1px solid #AAA;
	font-family: verdana;
	font-size: 0.9em;
}

/* table.table_emboss td {
	color: #111;
} */
table.table_emboss td.dark {
	background: #ccc;
}
tr.search_glow, tr.search_glow td {
	background: #DB2F55; 
	color: #fff;
}
tr.search_glow td a {
	color: #fff;
}
#form_input_track {
	position: relative;
}
#form_input_track .tabs-container {
	background: #fed;
	padding: 5px 10px; overflow: auto;
	border-right: 1px solid #777;
	border-bottom: 1px solid #777;
	border-left: 1px solid #aaa;
}
.tabs table {
	padding: 10px 0 0;
}
.tabs, .tabs table td {
	font-family: tahoma;
}

.tabsnav {
	padding: 0; 
}
.tabsnav a {
	display: block;
	float: left;
	padding: 5px 15px;
	background: #b3b887; color: #060606;
	margin-right: 3px;
	border-top: 1px solid #aaa;
	font-size: 0.9em;
}

.tabsnav a.active {
	background: #fed; color: #000;
	border-right: 1px solid #777;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
}


.tabsnavin a {
	display: block;
	float: left;
	padding: 5px 15px;
	background: #2c0f7d; color: #f5f1f1;
	margin-right: 3px;
	border-top: 1px solid #aaa;
	font-size: 0.9em;
}

.tabsnavin a.active {
	background: rgb(136, 49, 236); color: #f8f6f6;
	border-right: 1px solid #777;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
}


.breadcrumb {
	padding: 4px 8px;
	margin: 0;
	font-family: tahoma;
	font-size: 0.8em;
	text-transform: uppercase;
	background: #EEE;
	color: #AAA;
}
#alert {
	margin: 5px 0 5px;
	padding: 7px 5px 7px 25px;
	background: #fe9 url(../img/exclamation.gif) 5px 4px no-repeat;
	color: #F21;
	font-family: Verdana;
	font-size: 12px;
	line-height: 1.4em;
	border: 1px solid #dc3;
}
.red {
	background: #911;
	font-weight: bold;
}
.blue {
	color: #14F;
	font-weight: bold;
}
.yellow {
	background: #cc9;
	color: #333;
}
.home h3 {
	font-weight: bold;
	color: #AA0A2F;
}
.home p {
	color: #111;
}
.candidate_id {
	font-size: 2em; 
	font-family: Trebuchet MS; 
	margin: 5px 0; 
	font-weight: bold;  
	color: #fff; 
	text-align: center;
	position: relative;
	width: 60px;
	height: 44px;
	padding-top: 17px;
}
tr.candidate {
	background: #DEE;
}
table.candidate_selected, table.candidate_normal {
	border-collapse: collapse;
	border-color: #ccc;
}
.candidate_selected td {
	border-color: #ccc;
	font-family: tahoma; font-size: 0.9em;
	padding: 2px;
}
.candidate_normal td {
	color: #666;
	font-family: tahoma; font-size: 0.9em;
	padding: 2px;
}
.winner {
	position: absolute;
	left: 40px;
	background: transparent url(../img/winner.gif) no-repeat;
	width: 50px; height: 17px;
}
.kanan {
	text-align: right;
}
#pscroller1{
width: 280px;
height: 40px;
border: 1px solid #ccc;
padding: 5px;
background-color: lightyellow;
}
.alert {
	background: transparent url(../img/criticalsites.gif) no-repeat;
}
p.grey {
	color: #666;
}
#myOnPageContent {
	position: absolute;
	margin-left: -400px;
	margin-top: -200px;
	top: 50%; left: 50%;
	float: center;
	width: 800px;
	height: 400px;
	z-index: 999;
}
#myOnPageContent h5 {
	color: #fff;
}
label {
	color: #666;
}

a.squarebutton{
background: transparent url('../img/square-red-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 10px Tahoma; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('../img/square-red-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover, a.squarebutton.green:hover { /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span, a.squarebutton.green:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
a.squarebutton.green {
	background: transparent url('../img/square-green-left.gif') no-repeat top left;
}
a.squarebutton.green span{
background: transparent url('../img/square-green-right.gif') no-repeat top right;

}
fieldset {
	border: 1px dotted #FAA;
	margin-bottom: 5px;
	padding: 5px 5px;
}
fieldset table tbody {
	color: #333;
	font-size: 10px;
}
fieldset table td, fieldset table th {
	padding: 2px 5px;
	border: 1px solid transparent;
	border: 1px solid transparent;
	background: transparent;
}
fieldset table td.clear {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f9f9f1;
	color: #111;
}
legend {
	margin-left: 0.5em;
	color: #c33;
}

/* scroll text */
/* liScroll style declarations */

ul.newsticker { /* that's your list */
position: relative;
width: 300px;
font: normal 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #136;
font: bold 10px Verdana;
margin: 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 



/* revisi home, by: LB */
.onlineinfo {
	float: right; width: 130px; margin: -20px 0 0 10px;
	border: 1px solid #aaa;
	background: #eee;
	padding: 5px 10px;
}
.home-left {
	padding: 20px;
	list-style: none;
	border: 1px solid #999;
	margin-right: 20px;
}
.home-left li {
	padding: 0;
	margin: 0 0 20px 0; 
}
.home-left p { padding: 0; margin: 0; color: #666; line-height: 1.2em; }
.home-left h3 {
	padding: 0 0 3px;
	margin: 0;
	line-height: 1em;
}
.home-left li.naspro {
	padding: 0  0 0 41px;
	background: url(../img/progress.png) no-repeat;
}
.home-left li.iconhelp {
	padding: 0  0 0 41px;
	background: url(../img/help.png) no-repeat;
}
.home-left li.iconfaq {
	padding: 0  0 0 41px;
	background: url(../img/faq.png) no-repeat;
}

.viewall {
	float: right; text-align: right; width: 65px; padding: 0; font-size: 0.9em;
}
.labelprogress {
	padding: 3px 5px; background: #fde; margin-right: 150px;
}
.tickerwrapper {
	overflow: hidden; color: #666; padding: 5px 2px; background: #ddd; border-top: 1px dashed #999; margin-bottom: 5px;
}
	
* 									{ margin: 0; padding: 0; }
body								{ font: 14px Helvetica, Sans-Serif; } 
#page-wrap							{ width: 800px; margin: 35px auto; } 
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }

/* 
	LEVEL ONE
*/
ul.dropdown{ 
position: relative; 
}
ul.dropdown li  { 
font-weight: bold; float: left; zoom: 1; background: #ccc; 
}
ul.dropdown a:hover { 
color: #000; 
}
ul.dropdown a:active	{ 
color: #ffa500;
}
ul.dropdown li a{ 
display: block; padding: 2px 8px; border-right: 1px solid #333;
color: #222; 
}
ul.dropdown li:last-child a { 
border-right: none; }
 /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover   { 
 background: #F3D673; color: black; position: relative;
 }
ul.dropdown li.hover a { 
color: black; 
}
ul.dropdown lr    { 
	font-weight: bold; 
	float: right;
	zoom: 1;  
	color: black;
	padding: 2px 8px;
}

/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

 
 
  /* Fixed sidenav, full height */
  .sidenav {
	/* height: 100%;
	width: 220px; */
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	/* padding-top: 10px; */
  }
  
  /* Style the sidenav links and the dropdown button */
  .sidenav a, .dropdown-btn {
	  padding: 4px 4px 4px 0px;
	text-decoration: none;
	font-size: 12px;
	color: #f9f5f5;
	display: block;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	outline: none;
  }
  
  /* On mouse-over */
  .sidenav a:hover, .dropdown-btn:hover {
	color: #f1f1f1;
	background-color: green;
  }
  
  /* Main content */
  .main {
	margin-left: 4px; /* Same as the width of the sidenav */
	font-size: 12px; /* Increased text to enable scrolling */
	/* padding: 0px 10px; */
  }
  
  /* Add an active class to the active dropdown button */
  .active {
	background-color: green;
	color: white;
  }
  
  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
	display: none;
	background-color: #262626;
	padding-left: 35px;
  }
  
 
  .sidepanel  {
	width: 0;
	position: fixed;
	z-index: 1;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
	z-index: 9999;
  }
  
  .sidepanel a {
	padding: 2px 2px 2px 0px;
	text-decoration: none;
	font-size: 12px;
	color: #f9f5f5;
	display: block;
	transition: 0.3s;
  }
  
  .sidepanel a:hover {
	color: #f1f1f1;
	
	background-color: green;
  }
  
  .sidepanel .closebtn {
	position: absolute;
	top: 0;
	right: 2px;
	font-size: 25px;
  }
  
  .openbtn {
	font-size: 20px;
	cursor: pointer;
	background-color:rgb(87, 89, 87);
	color: white;
	/* padding: 10px 15px; */
	border: none;
  }
  
  .openbtn:hover {
	background-color:#444;
  }
    /* Optional: Style the caret down icon */
.fa-caret-down {
	float: right;
	padding-right: 8px;
	}
.ellipsis {
	/* white-space: pre-line; */
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
	/* vertical-align: top; */
}
  @media print {
      body * {
        visibility: hidden;
      }
      #print-me, #print-me * {
        visibility: visible;
      }
      #print-me {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
.modal-lookup {
	display: none; 
	position: fixed; 
	z-index: 9999;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
}
.modal-content {
	background: white; margin: 5% auto; padding: 15px; width: 550px;
}
 .short-text {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
}

.tooltip-box {
	display: none;
	position: absolute;
	background: #fefefe;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
	z-index: 999;
}
.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge lama */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}
table.dataTable thead th {
    font-size: 12px;
	background-color: #07768a;
    color: white;
    padding: 2px 10px;
}
table.dataTable tbody td {
    font-size: 12px;
}