.huruf-biru{
color: #0033FF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

.id-field{
color: #0033FF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
border:0px;
 background-color: transparent;
}
.button-operation {vertical-align:middle;
    background-color:#DDE3DB;
   /* 
    background-image: -moz-linear-gradient(
        top,
        rgba(255,255,255,0.4) 0%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 51%,
        rgba(255,255,255,0.0) 100%);
    background-image: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0%,rgba(255,255,255,0.4)),
        color-stop(50%,rgba(255,255,255,0.2)),
        color-stop(51%,rgba(255,255,255,0.1)),
        color-stop(100%,rgba(255,255,255,0.0)));*/
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
   
    border-radius: 2px;
    box-shadow: 0.5px 0.5px 0.5px 0.5px #000000; /**/
    cursor: pointer;
    /* position */
    display: inline-block;
    margin: 2px;
    /* size */
    padding:  2px;
    /* text */
    color:#000000;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    text-shadow:1px 1px 0px #ffffff;
}
.button-operation:hover {
    /* appearance */

    -webkit-box-shadow: 0 0 3px #6495ed;
    -moz-box-shadow: 0 0 3px #6495ed;
    box-shadow: 0 0 3px #6495ed;
}

.panel_report
{
positional:absolute;
height:400px; 
width:100%; 
box-shadow:  1px 1px 1px 1px #000000;
background-color:#ccccff;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
overflow:auto;
}

#logo_perusahaan
{
position:absolute;
top:12%; 
left:60%;
box-shadow: 1px 1px 1px 1px #000000;
}

.huruf_biru
{
color: #0033FF;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

font-weight:bold;
}


textarea {
/* resize: none;
color:#0066FF; 
font-style:italic;
font-size:12px;*/
font-family:Arial, Helvetica, sans-serif;
}

input,textarea,select{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
background-color:#F5F7EE; border-width:0.2px;
}
fieldset{ font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
}

.posisi_waktu
{
position:absolute;
top:2%; 
left:80%; 
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}

#isi
{
top:350px; 
position:absolute; 
left:20px; 
z-index:2;
}

#menu_samping
{
top:10%; 
padding:0%;
left:0.1%; 
position:absolute; 
height:89.5%; 
width:22%; 
overflow:auto; 

border-radius:2px;
box-shadow: 2px 2px 2px 2px #000000;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
background-color:#EBEBFF;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
}

#posisi_form
{
top:10%; 
padding:0%;
left:23%; 
position:absolute; 
height:89.5%; 
width:77%; 
overflow:auto; 
background-color:#E7ECE6;
border-radius:2px;
box-shadow: 2px 2px 2px 2px #000000;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
}
#logo
{		
top:2px; 
position:absolute; 
left:20px; 
z-index:2;
height:30px; 
width:30px;


}
#judul
{   top:2%; 
position:absolute; 
font-family:Arial, Helvetica, sans-serif; 
font-size:20px;
left:10%; 
z-index:2;
height:40px; 
width:800px;
text-shadow:2px 2px 0px #ffffff; 
}

#login
{  top:5%; 
position:absolute; 
right:12%; font-family:Arial, Helvetica, sans-serif; font-size:12px; 
z-index:2;
height:40px;
width:100px;
}

.tabel_form
{
box-shadow: 2px 2px 2px #000000;
border:1px solid #FFFFFF;
border:1px inset #000000;
position:relative; font-family:Arial, 
Helvetica, sans-serif; font-size:12px;
background-color:#FfFfFf;
padding:2px; 
-moz-border-radius: 2px;
border-radius: 2px;
}
.header_tabel
{
background-color:#778899;


background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));


padding:5px;
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;

height:20px;

}

.header_form
{
background-color: #778899;

background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));


padding:5px;
font-family: Arial, Helvetica, sans-serif; 
font-weight:bold; color:#FFFFFF; 

