@import url('https://fonts.googleapis.com/css?family=Poppins');

@media print {
	div#header, #flexSubMenu, #primary-nav, .hr-noprint {
		display: none;
	}
	input.hr-button, input.button {
		display: none;
	}
	input, select, textarea {
		border: none;
		overflow: visible;
	}
	span.hr-icon {
		display: none;
	}
	body h1.hr-title {
		padding: 0;
		margin: 0;
	}
	body h1.hr-title span.hr-title {
		padding: 0;
		margin: 0;
	}
	body form.hr-entry h3 {
		border-bottom: 1px solid #0E223D;
	}
	body form.hr-entry label {
		padding-left: 0;
	}
	body form.hr-entry div.hr-personnel-left div.hr-entry-group, body form.hr-entry div.hr-personnel-right div.hr-entry-group
		{
		width: auto;
	}
	form {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	body {
		position: absolute;
		left: 0;
		top: 0;
	}
	#hr-entry-content {
		overflow: visible;
	}
	input:after {
		content: attr(value);
		font-size: 90%;
	}
	#organization-chart {
		overflow: show !important;
		width: 1500px !important;
		height: 800px !important;
	}
	#org-chart-detail {
		display: none;
	}
	
	.hr-list-selector, .chkDel {
    	display: none;
	}
	
	div#hr-payslip-content {
		padding-right: 320px !important;
	}
}

html.hr-hidden {
	visibility: hidden;
}

input[type=file] {
	border: none;
}

span.hr-hidden {
	display: none;
}

body {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-size: 62.5%;
	background-color: #f2f5f7;
}

form.hr-list {
	top: -50;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
}

textarea {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
}

ul.hr-entry-checkbox, ul.hr-nobullet {
	padding: 0;
	margin: 0;
}

ul.hr-entry-checkbox li, ul.hr-nobullet li {
	list-style-type: none;
	margin-bottom: 3px;
	display: table;
}

ul#staffothers li {
	margin-bottom: 8px;
}

a.delstaff {
	margin-right: 20px;
}

/* --------------------------------- Enhancement to jQuery --------------------------------- */
body.hr-entry  .ui-dialog.ui-widget {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-size: 1.2em;
}

body.hr-entry .ui-dialog-titlebar {
	font-size: 1.0em;
}

body.hr-list  .ui-dialog.ui-widget {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-size: 1.0em;
}

body.hr-overlay {
	overflow: hidden;
}

.ui-dialog {
	padding: 0;
	background: none;
	background-color: #fff;
}

.ui-dialog form {
	padding-bottom: 20px;
}

div.ui-widget-overlay iframe {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

div.ui-tabs {
	font-size: 10px;
}

.ui-datepicker {
	padding: 0;
}

div.ui-datepicker-header, div.ui-dialog-titlebar {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0px;
}

body.hr-entry .ui-datepicker-prev-hover, body.hr-entry .ui-datepicker-next-hover
	{
	border-width: 0;
	background-image: none;
}

div#hr-workflow-tabs {
	font-size: 10px;
}

div.hr-appraisal-preview {
	padding-top: 20px;
	padding-left: 50px;
	font-size: 11px;
}

div#hr-workflow-tabs.ui-tabs {
	padding: 0;
	border-width: 0;
}

div#hr-workflow-tabs .ui-tabs-nav, div#hr-lookup-tabs .ui-tabs-nav {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
	padding: 0;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: white;
	border-bottom: 1px solid darkblue;
}

div#hr-workflow-tabs .ui-tabs-nav li, div#hr-lookup-tabs .ui-tabs-nav li
	{
	margin-right: .2em;
}

div#hr-workflow-tabs .ui-tabs-nav li.ui-tabs-selected, div#hr-lookup-tabs .ui-tabs-nav li.ui-tabs-selected
	{
	border-width: 3px;
	margin-bottom: -3px;
}

div#hr-workflow-tabs .ui-tabs-nav a, div#hr-lookup-tabs .ui-tabs-nav a {
	font-size: 1.2em;
	font-weight: 600;
	padding-top: .3em;
	padding-bottom: .3em;
	font-family: 'Poppins', sans-serif;
}

div#hr-workflow-tabs .ui-tabs-panel, div#hr-lookup-tabs .ui-tabs-panel {
	border-width: 3px;
	border-top-width: 0;
	padding-top: 1.5em;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border: none;
}

form.hr-appraisal-form div#hr-workflow-tabs .ui-tabs-panel {
	border-left-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
}

div#header {
	height: 50px;
}

div#banner {
	position: absolute;
	left: 100px;
	right: 100px;
	width: auto;
	height: 100px;
	z-index: -1;
}

div#navigation {
	position: relative;
	float: right;
	height: 55px;
	background-color: #489fdf;
}

div#welcome {
	position: absolute;
	top: 70px;
	right: 30px;
	text-align: right;
}

ul.navigation {
	height: 57px;
	padding: 0;
	padding-left: 10px;
	margin: 0;
}

ul.navigation li {
	list-style-type: none;
	display: block;
	float: left;
	height: 50px;
	bottom: 0;
	margin-right: 7px;
	padding-top: 5px;
}

ul.navigation li a {
	display: block;
	padding-top: 30px;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	font-size: 0.9em;
	text-decoration: none;
	color: black;
	padding-left: 3px;
	padding-right: 3px;
}

ul.navigation li a.home {
	background-image: url('image/Vector.png');
}

ul.navigation li a.inbox {
	background-image: url('image/top_ico_04.gif');
}

ul.navigation li a.announcement {
	background-image: url('image/top_ico_announce.gif');
}

ul.navigation li a.talent {
	background-image: url('image/top_ico_talent.gif');
}

ul.navigation li a.myprofile {
	background-image: url('image/top_ico_profile.gif');
}

ul.navigation li a.change_password {
	background-image: url('image/lock_open-white.png');
}

ul.navigation li a.help {
	background-image: url('image/top_ico_help.gif');
}

ul.navigation li a.logout {
	background-image: url('image/logout-white.png');
}

div#header:after, legend:after, div#primary-nav:after, div.hr-list-action:after,
	div.hr-entry-row:after, div.hr-search-form:after, div.hr-profile-entry:after,
	div.hr-payslip-section:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

