a:link, a:visited, a:active
{
  text-decoration:none; 
  color:#000;
 }

 body{
    background-color:#fff;
 }
/* header */
.header {
  color:#336;
  font-family:Verdana;
  font-size:22px;
  font-weight:bold;
  vertical-align:middle;
  padding:4px 4px;
  background-color:#daeafc;
  border:1px solid #88CCee;
}

.login-judul{
  background-color:#3BAAE3;
  color:#eee;
  font-family:Verdana;
  border:1px solid #ccc;
}
.login {
  background-color:#E5F1F9;
  padding:10px 14px;
  border:1px solid #88CCEE;
  font-family:Verdana;
  font-size:14px;
  border-radius: 0 0 10px 10px;
}

.header img{
  padding:1px 5px;
}

.user-aktif {
	display: inline-block;
	width: 195px;
	position: relative;
	float:right;
	padding-right:10px;
    margin-top:-5px;
}

.user-label{
    font-family:Tahoma; 
	background:#cdf;
	font-size:12px;
	color:#177;
	float:right;
	width:195px;
	padding-top:5px;
	position: relative;
	cursor: pointer;
	z-index: 2;
	display: block;
	-webkit-transition-delay: .8s;
	height:30px;
}

.user-label jabatan{
  font-size:11px;
  font-weight:normal;
  color:#888;  
}