font-size: 15px;
text-shadow:1px 1px 0px #000000;
height:20px;

}

#header
{
top:9%; 
padding:0px;
left:0%;
position:absolute; 
height:1%; 
width:100%; 
z-index:10 


}
li { 
cursor:pointer; 

}
li:hover {
background-color:#D2E8DA;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
}
body 	{
background-color: #F1F8F1;
}

.tabel_list
{
box-shadow: 2px 2px 2px #000000;
border:1px solid #FFFFFF;
border:1px inset #000000;
position:relative;
top:1%;
left :1%; 
padding:1px;
}

.tabel_list tbody tr:hover td
{
background-color:#F9F7B5; 
cursor:pointer;

}

.tabel_list tbody tr:nth-child(even)
{ 
background-color:#FFFFFF;
}

.tabel_list tbody tr:nth-child(odd)
{ 
background-color:#FEFDE7; 
}


/*---------------------FORM ENTRI--------*/

#load_form
{
position:absolute; 
top:40%;
left:40%; 
width:20%;
height:10%;
background-color:#FFFFFF;
box-shadow: 1px 1px 1px 1px #000000; 
z-index:100;
border-radius:5px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
padding-top:0px;
visibility:hidden; 

}

#upload_file
{
position:absolute; 
top:30%;
left:20%; 
width:400px;
height:200px;
background-color:#FFFFFF;
box-shadow: 1px 1px 1px 1px #000000; 
z-index:100;
border-radius:5px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
padding-top:0px; padding-left:10px; padding-right:10px;
visibility:hidden; 

}

/*menu*/
/*--------------------------------------------------|
| menu horison
|---------------------------------------------------|
|              |
|--------------------------------------------------*/

#suckerfishnav {
/* background:#ED3D49;*/
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width:100%;
border-bottom-right-radius:1px;
border-bottom-left-radius:1px;
box-shadow: 1px 1px 1px #000000;	
}

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:20px;
padding:0;
border:1px solid #aaa;
margin:0;
width:100%;
background-color: #778899;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));

}

#suckerfishnav li {
z-index:1;
position: relative;
float:left;
padding:1px; margin:4px; 
color:#000000;
cursor:pointer; 
height:25px; 
oz-border-bottom-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
/* border:1px solid #ffffff;*/
}

#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:200px;
margin:0;
line-height:2;
border:1px;
border-top:1px solid #666666;
box-shadow: 1px 1px 1px 1px #000000;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
}

#suckerfishnav li li {
width:195px;
/*font-weight:bold;*/
font-family:Arial, Helvetica, sans-serif;
}

#suckerfishnav li li a {
padding:4px 4px;
width:200px;
font-size:12px;
color:#dddddd;
}
/*jarak submenu terhadap parent*/
#suckerfishnav li ul ul {
margin:-10px 0 0 170px;
}
/*warna pada pilihan menu*/
#suckerfishnav li li:hover {
background-color: #E7ECE6;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
background-color:#EFF1ED;
}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
background-color:#EFF1ED;
}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
background-color:#EFF1ED;
}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
left:-999em;
}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
left:auto; 
background-color:#778899;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));

/* background-color:#C5D8CA; warna pada sub menu*/
}
/*warna pada menu select atas*/
#suckerfishnav li:hover, #suckerfishnav li.sfhover {	

background-color:#E7ECE6;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));
}

/*------------------------TABEL FIXED HEADER -------------------------*/
.divider {
margin-top: 40px;
}

.button {
/* appearance */ 
background-color:#778899;
vertical-align:middle;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));


-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;


box-shadow: 0.5px 0.5px 0.5px 0.5px #000000; 

cursor: pointer;

/* position */
display: inline-block;
margin: 1px;

/* size */
padding: 0 2px;

/* text */
color:#000000;
font-size: 12px;
line-height: 20px;
text-decoration: none;
white-space: nowrap;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
/* appearance */