div.hr-profile-entry{
	width: 100%;
	height: auto;
	background-color: white;
}

div#primary-nav {
	padding-top: 0px;
	margin-bottom: 20px;
}

div#primary-nav ul {
	padding: 0px;
	margin: 0px;
	height: 34px;
	background: #fff url('image/menu2.gif') no-repeat 100% 0px;
}

div#primary-nav ul li {
	list-style-type: none;
	position: relative;
	display: block;
	float: left;
	height: 34px;
	padding-right: 9px;
	background: #fff url('image/menu2.gif') no-repeat 100% -81px;
}

div#primary-nav ul li.module {
	background-position: 100% -156px;
}

div#primary-nav li a, div#primary-nav li span {
	display: block;
	float: left;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	font-size: 1.1em;
	text-decoration: none;
	color: black;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 20px;
	height: 24px;
	/* 			color: #2a3236; */
	color: white;
	background: #fff url('image/menu2.gif') no-repeat 100% -41px;
}

div#primary-nav ul li.module span {
	background-position: 0% -115px;
	/* 			color: #ffc700; */
	color: #2c3539;
	font-weight: bold;
	padding-right: 10px;
	padding-left: 15px;
}

.hr-print {
	/*display: none;*/
}

/* --------------------------------- hr-entry --------------------------------- */
form.hr-entry h3.hr-title {
	margin-top: 8px;
	font-size: 12px;
	font-weight: bold;
	height: auto;
	width: 100%;
	margin-bottom: 10px;
	background: none;
	padding-top: 30px;
}

p.hr-note {
	font-size: 11px;
}

p.hr-diff, span.hr-diff {
	color: red;
}

div.hr-inside-fieldset {
	float: left;
}

fieldset {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
}

fieldset h4.hr-subtitle {
	padding: 0;
	margin: 0;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.0em;
	font-weight: bold;
	font-style: normal;
	margin-bottom: 8px;
	padding-bottom: 3px;
	border-bottom: 0;
}

fieldset h4 {
	padding: 0;
	margin: 0;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.0em;
	font-weight: bold;
	margin-bottom: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid #aaa;
}

fieldset h4.hr-between {
	margin-top: 8px;
}

div.hr-paragraph, div.hr-paragraph-inner {
	float: left;
	width: 250px;
	text-align: justify;
}

div#hr-entry-content.hr-single-column div.hr-paragraph {
	width: 550px;
}

div#hr-entry-content.hr-single-column {
	width: 99%;
	min-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

div#hr-entry-content.hr-single-column.hr-single-column-large {
	width: 100%;
}

form.hr-appraisal-form div#hr-entry-content.hr-single-column {
	width: auto;
	min-width: none;
}

form.hr-entry fieldset {
	position: relative;
	border: 0;
	padding-left: 10px;
}

div.hr-search-form form.hr-entry fieldset {
	background: none;
}

form.hr-entry div.hr-entry-fieldset {
	padding-right: 9px;
	background-color: #ffffff;
	font-size: 1.1em;
	padding-bottom: 10px;
}

div#hrlookupdiv form.hr-entry div.hr-entry-fieldset {
	font-size: 1.1em;
}

form.hr-entry div. h3 {
	border-bottom: 1px solid #aaa;
}

form.hr-entry h3 {
	margin: 0;
	padding: 0;
	display: block;
	margin-left: 0;
	padding: 0;
	height: 34px;
	width: 100%;
	font-size: 1em;
}

form.hr-entry h3 span {
	position: relative;
	float: left;
	display: block;
	padding-top: 10px;
	height: 24px;
	white-space: nowrap;
	padding-right: 15px;
	padding-left: 2px;
	color: #231F20;
	font-weight: 600;
	font-size: 1.0em;
	color: #0059A8;
	font-family: 'Poppins', sans-serif;
}

form.hr-entry div.hr-entry-row {
	top: 0;
	padding-bottom: 5px;
	position: relative;
}

form.hr-entry div.hr-entry-group {
	width: 450px;
	float: left;
}

form.hr-entry div.hr-entry-group-no-label {
	padding-left: 20px;
}

#hrlookupdiv form.hr-entry div.hr-entry-group {
	width: 150px;
	float: left;
}

form.hr-entry div.hr-personnel-left div.hr-entry-group, form.hr-entry div.hr-personnel-right div.hr-entry-group
	{
	width: 250px;
	width: auto;
}

form.hr-entry div.hr-entry-group {
	zoom: 1;
}

form.hr-entry div.hr-entry-group input {
	float: left;
	margin-top: 2px;
	clear: left;
}

.fc-header-left input {
	float: left;
	margin-top: 0;
	margin-right: 2px;
}

.fc-header-left label {
	float: left;
	margin-right: 2px;
	font-weight: bold;
}

form.hr-entry div.hr-entry-group input.hr-entry-radiobutton, form.hr-entry div.hr-entry-group input.hr-entry-checkbox
	{
	top: 0 !important;
	margin-top: 0 !important;
}

form.hr-entry div.hr-entry-group input.hr-entry-input-nofloat {
	float: none;
}

form.hr-entry label {
	float: left;
	width: 150px;
	padding-left: 20px;
	font-weight: 300;
	font-size: 12px;
	color: #939393;
}

form.hr-entry label.hr-suffix, form.hr-entry label.error, #hrlookupdiv div.hr-search-form form.hr-entry label.hr-suffix
	{
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	float: none;
	width: auto;
}

form.hr-entry div.hr-entry-group label.hr-suffix, #hrlookupdiv div.hr-search-form form.hr-entry div.hr-entry-group label.hr-suffix
	{
	float: left;
}

form.hr-entry label.error, table td label.error {
	margin-left: 10px;
	color: red;
	float: right;
	right: 10px;
}

#error-box label.error {
	position: static;
	right: auto;
}

#error-box ul {
	padding: 0;
	margin: 0;
}

#error-box ul li {
	list-style-type: none;
	margin-bottom: 3px;
}

span.hr-entry-colon {
	float: left;
	margin-right: 5px;
	font-style: normal;
	font-weight: 400;
	color: #000000;
	font-size: 12px;
}

form.hr-entry select {
	width: 200px;
}

form.hr-appraisal-form.hr-entry input, form.hr-appraisal-form.hr-entry select
	{
	width: auto;
}

