/* COLORS:
  #EBF2F9: Main Background
  #FFFFFF: Sub Background
  #DDDDDD: Workflow Head Background
  #D3F5CD: Hover Background
  #FCF4AA: Selected Background
  #EEEEEE: Disabled Background
  #D0D4D8: Main Border
  #00903B: Arrow Border
  #EE4037: Title Line Border
  #647287: List Color */

/* Element Style */

/*-----*/
/*---------color id------------*/
/*---color id 01 #00812E---*/
/*---color id 02 #ffcc2a---*/
/*---color id 03 #20915E---*/
/*---color id 01A #015C9B---*/
/*---color id 03A #48ac7f---*/
/*--coloring--*/
a{text-decoration:none; color:#ffcc2a /*--color id 02--*/ ;}
.teks-colorid01 {color:#00812E /*--color id 01--*/ ;}
.teks-colorid02 {color:#ffcc2a /*--color id 02--*/ ;}
.teks-colorid03 {color:#20915E /*--color id 03--*/ ;}
.teks-colorid04 {color:#015C9B /*--color id 04--*/ ;}
.teks-white {color:#FFF;}

.margin-up10px{margin-top:10px;}
.margin-up20px{margin-top:20px;}
.margin-up30px{margin-top:30px;}

.background-01{background:#00812E;}

.border-bottom-dotted{height:3px; padding-top:5px;  border-bottom:1px dotted #CCC; width:90%; left:0px;}
table{font-size:12px;}



body {
	font-family:Tahoma,Arial,sans-serif;
	font-size:12px;
	margin:0 auto;
	/*-------- background - FULL--------*/
	/*--
	background: url(../images/bg/full_01.jpg) no-repeat top center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	overflow:hidden;
	--*/
	
	/*-------- background - color only--------*/
	/*-
	background-color:#680202;
	--*/
	
	/*-------- background - Pattern--------*/
	/*-------pilih background pattern dari bg_01-xx----------*/	
	background: url(../images/bg/bg_02.png) repeat; 
}

/* Page */

#main_content{
	/* background: url(../images/login_bg.jpg) #f7f7f7; */
	/* background:#f7f7f7; */
	width:100%;
	float:left;
	min-height:680px;
}

#wrapper{
	width:1010px;
	margin:0 auto;
}

.Big {
	font-size:13px;
}

.Container {
	background:#EBF2F9;
	border:1px solid #D0D4D8;
	border-radius:6px;
	margin:0 auto;
	padding:10px;
	/* width:600px; */
	width:90%;
}

.DivButton img {
	vertical-align:top;
}

.DivButton:hover {
	background:#D3F5CD;
}

.DivButton {
	cursor:pointer;
	height: 30px;
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px/1 "helvetica neue",helvetica,arial,sans-serif;
    padding: 8px 10px 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
}
.DivButton:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
.DivButton:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

.DivButton img{
	margin-bottom:4px;
}

.DivImg {
	position:relative;
	bottom:4px;
	color:#31CCEB;
}

.DivImg img, .DivImg select, .DivImg input {
	vertical-align:top;
}

.DivImgDisabled img {
	vertical-align:top;
	filter:url(style.svg#desaturate);
}

input[type="button"], input[type="submit"], input[type="reset"], #linkCopy {
    background-color: #20915E /*--color id 03--*/ ;/*
    background-image: -moz-linear-gradient(center top , #20915E /*--color id 03-- , #20915E /*--color id 03-- ;);*/
    border-color: #20915E /*--color id 03--*/ ;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
/*    box-shadow: 0 1px 0 0 #72EBB9 inset, 0 1px 2px 0 #B3B3B3;*/
    color: #FFFFFF;
    font: 11px/1 "lucida grande",sans-serif;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 -1px 1px #20915E /*--color id 03--*/ ;
	font-weight:bold;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, #linkCopy:hover {
    background-color: rgb(62,171,122);
    /*background-image: -moz-linear-gradient(center top , rgb(37, 126, 188), rgb(76, 164, 224));*/
    border-color: rgb(62,171,122);
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, #linkCopy:active {
    background-color: #20915E /*--color id 03--*/ ;/*
    background-image: -moz-linear-gradient(center top , #20915E /*--color id 03-- , #20915E /*--color id 03--);*/
    border-color: #20915E /*--color id 03--*/ ;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
/*    box-shadow: 0 1px 0 0 #72EBB9 inset, 0 1px 2px 0 #B3B3B3;*/
    color: #FFFFFF;
    font: 11px/1 "lucida grande",sans-serif;
    text-align: center;
    text-shadow: 0 -1px 1px #20915E /*--color id 03--*/ ;
	font-weight:bold;
	padding: 5px 10px;
}
input[type="button"][disabled], input[type="button"][disabled]:hover, input[type="button"][disabled]:active, #linkCopy[disabled]:hover {
    background-color: #DADADA;
    background-image: -moz-linear-gradient(center top , #DADADA, #F3F3F3);
    border-color: #C5C5C5 #CECECE #D9D9D9;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    color: #8F8F8F;
    cursor: not-allowed;
    text-shadow: 0 -1px 1px #EBEBEB;
}
input[type="button"]::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}

#linkCopy{
	display:inline;
}

.DivIndex {
	background-color:#FCF4AA;
	border:1px solid #CCC;
	font-size:9px;
	float:right;
	padding:1px 2px;
}

.GreenArrow {
	width:0;
	height:0;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:7px solid #00903B;
	margin-left:130px;
	margin-top:-2px;
	position:absolute;
}

.Header {
	height:70px;
	width:1010px;
	margin:0 auto;
	margin-top:15px;
}

.HeaderItem {
	background-color:rgba(255,255,255,0.8);
	margin:5px;
	padding:5px;
}

.HeaderUser img {
	opacity:2;
}

.ImgSide {
	float:left;
	margin-right:7px;
	width:32px;
}

.ImgSideSmall {
	vertical-align:top;
	width:16px;
}

.ImgWorkflow {
	filter:url(style.svg#desaturate);
}

.ImgWorkflow:hover {
	filter:none;
}

.List {
	font-weight:normal;
	list-style-type:none;
	padding:0px 10px;
}

.ListDisabled {
	background:#EEEEEE url(../images/list_separator.png) repeat-x center bottom;
}

.ListDisabled img {
	filter:url(style.svg#desaturate);
}

.ListItem {
	background:url(../images/list_separator.png) repeat-x center bottom;
	cursor:pointer;
}

.ListItem:hover {
	background:#D3F5CD url(../images/list_separator.png) repeat-x center bottom;
}

.ListInfo {
	font-size:11px;
	font-weight:normal;
}

.ListSmall {
	background:#FFF;
	color:#647287;
	font-size:11px;
	font-weight:bold;
	list-style-type:none;
	padding:5px;
}

.ListSelected {
	background:#FCF4AA url(../images/list_separator.png) repeat-x center bottom;
	cursor:pointer;
}

.ListTitle {
	background:#FCF4AA;
	border-bottom:1px solid #EE4037;
}

.ListTitleImg {
	border-bottom:1px solid #EE4037;
	font-size:13px;
	padding:5px 0 10px 0;
}

.ListTitleImg img {
	vertical-align:top;
}

.NoWrap {
	white-space:nowrap;
}

.SideMenu {
	background:#EBF2F9;
	float:left;
	width:200px;
}

.SubBG {
	background:#EEEEEE;
}

.SubHeader {
	font-size:12px;
	height:17px;
	padding:15px 0;
	float:right;
}

.WhiteBG {
	background:#FFFFFF;
}

.WorkHeader {
	background:#00812E /*--color id 01--*/ ;
	border-top:1px solid #CCCCCC;
	font-size:12px;
	height:37px;
	width:100%;
}

.left {
  float: left;
}
.alignleft {
  text-align: left;
}
.right {
  float: right;
}
.alignright {
  text-align: right;
}
.center, .aligncenter {
  text-align: center;
}

.SideItem {
	padding:15px;
	margin:15px 0px;
	float:left;
	border: 1px solid #ccc;
	background:#fcfcfc;
	border-radius: 4px;
	width:978px;
}

.SideItem header {
  height: 44px;
  background: url(../images/bg-pattern-line.png) bottom repeat-x;
}

.SideItem header .inner {
  height: 37px;
  border: 1px solid #2D4052 /*--color id 01--*/ ;
  background: #2D4052 /*--color id 01--*/ ;
  position: relative;
  /*box-shadow: inset 0 1px 0 #5e5e5e, inset 1px 0 0 #5e5e5e, inset -1px 0 0 #5e5e5e;*/
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  /* background: linear-gradient(top, #363636, #222222); */
}

.SideItem header .title {
  margin: 5px;
}
.SideItem header h1 {
  display: inline;
  color: #eee;
  font-size: 14px;
  /*text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.7)*/;
}

.SideItem header img {
	position:relative;
	top:4px;
	margin-right:10px;
}

.SideItem header .per-page {
  margin-right: 11px;
  margin-top: 2px;
  color: #ededed;
  float:right;
}

.SideItem header .per-page label {
  position: relative;
  top:3px;
}

.SideItem header .per-page select, .SideItem header .per-page input[type=text] {
  background: #fff;
  color: #333;
  border: 1px solid #202020;
  line-height: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 3px 3px rgba(0, 0, 0, 0.3);
  border-radius: 9px;
  margin: 0 10px;
}

.SideItem header .per-page select {
  width: 60px;
  position:relative;
  bottom:3px;
}

/** hack extension position**/
/* @media screen and (-webkit-min-device-pixel-ratio:0) {
  .per-page label .textnode {
    top: 4px !important;
  }
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  .per-page label .textnode {
    top: -1px !important;
  }
} */

.SideItem header .right img {
	float:right;
	padding-top:5px;
}

table.GridStyle {
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  /* color:#666; */
  padding: 10px;
}

table.GridStyle th {
  background: #E5E5E5;
  /* background: linear-gradient(top, #ffffff, #e5e5e5); */
  padding: 3px;
  font-size: 11px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
  text-align: center;
  padding-top: 5px;
  text-shadow: 0 1px 0 #ffffff;
}

table.GridStyle .thLeft,table.GridStyle tr:hover .thLeft {
  background: #E5E5E5;
  /* background: linear-gradient(top, #ffffff, #e5e5e5); */
  padding: 3px;
  font-size: 11px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
  /*text-align: left;*/
  padding-top: 5px;
  /*text-shadow: 0 1px 0 #ffffff;*/
}

table td.thLeft2, table tr:hover td.thLeft2 {
  background: #E5E5E5;
  /* background: linear-gradient(top, #ffffff, #e5e5e5); */
  padding: 3px;
  font-size: 12px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
  padding-top: 5px;
  /*text-shadow: 0 1px 0 #ffffff;*/
}

.extension {
  background-color: rgb(32,145,94);
  /*background-image: -moz-linear-gradient(center top , rgb(76, 164, 224), rgb(37, 126, 188));*/
  border-color: rgb(32,145,94);
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-weight:bold;
  padding: 5px 10px;
  /*text-shadow: 0 -1px 0 #79c1ec;*/
}
.extension a {
  color: #fff;
}

.extension.pagination {
  padding: 0;
}

.extension.pagination li, .extension.pagination .dataTables_paginate a {
  float: left;
  border-right: 1px solid rgb(32,145,94);
  border-left: 1px solid rgb(32,145,94);
}
.extension.pagination li a,
.extension.pagination .dataTables_paginate a a,
.extension.pagination li span,
.extension.pagination .dataTables_paginate a span {
  display: block;
  padding: 5px 8px;
}
.extension.pagination li a:hover,
.extension.pagination .dataTables_paginate a a:hover,
.extension.pagination li span:hover,
.extension.pagination .dataTables_paginate a span:hover {
  background: rgb(62,171,122);
  text-decoration: none;
}
.extension.pagination li.active a,
.extension.pagination .dataTables_paginate a.active a,
.extension.pagination li.paginate_active,
.extension.pagination .dataTables_paginate a.paginate_active {
  background: rgb(62,171,122);
}
.extension.pagination li.disabled,
.extension.pagination .dataTables_paginate a.disabled,
.extension.pagination li.paginate_button_disabled,
.extension.pagination .dataTables_paginate a.paginate_button_disabled {
	background: rgb(123,195,163);
	border-right: 1px solid rgb(123,195,163);
	border-left: 1px solid rgb(123,195,163);
	color: #fff;
	text-shadow: none;
}

.extension.pagination li.disabled:hover,
.extension.pagination .dataTables_paginate a.disabled:hover,
.extension.pagination li.paginate_button_disabled:hover{
	background: rgb(123,195,163);
}
.extension.pagination .dataTables_paginate a.paginate_button_disabled:hover {
	background: #7BC3A3;
}
.extension.pagination li.first, .extension.pagination .dataTables_paginate a.first {
  border-left: none;
  border-bottom-left-radius: 4px;
}
.extension.pagination li.first a, .extension.pagination .dataTables_paginate a.first a {
  border-bottom-left-radius: 4px;
}
.extension.pagination li.last, .extension.pagination .dataTables_paginate a.last {
  border-right: none;
  border-bottom-right-radius: 4px;
}
.extension.pagination li.last a, .extension.pagination .dataTables_paginate a.last a {
  border-bottom-right-radius: 4px;
}
.extension.pagination .dataTables_paginate a {
  cursor: pointer;
  display: block;
  padding: 5px 8px;
}
.extension.pagination .dataTables_paginate a.paginate_button_disabled {
  cursor: auto;
}
.extension.pagination .dataTables_paginate a:hover {
  text-decoration: none;
  background:#25A66C;
}
.extension.inleft {
  margin-left: 20px;
}
.extension.inright {
  float: right;
  margin-right: 20px;
}
.extension.top {
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.extension.bottom {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.12);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}


td.FootBG {
    border: 1px solid #2D4052 /*--color id 01--*/ ;
    background: #2D4052 /*--color id 01--*/ ;
    position: relative;
	color:#FFF;
	font-size:11px;
}

.box-content{
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.filterTable {
	padding:5px;
	background:#EDEDED;
	border:1px solid #C7C7C7;
	border-radius:4px;
}

.filterTable ul {
	padding:0;
	padding-left:13px;
	padding-top:7px;
	margin:0 auto;
}

.filterTable ul li {
	padding:1px;
}

.addButton {
    background-color: rgb(32, 145, 94);
    /*background-image: -moz-linear-gradient(center top , rgb(76, 164, 224), rgb(37, 126, 188));*/
    border-color: rgb(32, 145, 94);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
/*    box-shadow: 0 1px 0 0 #72B9EB inset, 0 1px 2px 0 #B3B3B3;*/
    color: #FFFFFF;
    font: 18px/1 "lucida grande",sans-serif;
    padding: 3px 7px;
    text-align: center;
    font-weight:bold;
}
.addButton:hover {
    background-color: rgb(62,171,122);
    /*background-image: -moz-linear-gradient(center top , rgb(76, 164, 224), rgb(37, 126, 188));*/
    border-color: rgb(62,171,122);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}

.right .addButton {
	margin:5px 5px 0 0; 
}
.addButton img{margin: 3px 0 0 0 !important; top:0 !important;
padding: 0 !important;}
.addButton_disabled {
	background: #9DD1B9;
	border-right: 1px solid #9DD1B9;
	border-left: 1px solid #9DD1B9;
	color: #fff;
	text-shadow: none;
}
.addButton_disabled:hover {
	background: #9DD1B9;
	cursor: auto;
	border-color: #9DD1B9;
}


.ui-accordion-header{
	margin:0px;
	padding:8px 4px;
	background: #FFFFFF; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmY5ZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #FFFFFF 0%, #E6E6E6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#E6E6E6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #FFFFFF 0%,#E6E6E6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #FFFFFF 0%,#E6E6E6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #FFFFFF 0%,#E6E6E6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #FFFFFF 0%,#E6E6E6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E6E6E6',GradientType=0 ); /* IE6-8 */
border:1px solid #D9D9D9;
color:#00812E /*--color id 01--*/ ;
font-size:13px;
cursor:pointer;
}

.ui-accordion-header-active{
	background: #00812E /*--color id 01--*/ ;
	border: 1px solid #015C9B /*--color id 04--*/ ;
	color:#fff;
}
.dashboard{padding:20px;}
.dashboard .dashboard-left{float:left; width:45%;}
.dashboard .dashboard-right{float:right; width:45%;}
.dashboard ul.list li{border-bottom: 1px dotted #CCCCCC; padding-bottom:20px; margin-bottom:20px; display:block; }
.dashboard span:last-child {vertical-align:top; float:right; max-width:80%;}
.dashboard span:last-child h3{color:#00BF6F; margin:0 0 5px 0;}
.dashboard span:last-child h3:hover{text-decoration:underline;}
.dashboard span:last-child p{font-size:12px; margin:0; font-weight:normal;}
.dashboard-welcome{padding:20px;}
.dashboard-welcome h1{color:#00BF6F; border-bottom: 1px dotted #999; padding-bottom:10px; margin-bottom:10px;}
.link{cursor:pointer;color:#20915E; text-decoration:none;}
.link:hover{text-decoration:underline;}
h1{font-weight:normal; color:#20915E; font-weight:600;}

/*------------ POP WINDOW ------------- */
.popWindow {
	background-color:#fff;
	border:5px solid #fff;
	display:none;
	position:absolute;
	text-align:left;
	-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

.popWindow h3 {
	padding:3px;
}

.popWindowtr {
	/*background-color:#993300;*/
	background-color:#00812E /*--color id 01--*/;
	padding:5px
}
.popWindowtr form{margin:0;}

.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
	color:#FA5858 !important;
}
@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

.form-control2 {
  width: 45%;
  height: 34px;
  padding: 6px 12px;
  margin:0% 1% 0% 0%;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}