-webkit-box-shadow: 0 0 3px #6495ed;
-moz-box-shadow: 0 0 3px #6495ed;
box-shadow: 0 0 3px #6495ed;
}

/*---------------------------------------------------------------------*/

.myTableWrapper {
width: 800px;
height: 500px;
}

.height250 {
height: 250px;
/* overflow-x: auto;*/
overflow-y: auto; 


}

.height300 {
height: 300px;
/* overflow-x: auto;*/
overflow-y: auto; 	

}


.height500 {
height: 500px;
/* overflow-x: auto;*/
overflow-y: auto;


}

.height_medium {
height: 350px; 
overflow-x: auto;
overflow-y: auto;
}

.height_small {
height: 150px;
overflow-x: auto;
overflow-y: auto;
}

.height_small_1 {
height: 240px;
overflow-x: auto;
overflow-y: auto;
}

.fancyTable td, .fancyTable th {
/* appearance */
border: 1px solid #778899;

/* size */
padding: 2px;
}

.fancyTable {
/* text */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-shadow: 2px 2px 2px #000000;
}

.fancyTable tbody tr td {
/* appearance */
background-color: #ffffff;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));

/* text */
color: #262c31;
font-size: 12px;
}
.fabcyTable  tbody tr:hover td
{z-index:0;
background-color:#F9F7B5; 
cursor:pointer; 

}
.fancyTable tbody tr.odd td {
/* appearance */
background-color:#FEFDE7; 
/*
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));*/
}

.fancyTable thead tr th,
.fancyTable thead tr td,
.fancyTable tfoot tr th, 
.fancyTable tfoot tr td {



/* appearance */
background-color:#A2AF8F;
background-image: -moz-linear-gradient(
top,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 51%,
rgba(255,255,255,0.0) 100%);

background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.4)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(51%,rgba(255,255,255,0.1)),
color-stop(100%,rgba(255,255,255,0.0)));

/* text */
color: #121517;
font-size: 12px;

text-shadow: 0 1px 1px #e8ebee;
}


.basicTable td, .basicTable th {
/* appearance */
	border: 0.1px;
       
	
	/* size */
	padding: 1px;
}

.basicTable {
	/* text */
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	 box-shadow: 1px 1px 1px #000000;
         border: 0.1px;
	}
        
        .fancyTable tbody tr td {
	/* appearance */
	background-color: #ffffff;
	background-image: -moz-linear-gradient(
		top,
		rgba(255,255,255,0.4) 0%,
		rgba(255,255,255,0.2) 50%,
		rgba(255,255,255,0.1) 51%,
		rgba(255,255,255,0.0) 100%);
	
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.4)),
		color-stop(50%,rgba(255,255,255,0.2)),
		color-stop(51%,rgba(255,255,255,0.1)),
		color-stop(100%,rgba(255,255,255,0.0)));
		
	/* text */
	color: #262c31;
	font-size: 12px;
	}

.basicTable tbody tr.odd td {
	/* appearance */
	 background-color:#FEFDE7; 
	
	}
.basicTable th {
	/* appearance */
	 background-color:#CCCCCC; 
	
	}

.basicTable thead tr th,
.basicTable thead tr td,
.basicTable tfoot tr th, 
.basicTable tfoot tr td {



/* appearance */
	background-color:#4E85B1;
	background-image: -moz-linear-gradient(
		top,
		rgba(255,255,255,0.4) 0%,
		rgba(255,255,255,0.2) 50%,
		rgba(255,255,255,0.1) 51%,
		rgba(255,255,255,0.0) 100%);
	
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.4)),
		color-stop(50%,rgba(255,255,255,0.2)),
		color-stop(51%,rgba(255,255,255,0.1)),
		color-stop(100%,rgba(255,255,255,0.0)));
		
	/* text */
	color: #121517;
	font-size: 12px;
	
	text-shadow: 0 1px 1px #e8ebee;
	}