form.hr-entry input.hr-small-input, #hrlookupdiv input.hr-small-input,
	form.hr-entry select.hr-small-input {
	width: 100px;
}

form.hr-entry input.hr-smallmid-input, #hrlookupdiv input.hr-smallmid-input,
	form.hr-entry select.hr-smallmid-input {
	width: 75px;
}

#hrlookupdiv input.hr-list-selector, form.hr-entry input.hr-entry-checkbox,
	form.hr-entry input.hr-list-selector, form.hr-list input.hr-list-selector,
	form.hr-entry input.hr-entry-radiobutton, #hrlookupdiv td input.hr-entry-checkbox,
	#hrlookupdiv td input.hr-entry-radiobutton, #hrlookupdiv form.hr-entry input.hr-entry-radiobutton
	{
	width: auto;
	margin: 0;
	padding: 0;
}

form.hr-entry fieldset input.hr-entry-checkbox, form.hr-entry fieldset input.hr-entry-radiobutton
	{
	position: relative;
	top: 4px;
}

form.hr-entry fieldset.hr-search-form input.hr-entry-checkbox, form.hr-entry fieldset.hr-search-form input.hr-entry-radiobutton
	{
	position: static;
}

form.hr-entry fieldset input.hr-entry-checkbox, form.hr-entry fieldset input.hr-entry-radiobutton
	{
	margin-right: 5px;
}

form.hr-entry input.hr-entry-checkbox-declaration {
	margin-right: 15px;
}

input, textarea, select {
	font-size: 0.9em;
}

form.hr-entry input, form.hr-entry select, form.hr-entry textarea {
	font-size: 1.0em;
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #000000;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid;
	-ms-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

/*problematic with newer browsers.example movestaffhr_newentry.jsp, browse button disappears in firefox */
input.hr-file {
	position: absolute;
	cursor: pointer;
	opacity: 0;
	z-index: 9999;
}

input.hr-button, input.button, input.hr-buttonClear {
	/* background:rgb(44, 53, 57); */
	line-height: 20px;
	text-align: center;
	color: #FFFFFF;
	padding-bottom: 1px;
}

/* input.hr-buttonClear {
			background:#ff6464;
			line-height:20px;
			text-align:center;
			color:#FFFFFF;
			border-right:#701a1b 1px solid;
			border-bottom:#701a1b 1px solid;
			border-top:#c8aba5 1px solid;
			border-left:#c8aba5 1px solid;
			padding-bottom: 1px;
			width: auto;
			font-size: 12px;
		}*/
input.hr-number {
	text-align: right;
}

form.hr-entry input.hr-button, form.hr-entry input.button {
	width: auto;
	font-size: 12px;
	font-weight: 400;
	border: none;
	padding: 5px 25px;
	/*margin-top: 4px;*/
	margin-left: 10px;
	margin-bottom: 10px;
	color: #fff;
}

.fc-header-left input.hr-button {
	width: auto;
	font-size: 12px;
	margin-top: 0;
}

form.hr-entry input.hr-button-medium {
	width: 50px;
}

form.hr-entry input.hr-xsmall, form.hr-entry select.xsmall, #hrlookupdiv input.hr-xsmall,
	#hrlookupdiv select.hr-xsmall {
	width: 20px;
}

form.hr-entry input.hr-long, form.hr-entry select.hr-long {
	width: 300px;
}

select.hr-long {
	padding: 10px;
}

form.hr-entry input.hr-medium, form.hr-entry select.hr-medium {
	width: 300px;
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #000000;
	padding: 5px;
}

form.hr-entry input#attachment.hr-medium {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #000000;
}

form.hr-entry input#attachment.hr-medium {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #000000;
}

form.hr-entry input.hr-nonedit, form.hr-entry select.hr-nonedit, form.hr-entry textarea.hr-nonedit
	{
	border: 1px solid #AAA;
	background-color: #f5f5f5;
	background-color: transparent;
}

form.hr-entry a.hr-entry-lookup, a.hr-entry-lookup, form.hr-entry a.hr-entry-collapsible,
	a.hr-entry-orgtree-lookup {
	position: relative;
	top: 2px;
	margin-left: 10px;
	padding-left: 24px;
	padding-top: 5px;
	padding-bottom: 0px;
	height: 24px;
	width: 24px;
}

form.hr-entry a.hr-entry-datepicker, a.hr-entry-datepicker {
	
}

form.hr-entry a.hr-entry-lookup, a.hr-entry-lookup {
	background: transparent url('image/button/lookup-default-icon.png') no-repeat 0%
		0px;
}

form.hr-entry a.hr-entry-lookup:hover, a.hr-entry-lookup:hover {
	background: transparent url('image/button/lookup-selected-icon.png') no-repeat 0%
		0px;
}

a.hr-entry-orgtree-lookup {
	background: transparent url('image/profile.gif') no-repeat 0% 0px;
}

form.hr-entry a.hr-entry-lookup, a.hr-entry-lookup {
	background: url('image/button/lookup-default-icon.png') no-repeat 0% 0px;
}

form.hr-entry a.hr-entry-lookup:hover, a.hr-entry-lookup:hover {
	background: url('image/button/lookup-selected-icon.png') no-repeat 0% 0px;
}

a.hr-entry-orgtree-lookup {
	background: transparent url('image/profile.gif') no-repeat 0% 0px;
}

a.hr-entry-orgtree-lookup {
	background: transparent url('image/profile.gif') no-repeat 0% 0px;
}

form.hr-entry a.hr-entry-datepicker, a.hr-entry-datepicker {
	
}

form.hr-entry fieldset a.hr-entry-collapsible {
	padding-left: 0px;
	background: transparent url('image/arrow-up.png') no-repeat 0% 5px;
}

form.hr-entry fieldset.hr-entry-collapsed a.hr-entry-collapsible {
	padding-left: 0px;
	background: transparent url('image/arrow-down.png') no-repeat 0% 5px;
}

form.hr-entry a.hr-entry-lookup span, a.hr-entry-lookup span, form.hr-entry a.hr-entry-datepicker span,
	a.hr-entry-orgtree-lookup span, a.hr-entry-datepicker span {
	display: none;
	/*			position: absolute;
			left: -9999px; */
}