.user-popup-menu {
	position: absolute;
	top: 0;
	display: block;
	z-index: 1;
	width: 195px;
	padding-top: 35px;
	-webkit-transition: height .5s ease;
	-webkit-transition-delay: .4s;
	border: 1px solid #777;
	border-radius:4px;
	display: none;
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
	
.user-popup-menu ul {
	background: #F8F8F8;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
 }
 
.user-popup-menu li {
	list-style: none;
	text-align: left;
	color: #CCCCCC;
	font-size: 12px;
	font-weight:normal;
	line-height: 30px;
	height: 30px;
	padding-left: 10px;
	border-top: 1px solid #ccc;
}

.user-popup-menu li .icon{
	float:left;
	padding-top:5px;
	padding-right:10px;
} 
.user-aktif:hover .user-popup-menu {
        height: 95px;
        z-index: 3;
        -webkit-transition-delay: 1s;
		display: block;
    }
      	
 
 .user-label:hover,
   .user-popup-menu:hover - .user-label {
        background: #fff;
        -webkit-transition-delay: 0s, 0s, 0s;
    }
    
    .user-popup-menu:hover - .user-label {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 0;
    }
	
	.user-popup-menu ul a {
        text-decoration: none;
    }
    
    .user-popup-menu li:hover {
        background: #D0D6FC;
    }

.footer {
  color:#fff;
  background-color:#0D5DB5;
  border:1px solid #abf;
  font-family:Verdana;
  font-size:12px;
  padding:2px;
  text-align:right;
}

 /* Menu */
.nav {
position: relative;
background: #4BAFEA; 
background: -moz-linear-gradient(#4BAFEA 0%,#0756B0 100%);
background: -webkit-linear-gradient(#4BAFEA 0%,#0756B0 100%); /* Chrome 10+,Safari 5.1+ */
background: -o-linear-gradient(#4BAFEA 0%,#0756B0 100%); /* Opera 11.10+ */
background: linear-gradient(#4BAFEA 0%,#0756B0 100%); /* W3C */
margin: 0;
padding: 0;
height: 28px;
}

.nav>li {
display: block;
float: left; 
margin: 0;
padding: 0;
}

.nav>li>a {
display: block;
position: relative;
padding: 5px 20px;
font-family: Verdana;
color: #fff;
font-size: 14px;
font-weight:bold;
text-decoration: none;
background: #4BAFEA; 
background:    -moz-linear-gradient(#4BAFEA 0%,#0756B0 100%);
background: -webkit-linear-gradient(#4BAFEA 0%,#0756B0 100%); /* Chrome 10+,Safari 5.1+ */
background:      -o-linear-gradient(#4BAFEA 0%,#0756B0 100%); /* Opera 11.10+ */
background:         linear-gradient(#4BAFEA 0%,#0756B0 100%); /* W3C */

/* Making the color to change on hover with a transition */
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;
-ms-transition: color .3s ease-in;
}

.nav>li>a:hover, .nav>li:hover>a {
color: #F9F755;
}

.nav>.dropdown>a {
padding: 5px 30px 5px 20px;
}


/* The arrow indicating the dropdown */
.dropdown>a::after {
content: "";
position: absolute;
top: 17px;
right: 10px;
width: 7px;
height: 7px;
}

/* Changing the color of the arrow on hover */ 
.dropdown>a:hover::after, .dropdown:hover>a::after {
border-color: #5373D3;
}

/* The submenus */
.nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: block;
}

/* General layout settings for the link containers of the submenus */
.nav ul li {
position: absolute;
top: -9999px; /* Hiding them */
height: 0px;
display: block;
margin: 0;
padding: 0;
}

/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */
.dropdown:hover>ul>li{
height: 27px;
position: relative;
top: auto;
}

/* The submenu links */
.nav ul li a {
padding: 6px 20px;
width: 140px;
display: block;
position: relative;
font-family: arial;
color: #fff;
border-right: 1px solid #368;
text-decoration: none;
font-size: 12px;
/* Background & effects */
background: #134393; 
background: rgba(18,84,174, .7);
-webkit-transition: color .3s ease-in, background .3s ease-in;
-moz-transition: color .3s ease-in, background .3s ease-in;
-o-transition: color .3s ease-in, background .3s ease-in;
-ms-transition: color .3s ease-in, background .3s ease-in;
}

/* Changing the link's color and background on hover */
.nav ul li:hover>a, .nav ul li a:hover {
color: #0fe0ff;
background: rgba(15, 60, 140, .75);
}
/* Making the level 2 (or higher) submenus to appear at the right of their parent */
.nav ul .dropdown:hover ul {
left: 180px;
top: 0px;
}
/* The submenu links have a different arrow which indicates another dropdown submenu */
.nav ul .dropdown a::after {
width: 6px;
height: 6px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
border-bottom: 0;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
top: 12px;
}

/* Changing the color of the arrow on hover */
.nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {
border-right: 1px solid #0fd0f9;
border-top: 1px solid #0fd0f9;
}

.box{
font-size : 13px;
border:1px solid #9cd;
padding:4px;
border-radius:4px;
}

.box:focus{
border-color:#33A4ff;
box-shadow:0 0 4px #33A4ff;
-moz-box-shadow:0 0 4px #33A4ff;
-webkit-box-shadow:0 0 4px #33A4ff;
}

.box-right{
font-size : 13px;
border:1px solid #9cd;
padding:4px;
text-align:right;
border-radius:4px;
}

.box-right:focus{
border-color:#33A4ff;
box-shadow:0 0 4px #33A4ff;
-moz-box-shadow:0 0 4px #33A4ff;
-webkit-box-shadow:0 0 4px #33A4ff;
}

.read-only{
  background:#fAFAFA;
  color:#888;
}

.box-grid{
font-size : 13px;
border:0px;
padding:1px;
width:100%;
background:#eff7ff;
}

.box-grid:focus{
  background:#cdf;
}

.box-grid-right{
font-size : 13px;
border:0px;
text-align:right;
padding:1px;
width:100%;
background:#eff7ff;
}

.box-grid-right:focus{
  background:#cdf;
}

.judultabel
{
background-color:#3BAAE3;
color : #fff;
font-family : arial;
font-size : 12px;
font-weight : bold;
}

.subjudultabel
{
background : #444;
color : #fff;
font-size : 8pt;
font-weight : bold;
}

.barisgenap
{ 
  background : #EBEFF7;
  color : #000;
  font-weight : normal;
}

.barisganjil
{ 
  background : #D2DFF2;
  color : #000;
  font-weight : normal;
}

.linkhalaman
{
  font-weight : normal;
  font-size : 10pt;
}

.img-list-brg { transition: all .2s ease-in-out; }
.img-list-brg:hover { border:1px solid #CCCCCC; transform: scale(5);cursor:grab}

.forminput
{
  border:2px solid #3BAAE3;
  border-radius:4px;
} 

.forminput td
{
background : #E8F4F9;
padding: 3px 8px;
font-family : arial;
font-weight : normal;
font-size : 13px;
} 

.forminput .judul
{
color:#fff;
background : #6BBFEA;
background : -moz-linear-gradient(#6BBFEA 40%,#3BAAE3 50%);
background : -webkit-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Chrome 10+,Safari 5.1+ */
background : -o-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Opera 11.10+ */
background : linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* W3C */
font-family : Arial;
font-weight : bold;
font-size : 11pt;
} 

.forminput .footer
{
  height:50px;
  padding:6px 16px;
  border:none;
  text-align:center;
} 

.btn{
  padding: 3px 4px;
  cursor:pointer;
}

.filter{
  border:1px solid #C5D1D9;
  border-radius:6px;  
}

.filter td{
  background-color:#E5F1F9;
  padding:4px 7px;
}

.button a:active, .button a:link, .button a:visited {
color:#111;
font-family:Arial;
font-weight:bold;
font-size:12px;
text-decoration:none;
background:#5383f3;
background-image:    -moz-linear-gradient(#9BC 20%,#def 70%);
background-image: -webkit-linear-gradient(#9BC 20%,#def 70%); /* Chrome 10+,Safari 5.1+ */
background-image:      -o-linear-gradient(#9BC 20%,#def 70%); /* Opera 11.10+ */
background-image:         linear-gradient(#9BC 20%,#def 70%); /* W3C */
padding:5px 8px;
border:1px solid #799; 
border-radius:6px;
}

.button a:hover{
background:#737373;
background-image:    -moz-linear-gradient(#8ab 0%,#cde 70%);
background-image: -webkit-linear-gradient(#8ab 0%,#cde 100%); /* Chrome 10+,Safari 5.1+ */
background-image:      -o-linear-gradient(#8ab 0%,#cde 100%); /* Opera 11.10+ */
background-image:         linear-gradient(#8ab 0%,#cde 100%); /* W3C */
}

#paging {
	font-family : tahoma;
	font-weight : bold;
	margin: 10px 0 5px;
	font-size : 8pt;
}
#paging ul, #paging li {
	margin: 0;
	padding: 0;
	list-style: none none outside;
	display: inline;
}
#paging a:link, #paging a:visited {
	padding: 2px 4px;
	background: #447C98;
	margin-right: 4px;
	height: 5px;
	line-height:2px;
	color:#fff;
	border: 1px solid #1F4558;
}
#paging a.current{
	border: 1px solid #777;
	background: #ddF;
	color:#444;
}
#paging a:hover {
	border: 1px solid #03616f;
	background: #3BAAE3;
	color: #BFA;
}

.linkhalaman
{
  font-weight : normal;
  font-size : 10pt;
}

.content{
  font: Tahoma;
  font-size: 12px; 
  margin-top:10px;
  color: #111;
  /*background-image: url("img/back.png");
  background-repeat: repeat;*/
  width:100%;
  min-height:520px;
  vertical-align:middle;
}

.tombol-cari{
  background-image: url("img/btn_cari.png");
  width:27px;
  height:27px;
  cursor:pointer;
}

.gridcari{
  overflow:scroll;
  height:330px;
  width:690px;
}

::-webkit-input-placeholder { color:#99f; padding:3px }
::-moz-placeholder { color:#99f; } /* firefox 19+ */
:-ms-input-placeholder { color:#99f; } /* ie */ 
input:-moz-placeholder { color:#99f; }

.filter{
  font: Verdana;
  font-size: 16px;   
}

#error_validasi{
  color:#f11;
  font-size: 12px;
  font-weight:bold;  
}

.group-bevel{
  border: 1px solid #6BBFEA;  
  border-radius:6px;
}

.group-bevel-vscr{
  margin-top:8px;
  border: 1px solid #6BBFEA;  
  overflow-y : scroll;
}

.tbl-global  td.judul{
  border: 1px solid #A1D4EF;
  background:#CCE6F4;
  color:#235;
  font-size:13px;
}

.tbl-global  td.isi{
  border: 1px solid #B8DEF2;
  color:#111;
  font-size:12px;
}

.contact{
  background:#A2BECF;
}

.contact .judul-contact{
  background:#C1D2E3;
  font-size:11px;
  font-weight:bold;
}

.contact{
  font-size:11px;
}


div.tabview div.tabs 
{
 height: 23px;
}

div.tabview div.tabs a 
{
 display: block;
 float: left;
 margin-right: 0px;
 width: 105px;
 text-align: center;
 height: 22px;
 line-height: 22px;
 vertical-align: middle;
 background-image: url('img/tab_view3.jpg');
 background-repeat: no-repeat;
 background-position: 0px 0px;
 text-decoration: none;
 color: #888;
 cursor: pointer;
}

div.tabview div.tabs a:hover 
{
 background-image: url('img/tab_view2.jpg');
 background-repeat: no-repeat;
 background-position: 0px 0px;
}

div.tabview div.tabs a.current, div.tabview div.tabs a.current:hover 
{
 margin-top: 2px;
 height: 20px;
 background-image: url('img/tab_view1.jpg');
 background-repeat: no-repeat;
 background-position: 0px 0px;
 cursor: default;
 color: #000;
}

div.tabview div.pages 
{
 clear: both;
 border-color: #6BBFEA;
 border-width: 2px;
 border-style: outset;
}

div.tabview div.pages 
{
 overflow: hidden;
}

div.tabview div.pages div.page 
{
 overflow: auto;
}

div.tabview div.pages div.page div.pad 
{
 padding-top: 4px;
 padding-right: 4px;
 padding-bottom: 4px;
 padding-left: 4px;
 overflow: auto;
}

div.tabview div.pages div.page div.pad   table.grid
{
  background-color:#5BAFDA;
}

div.tabview div.pages div.page div.pad   table.grid .judul td
{
  font-family : arial;
  font-weight :bold;
  font-size:11px;
  background : #6BBFEA; 
  background :    -moz-linear-gradient(#6BBFEA 40%,#3BAAE3 50%);
  background : -webkit-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Chrome 10+,Safari 5.1+ */
  background :      -o-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Opera 11.10+ */
  background :         linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* W3C */
  color:#fff;
  padding:3px 5px;
}

div.tabview div.pages div.page div.pad   table.grid  td
{
  font-size:11px;
  color:#111;
}  

div.tabview div.pages div.page div.pad2
{
 padding-top: 4px;
 padding-right: 4px;
 padding-bottom: 4px;
 padding-left: 4px;
 overflow: auto;
 height:190px;
}

div.tabview div.pages div.page div.pad2   table.grid
{
  background-color:#5BAFDA;
}

div.tabview div.pages div.page div.pad2   table.grid .judul td
{
  font-family : arial;
  font-weight :bold;
  font-size:11px;
  background : #6BBFEA; 
  background :    -moz-linear-gradient(#6BBFEA 40%,#3BAAE3 50%);
  background : -webkit-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Chrome 10+,Safari 5.1+ */
  background :      -o-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Opera 11.10+ */
  background :         linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* W3C */
  color:#fff;
  padding:3px 5px;
}

div.tabview div.pages div.page div.pad2   table.grid  td
{
  font-size:11px;
  color:#111;
}

.input-button{
   vertical-align:middle;
}

.popup_cari {
    display: none;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
	margin:auto;
    width: 700px;
    height: 400px;
    border: 2px solid #3BAAE3;
    background-color: #F2F5F7;
    z-index:1002;
    overflow: auto;
}

.popup_pilihsj {
    display: none;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
	margin:auto;
    width: 408px;
    height: 400px;
    border: 2px solid #3BAAE3;
    background-color: #F2F5F7;
    z-index:1002;
    overflow: auto;
}

.popup_ubah_status{
    display: none;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
	margin:auto;
    width: 250px;
    height: 230px;
    border: 2px solid #3BAAE3;
    background-color: #F2F5F7;
    z-index:1002;
    overflow: auto;
}
	
.popup_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 150%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.formcari
{
  border:2px solid #3BAAE3;
  border-radius:4px;
  overflow:auto;
} 

.formcari .judul
{
color:#fff;
background : #6BBFEA;
background : -moz-linear-gradient(#6BBFEA 40%,#3BAAE3 50%);
background : -webkit-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Chrome 10+,Safari 5.1+ */
background : -o-linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* Opera 11.10+ */
background : linear-gradient(#6BBFEA 40%,#3BAAE3 50%); /* W3C */
font-family : Arial;
font-weight : bold;
font-size : 11pt;
height:25px;
} 

.formcari .filter
{
  padding:5px;
  height:35px;
  font-family : Arial;
  font-size:12px;
}

.formcari .inputan
{
  padding:10px;
  font-family : Arial;
  font-size:12px;
}

.view-laporan{
height: 580px; 
overflow : auto;
padding:5px;
border:1px solid #C5D1D9;
}

.daftar-file
{
 padding: 5px;
 overflow: auto;
 background-color: #fff;
 height:160px;
 border:1px solid #88CCee;
}

.daftar-file td
{
   background-color: #fff; 
   border:1px solid #dde;
}