form.hr-entry label.hr-mandatory {
	background: url('image/astericks.gif') no-repeat 10px 50%;
}

table.hr-list td span.hr-mandatory {
	background: url('image/astericks.gif') no-repeat;
}

form.hr-entry h3 {
	position: relative;
	border-bottom: 1px solid #0E223D;
}

form.hr-entry a.hr-entry-collapsible {
	position: absolute;
	right: 20px;
	top: 3px;
}

h2.hr-mandatory {
	padding: 10px;
	padding-left: 35px;
	margin: 0;
	font-size: 10px;
	color: red;
	background: url('image/bck_mandatory.gif') no-repeat 10px 50%;
	background-color: white;
	margin-top: 1%;
}
/* --------------------------------- Lookup Form --------------------------------- */
div#hr-loading {
	padding-top: 40px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	font-style: italic;
}

#hrlookupdiv input {
	width: 150px;
}

#hrlookupdiv select {
	width: 155px;
}

#hrlookupdiv input.hr-entry-checkbox {
	width: auto;
	margin: 0;
	padding: 0;
}

#hrlookupdiv input, #hrlookupdiv select, #hrlookupdiv textarea {
	font-size: 1.0em;
}

#hrlookupdiv input.hr-button, #hrlookupdiv button.btnsearch,
	#hrlookupdiv input.hr-buttonClear {
	width: auto;
	font-size: 12px;
	border: none;
	padding: 4px 20px;
}

#hrlookupdiv input.hr-long, #hrlookupdiv select.hr-long {
	width: 350px;
}

#hrlookupdiv input.hr-medium, #hrlookupdiv select.hr-medium {
	width: 250px;
}

div.hr-dialog-action {
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 5px;
}
/* --------------------------------- General --------------------------------- */
table caption {
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: 10px;
}

.hr-float-left {
	float: left;
	margin-right: 20px;
}

h1.hr-title {
	position: relative;
	margin: 0px auto;
	margin-top: 1%;
	margin-bottom: 1%;
	border-left: 5px solid #0059A8;
	font-size: 1.5em;
	font-weight: 600;
	height: 50px;
	background-color: transparent;
}

h1.hr-title.hr-next-is-search {
	background-color: transparent;
}

div.hr-search-form {
	padding: 10px 40px 15px 0px;
	margin-bottom: 15px;
	background-color: #ffffff;
	font-size: 1.1em;
	margin: 0px auto;
}

div.hr-profile-top-link {
	border: 1px solid #C9C9C9;
	border-top-width: 0;
	padding-left: 20px;
	padding-right: 0px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

div.hr-entry-row label {
	vertical-align: middle;
}

#hrlookupdiv div.hr-search-form {
	padding: 10px 10px 10px 10px;
	margin-bottom: 10px;
	background-color: #ffffff;
	font-size: 11px;
}

#hrlookupdiv div.hr-search-form form.hr-entry label {
	float: left;
	width: 130px;
	padding-left: 20px;
	vertical-align: middle;
}

span.hr-title {
	position: absolute;
	padding: 15px 0px 5px 50px;
	font-size: 1.0em;
	width: 100%;
}

span.hr-icon {
	position: absolute;
	top: 10px;
	margin-left: 10px;
	padding: 30px;
	z-index: 500;
}

body.hr-personnel span.hr-icon {
	background: transparent url('image/personnel.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-movement span.hr-icon {
	background: transparent url('image/staff-movement.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-job span.hr-icon {
	background: transparent url('image/job-information.png') no-repeat 0px  0px;
	background-size: 30px 30px;
}

body.hr-maintenance span.hr-icon {
	background: transparent url('image/maintenance.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-changepassword span.hr-icon {
	background: transparent url('image/change-password.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-dashboard span.hr-icon {
	background: transparent url('image/dashboard.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-disciplinary span.hr-icon, body.hr-grievance span.hr-icon {
	background: transparent url('image/disciplinary.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-industrialrelationship span.hr-icon {
	background: transparent url('image/industrial-relationship.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-manpower span.hr-icon {
	background: transparent url('image/manpower-planning.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-recruitment span.hr-icon {
	background: transparent url('image/recruitment.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-industrial span.hr-icon {
	background: transparent url('image/industrial-relationship.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-learning  span.hr-icon {
	background: transparent url('image/learning-n-development.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-performance span.hr-icon {
	background: transparent url('image/performance-management.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-reports span.hr-icon {
	background: transparent url('image/reports.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-announcements span.hr-icon {
	padding-left: 70px;
	background: transparent url('image/annoucements.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-policy span.hr-icon {
	background: transparent url('image/policies-n-procedures.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-timemgmt span.hr-icon {
	background: transparent url('image/time-management.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-payroll span.hr-icon {
	background: transparent url('image/payroll.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-esos span.hr-icon {
	background: transparent url('image/esos.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-loan span.hr-icon {
	background: transparent url('image/loan.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-claims span.hr-icon {
	background: transparent url('image/travel-claims-n-advances.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-medical span.hr-icon {
	background: transparent url('image/medical.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-leave span.hr-icon {
	background: transparent url('image/leave.png') no-repeat 0px 0px;
	background-size: 30px 30px;
}

body.hr-compensation span.hr-icon {
	background: transparent url('image/compensation-n-benefits.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-counselling span.hr-icon {
	background: transparent url('image/industrial-relationship.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

body.hr-employeerelationship span.hr-icon {
	background: transparent url('image/employeerelationship.png') no-repeat 0px 0;
	background-size: 30px 30px;
}

/* --------------------------------- hr-list --------------------------------- */
table.hr-list {
	font-size: 11px;
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

table.hr-list th {
	font-weight: 600;
}

table.hr-list td, table.hr-list tr th {
	border-bottom: 1px solid #e3e3e3;
	padding: 3px 7px 2px 7px;
}

table.hr-list th, table.hr-list thead td {
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: /* #104572 */ #489fdf;
	color: #ffffff;
}

table.hr-list td.hr-center, table.hr-list th.hr-center {
	text-align: center;
}

#viewtraining {
	background: transparent url('image/vector/viewtraining-grey.png')
		no-repeat 0px 0;
}

#viewtraining:hover {
	background: transparent url('image/vector/viewtraining-blue.png')
		no-repeat 0px 0;
}

#View-Org-Structure {
	background: transparent url('image/vector/View-Org-Structure.png')
		no-repeat 0px 0;
}

a#viewtraining, a#View-Org-Structure {
	padding-left: 10px;
	padding-right: 10px;
}

.hr-center {
	text-align: center;
}

.hr-right {
	text-align: right;
}

table.hr-list td.hr-right, table.hr-list th.hr-right {
	text-align: right;
}

table.hr-list td.hr-list-timebox-left, table.hr-list th.hr-list-timebox-left
	{
	border-left: 1px solid #5d0000;
	padding: 3px 7px 2px 7px;
}

table.hr-list td.timebox-right, table.hr-list th.timebox-right {
	border-right: 1px solid #5d0000;
	padding: 3px 7px 2px 7px;
}

table.hr-list tr.hr-list-selected td {
	background-color: #E6F3FF;
	color: #000;
	font-weight: 900;
}

table.hr-list thead th.hr-list-asc, table.hr-list thead th.hr-list-desc
	{
	background-repeat: no-repeat;
	background-position: 100% 50%;
	padding-right: 20px;
}

table.hr-list thead th.hr-list-asc {
	background-image: url('image/sort-up.gif');
}

table.hr-list thead th.hr-list-desc {
	background-image: url('image/sort-down.gif');
}

table.hr-list th.hr-number, table.hr-list td.hr-number {
	text-align: right;
}

table.hr-list th.hr-list-selector, table.hr-list td.hr-list-selector {
	text-align: center;
}

div#hr-list-content {
	padding: 10px 20px 10px 20px;
	left: 0;
	background-color: #ffffff;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
}

div.hr-list-action {
	padding: 5px 0px 5px 0px;
}

div.hr-list-action a {
	display: inline-block;
	color: #ffffff;
}

div.hr-list-action a.hr-list-add, div.hr-list-action a.hr-list-view-profile
	{
	float: left;
}

div.hr-list-action a.hr-list-delete, div.hr-list-action a.hr-list-export-excel
	{
	float: right;
}

div.hr-list-action a.hr-list-custom {
	color: #000 !important;
	width: auto;
	display: block;
	float: right;
}

input.hr-button.hr-button-clear {
    padding: 5px 10px 5px 10px;
    border: none;
}

input#btnSelect {
	padding: 5px 25px 5px 15px;
}

a.hr-list-add {
	color: #ffffff !important;
	border: 1px solid #04c65b;
	border-radius: 8px;
	background: #04c65b url(image/vector/add.png) 10% 50% no-repeat;
}

a.hr-list-addAtt {
	background: url(image/vector/button/add.png) 10% 50% no-repeat;
	color: rgb(147, 147, 147);
	width: 80px;
    text-align: center;
    padding: 5px 15px 5px 25px;
}

a.hr-list-add1, a.hr-add-icon1 {
	background: url(image/add-green.jpg) 10% 50% no-repeat;
	color: rgb(147, 147, 147);
}

a.hr-add-icons {
	background: #ffffff url('image/vector/add-gray.png') no-repeat 0px 10;
	border-radius: 8px;
}

input#btn-add {
	background-color: #41B971;
	border-radius: 8px;
}

a.hr-delete-icon {
	/* background: #ffffff url('image/trash.jpg') no-repeat 0 0px;  */
	background: url('image/vector/trash-gray.png') no-repeat 10% 50%;
	color: #939393;
}

a.approver-delete {
	background: url('image/vector/trash-gray.png') no-repeat 10% 50%;
	color: #939393;
}

a.hr-list-delete {
	border: 1px solid #939393;
	border-radius: 8px;
	/**/background: url('image/vector/trash-gray.png') no-repeat 10% 50%;
	color: #939393
}

a.hr-delete-icon:hover {
	background: url('image/vector/trash-red.png') no-repeat 10% 50%;
	color: #ED2828;
}

a.hr-list-delete:hover {
	border: 1px solid #ED2828;
	border-radius: 8px;
	/*background: url('image/vector/trash-red.png') no-repeat 10% 50%;*/
	color: #ED2828;
}

a.approver-delete:hover {
	/*border: 1px solid #ED2828;*
	/*border-radius: 8px;*/
	background: url('image/vector/trash-red.png') no-repeat 10% 50%;/**/
	color: #ED2828;
}

a.hr-list-next, a.hr-next-icon {
	background: #ffffff url('image/next.jpg') no-repeat 0 0px;
}

a.hr-list-prev, a.hr-prev-icon {
	background: #ffffff url('image/prev.jpg') no-repeat 0 0px;
}

a.hr-list-attach {
	background: url('image/vector/add-green.png') no-repeat 0 0px;
}

a.hr-list-export-excel {
	/* background: #ffffff url('image/export.png') no-repeat 0 0px;  */
	background: #ffffff url('image/vector/excel.png') no-repeat 10% 50%;
	border: 1px solid #41B971;
	border-radius: 8px;
	color: #41B971;
}

a.hr-list-view-profile {
	/* background: #ffffff url('image/profile.gif') no-repeat 0 0px;  */
	background: #0059A8 url('image/vector/my-profile.png') no-repeat 10% 50%;
	border-radius: 8px;
}

input#viewlist.hr-button {
	/* background: #ffffff url('image/back.png') no-repeat 0 0px; */
	padding: 5px 15px;
	width: 70px;
}

input#submit-button.hr-button, input[value="Simpan"].hr-button {
	width: 60px;
	padding-left: 20px;
}

input#sendapprover {
	padding: 6px 10px;
}

input#Button2 {
	background: #0059A8 url('image/vector/submit.png') no-repeat 10% 50%;
	background-size: 15px 15px;
	border-radius: 8px;
	margin-bottom: 1%;
	margin-left: 1%;
	padding: 5px 15px 5px 45px;
}

div.displaybutton input#button2 {
	padding: 5px 15px 5px 45px;
}

input#btn-submit1.button, input#btn-submit2.button {
	background-color: #0059A8;
	color: #ffffff;
	border-radius: 8px;
	padding: 5px 10px;
}

input#Button1 {
	border: 1px solid #0059A8;
	border-radius: 8px;
	color: #ffffff;
}

input#savedraft {
	background: #ffffff url('image/vector/save-blue.png') no-repeat 10% 50%;
	border: 1px solid #0059A8;
	border-radius: 8px;
	color: #0059A8;
	padding: 5px 15px 5px 45px;
}

input#save {
	border-radius: 8px;
}

input#btn-search.hr-button {
	/* background: #0059A8 url('image/vector/search.png') no-repeat 10% 50%; */
	border-radius: 8px;
}

a.hr-next-icon, a.hr-prev-icon {
	font-size: 1.1em;
	margin-right: 5px;
	position: relative;
	height: 17px;
	width: 17px;
	display: block;
	float: left;
}

/* 		a.hr-delete-icon span, a.hr-add-icon span, a.hr-next-icon span, a.hr-prev-icon span{
	display: none;
		} */
div.hr-list-action a span, div.hr-list-action input {
	display: inline-block;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	font-weight: 300;
}

div.hr-list-action input{
	border: none;
	padding: 5px 10px;
}

div.hr-list-action a.hr-list-add {
	color: #ffffff !important;
	text-align: center;
	padding: 5px 15px 5px 25px;
	width: 80px;
}

div.hr-list-action a.hr-list-add span {
	visibility: visible;
}

div.hr-list-action a.hr-list-delete, input.hr-list-delete, a.approver-delete {
	color: #939393;
	text-align: center;
	padding: 5px 15px 5px 25px;
	width: 70px;
}

div.hr-list-action a.hr-list-delete:hover {
	color: #ED2828;
	text-align: center;
	padding: 5px 15px 5px 25px;
	width: 70px;
}

div.hr-list-action a.hr-list-view-profile {
	text-align: center;
	padding: 5px 15px 5px 25px;
	width: 70px;
}

div.hr-list-action a.hr-list-export-excel {
	color: #41B971;
	text-align: center;
	padding: 5px 15px 5px 35px;
	width: 110px;
}

div.hr-list-action input#save {
	text-align: center;
	padding: 5px 15px 5px 25px;
	width: 120px;
	background-size: 15px 15px;
}

div.hr-search-form input#btn-search, div.hr-list-action input#submit-button
	{
	text-align: center;
	color: #ffffff;
	/* padding: 10px 30px 10px 50px; */
	font-weight: 400;
	font-size: 1.1em;
}

/*
		div.pagination a span {
			display: inline-block;
		} */
div.hr-list-action a.hr-list-view-profile span {
	/* display: inline; */
	
}

a.hr-list-mainlink, a.hr-plainlink, a.hr-dialog-picklink, a.hr-dialog-actionlink,
	a.hr-dialog-inner-picklink, a.hr-dialog-actionlink-large {
	color: #000;
	text-decoration: none;
}

tr.hr-list-selected {
	cursor: pointer;
}

table.hr-view-only tr.hr-list-selected {
	cursor: auto;
}

table.hr-list.hr-list-sortable thead th {
	cursor: pointer;
}

table.hr-list thead th.hr-unsorted, table.hr-list thead th.hr-list-selector
	{
	cursor: auto;
}

table.hr-list tr.hr-listing-empty-row {
	height: 50px;
}

table.hr-list tr.hr-listing-empty-row td {
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: green;
}

a.hr-entry-orgtree-lookup span {
	
}

/* --------------------------------- Organization Chart --------------------------------- */
.hr-organization-node, #org-chart-detail, #organization-chart {
	border: 5px solid #ddd;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-o-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	opacity: .9;
	padding: 0px;
	color: #000;
	background-color: #D5AE88;
	z-index: 555;
}

.hr-organization-node-inner {
	padding: 5px;
}

.hr-organization-node-inner div.hr-staffname {
	text-align: center;
}

.hr-organization-node-inner div.hr-staffname a {
	font-size: 1.3em;
	text-decoration: none;
}

.hr-organization-node-inner div.hr-staffname a:hover {
	text-decoration: underline;
}

.hr-organization-node-inner div.hr-position {
	padding-top: 3px;
	font-size: 1.2em;
	text-align: center;
	font-style: italic;
}

.hr-organization-node h2 {
	padding: 0;
	padding-left: 23px;
	padding-right: 23px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 0;
	color: #fff;
	text-align: center;
	background-color: rgb(96, 0, 0);
	position: relative;
	font-size: 1.3em;
}

.hr-organization-node h2 a {
	position: absolute;
	top: 2px;
	right: 3px;
	width: 20px;
	height: 20px;
	display: block;
}

.hr-organization-node-inner font, .hr-organization-node-inner a {
	color: #000;
	font-size: 11px;
}

#hr-organization-action {
	margin-bottom: 10px;
}

#organization-chart {
	width: 100%;
	height: 500px;
	overflow: auto;
	position: relative;
	float: left;
	background-color: white;
}

#org-chart-detail {
	background: #252122 url('image/bg-tooltip.gif') top repeat-x;
	color: white;
	padding: 10px;
	width: 200px;
	height: 300px;
	overflow: auto;
	position: relative;
	float: right;
	margin-right: 5px;
}

#hr-organization-detail {
	overflow: auto;
	text-align: center;
}

#hr-organization-detail img {
	border: 3px solid white;
	background-color: #fff;
}

#hr-organization-detail div {
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 13px;
	padding-left: 10px;
	font-style: italic;
	font-weight: bold;
}

#hr-organization-detail div label {
	text-align: left;
	font-size: 11px;
	display: block;
	font-style: normal;
	font-weight: normal;
}

/* HR Personnel */
div.hr-personnel-left, div.hr-personnel-right {
	float: left;
	width: 48%;
	margin-left: 1%;
}

div#hr-profile-secondary-nav {
	padding-right: 20px;
	text-align: right;
	background-color: white;
}

div#hr-leave-secondary-nav {
	padding-left: 25px;
	text-align: left;
	background-color: #ffffff;
	margin: 0px auto;
	font-size: 1.2em;
}

div#hr-leave-secondary-nav select#year.datafields {
	width: 100px;
}

div.hr-list-action-right {
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	float: right;
	padding: 10px;
}

div.hr-list-action-right select {
	width: 150px;
	height: 30px;
	border: 1px solid #C4C4C4;
	border-radius: 8px;
	margin-top: -6px;
}

p.hr-warning {
	margin: 0;
	color: red;
	padding: 0 20px;
}

p.hr-jobinfo-warning {
	margin: 0;
	color: red;
	font-weight: bold;
	font-size: 12px;
	padding: 0 20px;
}

p.hr-loan-warning {
	margin-bottom: 10px;
	color: red;
	font-weight: bold;
	padding-left: 10px;
}

p.hr-leave-warning {
	margin: 0;
	color: red;
}

table.hr-view-only th.hr-bg-white {
	background-color: #FFF;
}

h4.subtitle {
	margin: 0;
	font-size: 1.1em;
}

div.hr-result {
	width: 550px;
	margin: 120px auto;
}

fieldset.hr-result {
	width: 550px;
}

div.hr-result-icon {
	width: 100%;
	padding: 10px;
	text-align: center;
	float: left;
}

div.hr-result-message {
	text-align: center;
	color: #000000;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2em;
	width: 100%;
}

div.hr-result-message-fail {
	padding-top: 25px;
	padding-bottom: 28px;
}

div.hr-result-message-success {
	padding-top: 20px;
	padding-bottom: 20px;
}

a.hr-result-link {
	padding: 10px 0px;
	background-color: #1ABC9C;
	display: block;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	border-radius: 5px;
	text-align: center;
	font-size: 1.1em;
}

div.hr-result-confirm-link-container {
	background: #CCCCCC;
	height: 30px;
}

a.hr-result-confirm-link {
	float: right;
	display: block;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	margin-top: 5px;
	margin-right: 15px;
}

span.hr-mandatory {
	color: red;
}

td.hr-warning {
	color: red;
}

td.hr-align-top {
	vertical-align: top;
}

form.hr-entry input.hr-date, #hrlookupdiv input.hr-date {
	width: 115px;
	background: #ffffff url('image/vector/calendar.png') no-repeat 99% 2px;
	cursor: pointer;
	padding: 5px;
	border-radius: 7px;
	border: 1px solid;
}

form.hr-entry input.hr-time-list {
	width: 80px;
}

div#tracking_options {
	font-size: 1.1em;
	padding-left: 10px;
	margin-bottom: 10px;
}

div.hr-disclosure-confirmation {
	margin-left: 230px;
}

form.hr-entry input.hr-confirmation-checkbox {
	width: 10px;
}

p.fp_header {
	color: black;
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-size: 20px;
	font-weight: bold;
}

p.fp_label {
	color: black;
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	font-size: 11px;
}

ul.hr-normal-list {
	padding: 0;
	margin: 0;
}

ul.hr-normal-list li {
	list-style-type: none;
	margin-bottom: 3px;
}

div.hr-leave-remark-view {
	position: absolute;
	left: 400px;
	display: inline;
}

div.hr-leave-remark {
	display: inline;
	padding-left: 50px;
}

table.hr-list tr th.hr-top {
	vertical-align: top;
}

/* form.hr-entry div label.hr-entry-input-label { */
/* 	width: 100px; */
/* 	float: left; */
/* } */
div.hr-result-attention {
	width: 550px;
	margin: 0 auto;
}

form.hr-entry div.hr-ol-lookup-button {
	position: absolute;
	top: 5px;
	left: 440px;
}

form.hr-entry div.hr-lookup-button {
	position: absolute;
	top: 20px;
	left: 480px;
}

td.hr-no-drill {
	cursor: default;
}

ul.hr-profile-top-link {
	float: left;
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 10px;
}

a.hr-profile-top-link {
	background: transparent url('image/box_red.jpg') no-repeat 0 50%;
	padding-left: 15px;
	text-decoration: none;
	color: #000000;
}

a.hr-schinfo-top-link {
	background: transparent url('image/box_red.jpg') no-repeat 0 50%;
	padding-left: 15px;
	text-decoration: none;
	color: #000000;
}

ul.hr-schinfo-top-link {
	float: left;
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 10px;
}

a.hr-schinfo-top-link b {
	color: #5F0000;
}

a.hr-profile-top-link b {
	color: #5F0000;
}

img.hr-photo {
	float: left;
	margin-left: 20px;
}

img.hr-photo-profile {
	position: absolute;
	left: 0;
}

div.hr-photo {
	position: relative;
	float: left;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	width: 95px;
	height: 100px;
/* 	border: 1px solid rgb(200, 200, 200); */
	text-align: center;
	vertical-align: middle;
}

ul.hr-profile-sublink {
	margin: 0 140px;
	list-style-type: none;
}

ul.hr-profile-sublink li {
	padding: 3px;
	margin-bottom: 5px;
}

ul.hr-profile-sublink li a {
	padding: 7px;
	background: #F5F5F5;
	color: #000000;
	height: 100%;
	text-decoration: none;
}

form.hr-entry input.hr-list-date-input, #hrlookupdiv input.hr-list-date-input
	{
	width: 110px;
}

table.hr-list a.action {
	font-size: 1.1em;
	margin-right: 5px;
	position: relative;
	height: 24px;
	width: 24px;
	display: block;
	float: left;
}

table.hr-list a.action span {
	display: none;
}

#report_progress {
	font-size: 12px;
	height: 400px;
	padding-top: 120px;
	text-align: center;
}

div#hr-top-action-nav {
	padding-top: 5px;
	float: right;
}

div#hr-top-action-nav form {
	padding: 0;
	margin: 0;
}

h1.hr-record-not-found {
	font-size: 15px;
}

img.display-image {
	max-width: 100%;
}

tr.firstNode span.expander {
	margin-left: 0 !important;
}

div.autocomplete {
	position: absolute;
	width: 250px;
	height: 1px;
	background-color: #FFFFFF;
	border: 1px solid #888;
	margin: 0px;
	padding: 0px;
	z-index: 10000000;
}

div.autocomplete ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px 5px;
	background-color: #FFFFFF;
	border: 1px solid #888;
}

div.autocomplete ul li.selected {
	background-color: ffe09f;
}

div.autocomplete ul li {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0.1em;
	height: 1.5em;
	line-height: 1.5em;
	cursor: pointer;
}

div.loanlink {
	font-size: 12px;
	color: black;
}

div.select-configset {
	position: absolute;
	right: 50px;
	top: 99px;
	z-index: 10000;
	font-size: 1.0em;
}
div.select-configset select {
	width: 150px;
	background: #FFFFFF;
	border: 1px solid #C4C4C4;
	border-radius: 8px;
	padding: 5px 10px;
}

body form.hr-entry div label.has-configset {
	color: red;
}

div.right-arrow-black {
	background-image: url('image/right-arrow-black.jpg');
	background-repeat: no-repeat;
	height: 30px;
	width: 42px;
}

div.left-arrow-black {
	background-image: url('image/left-arrow-black.jpg');
	background-repeat: no-repeat;
	height: 30px;
	width: 42px;
}

div.up-arrow-black {
	background-image: url('image/up-arrow-black.jpg');
	background-repeat: no-repeat;
	height: 42px;
	width: 30px;
}

div.down-arrow-black {
	background-image: url('image/down-arrow-black.jpg');
	background-repeat: no-repeat;
	height: 42px;
	width: 30px;
}

ul.hr-displayList {
	margin: 0px;
	padding: 0px;
}

ul.hr-displayList li {
	list-style-type: none;
	display: block;
	margin: 0;
}

label.tdGreen {
	color: green;
}

input[value="Save"], input#btnSave, input#saveBtn {
	/* background: #ffffff url('image/vector/save-gray.png') no-repeat 10% 50%; */
	border: 1px solid #0059A8;
	padding: 5px 15px;
	border-radius: 8px;
	color: #ffffff;
	display: inline-block;
	width: 70px;
}

input#btn-savedraft {
	background: #ffffff url('image/vector/save-gray.png') no-repeat 10% 50%;
	border: 1px solid #939393;
	padding: 5px 15px 5px 35px;
	border-radius: 8px;
	color: #939393;
	background-size: 15px 15px;
}

input#btn-savedraft:hover {
	background: #ffffff url('image/vector/save-blue.png') no-repeat 10% 50%;
	border: 1px solid #0059A8;
	padding: 5px 15px 5px 35px;
	border-radius: 8px;
	color: #0059A8;
	background-size: 15px 15px;
}

input#btn-sendapprover {
	background: #939393 url('image/vector/submit.png') no-repeat 10% 50%;
	padding: 5px 15px 5px 35px;
	border-radius: 8px;
	color: #ffffff;
	background-size: 15px 15px;
}

input#btn-sendapprover:hover {
	background: #0059A8 url('image/vector/submit.png') no-repeat 10% 50%;
	padding: 5px 15px 5px 35px;
	border-radius: 8px;
	color: #ffffff;
	background-size: 15px 15px;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before, .cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.cf:after {
	clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
	*zoom: 1;
}

.border-top-right-radius {
	border-top-right-radius: 8px;
}

.border-top-left-radius {
	border-top-left-radius: 8px;
}

input.hr-button.hr-search-button {
	padding: 5px 15px 5px 35px;
}

a.hr-add-row {
	background: url(image/vector/add-green.png) 0px 0px no-repeat;
}

a.hr-delete-row {
	background: url(image/vector/trash-gray.png) 0px 0px no-repeat;
	border: none;
}

a.hr-delete-row:hover  {
	background: url(image/vector/trash-red.png) 0px 0px no-repeat;
	border: none;
}

tbody#detail_body {
	font-size: 0.8em;
}

input.attachfile.hr-medium {
	font-color: #fff;
}

a.delstaff span {
	visibility: hidden;
	background: none;
}
}

#maindiv {
	background-color: white;
	width: 100%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


input.btn-print {
	padding: 5px 15px;
	border: none;
}

input#notificationbutton{
	padding: 5px 15px;
	border: none;
}



/* Add button */

input.hr-button.editBeneficiary{
	background: url(image/button/edit-icon.png) 0px 7px no-repeat;
	
}

input.hr-button.hr-back-button{
	border: none;
	padding: 5px 10px;
}

input.hr-button.noprint{
	border: none;
	padding: 5px 10px;
}

a.view-icon{
	background: transparent url(image/button/view-default-icon.png) 0px 10px no-repeat;
	padding: 15px;
}

a.view-icon-selected, a.view-icon:hover {
	background: transparent url(image/button/view-selected-icon.png) 0px 10px no-repeat;
}

input.printCoverLetter  {
	background: transparent url(image/button/print-blue-icon.png) 50% 5px no-repeat;
	padding: 5px 10px;
	border: none;
	margin: 15px 0px 0px 10px;
}

input.changeCategory {
	background: transparent url(image/button/edit-icon.png) 50% 15px no-repeat;
	padding: 15px 10px 5px 10px;
	border: none;
	margin-left: 10px;
}

input#btnAddattach{
	background-color: #41B971;
}

input#find{
	font-size: 1.1em;
	border: none;
	padding: 5px 10px;
	width: 90px;
}

a#extraattach{
	background-color: #41B971;
	color: #fff;
	padding: 5px 10px;
	font-size: 1.1em;
	border-radius: 5px;
	text-decoration: none;
}

input.hr-button.hr-button-medium.del-table-jobduties, input#btn-delete{
	border: 1px solid #939393;
	background: transparent url(image/button/delete-default-icon.png) 8px 2px no-repeat;
	color: #939393;
	padding: 5px 10px 5px 27px;
}

input.hr-button.hr-button-medium.del-table-jobduties-selected, input.hr-button.hr-button-medium.del-table-jobduties:hover, input#btn-delete-selected, input#btn-delete:hover{
	border: 1px solid #ED2828;
	background: transparent url(image/button/delete-selected-icon.png) 8px 2px no-repeat;
	color: #ED2828;
	padding: 5px 10px 5px 27px;
}

input#btn-delete, input#btn-delete-selected, input#btn-delete:hover{
	width: 90px;
}


input#btn-add-jobduties{
	background: #41B971 url(image/button/add-icon.png) 15px 2px no-repeat;
	border: 1px solid #41B971;
	padding: 5px 10px 5px 32px;
}

input.hr-button.btnrevoke {
	background: #fff url(image/button/revoke-icon.png) 15px 2px no-repeat;
	border: 1px solid #0059A8;
	padding: 5px 10px 5px 40px;
	color: #0059A8;
	
}

input.hr-button.btngrant{
	background: #0059A8 url(image/button/grant-icon.png) 8px 50% no-repeat;
	border: 1px solid #0059A8;
	padding: 5px 10px 5px 38px;
}