.icons-entypo {
	font-family: 'entypo-icons';
	font-size: 4em;
}

a.red:before, a.red:after {
	color: red;
}

a.yellow:before, a.yellow:after {
	color: yellow;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
	float: left;
	margin: 0 4px 0 0;
	font-size: 16px;
}

[class^="btn icon-"]:before, [class*="btn icon-"]:before, [class^="btn-primary icon-"]:before, [class*="btn-primary icon-"]:before {
	margin: 2px 4px 0 0;
	font-size: 16px;
}

[class^="btn-large icon-"]:before, [class*="btn-large icon-"]:before {
	margin: -2px 2px 0 0;
	font-size: 24px;
}

[class^="icon-large-x1 icon-"]:before, [class*="icon-large-x1 icon-"]:before {
	margin: -4px 4px 0 0;
	font-size: 24px;
}

[class^="icon-large-x2 icon-"]:before, [class*="icon-large-x2 icon-"]:before {
	margin: -10px 4px 0 0;
	font-size: 32px;
}

h1[class^="icon-large-x2 icon-"]:before, h1[class*="icon-large-x2 icon-"]:before {
	margin: -5px 4px 0 0;
}

.icon-center-top {
	width: 60px !important;
	text-align: center;
}
 [class^="icon-"], [class*=" icon-"] {
 background-image: none;
 width:auto;
 height:auto !important;
}

[class^="icon- after"]:after, [class*="icon- after"]:after {
	margin-left: 4px !important;
}

.information[class^="icon-"]:before, .information[class*=" icon-"]:before {
	color: #549ec3;
}

.warning[class^="icon-"]:before, .warning[class*=" icon-"]:before {
	color: #f7c902;
}

.error[class^="icon-"]:before, .error[class*=" icon-"]:before {
	color: #e10010;
}

.success[class^="icon-"]:before, .success[class*=" icon-"]:before {
	color: #3e9b42;
}

p b.icon-large-x1 {
	margin-top: 4px;
}

/* ==========================================================================
   App Default Styles
   ========================================================================== */
   
/* Framework */




html {
	overflow-y: scroll;
}

html, body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	height: 100%;
	text-rendering: optimizeLegibility;
	webkit-font-smoothing: antialiased;
}

p.version {
	position: fixed;
	top: -4px;
	right: 0;
	z-index: 40000;
	text-align: right;
	padding: 5px 10px;
	font-size: 10px;
	color: #F0F !important;
}

.information p, .warning p, .error p, .success p {
	margin-left: 36px;
}

input, button, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: inherit;
}

input[type="text"], input[type="password"], textarea {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
	-webkit-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
	box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
}
 input[type="text"], input[type="password"] {
 height: 19px;
}

.alert {
	margin: 10px 0 10px 0;
	font-size: 12px;
}

.alert.alert-info a {
    color: inherit;
    font-weight: bold;
}

.alert.alert-error > span > p {
    display: inline;
    color: #b94a48;
}

h1, h2, h3 {
	font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
	color: #585858;
}

h1 {
	font-weight: normal;
	font-size: 32px;
	line-height: 26px;
}

h2 {
	font-weight: normal;
	font-size: 16px;
}

h3 {
	font-size: 14px;
	margin: 5px 0;
	line-height: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
	opacity: 1 !important;
}

.wrapper {
	height: auto !important;
	min-height: 100%;
}

.container {
	background-color: transparent;
	margin: 0 auto;
    width: 1220px !important;
    min-width: 1220px;
}

.container-wide {
	width: 100%;
	min-width: 1200px;
}

.content-wrapper {
	float: right;
	padding: 0 15px;
	width: 1030px;
	position: relative;
    -webkit-box-sizing:content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.content-area {
	float: left;
}

.content-area article {
    padding: 20px 0 0;
}

.content-area article ul.system-messages {
	float: left;
}

.iframe-content {
	margin: 0 0 20px 0!important;
	padding: 0;
	width: 1030px;
	float: left;
}

.iframe-content iframe {
	background-color: transparent !important;
}

.iframe-content h1, .iframe-content a {
	margin: 0 0 20px 0;
}

.iframe-content a {
	position: relative;
	float: none;
	display: inline-block;
}

.content-area-right {
    float: left;
    width: 220px;
    position: relative;
    border-top: 1px solid #fff;
    margin-bottom: 0px;
}

.content-area-right-container {
    display: inline-block;
    float: right;
}

.content-area-top-right-subcontainer {
    top: 0px; 
    float: right;
    margin-top: 20px;
}

.content-area-bottom-right-subcontainer {
    position: absolute;
    bottom: 20px;
    margin-bottom: -20px;
    width: 218px;
}

.hide-this {
    display:none !important;	
}

.hidden-info {
    display: none;
}

.required {
    font-size: large;
    font-weight: bold;
    color: red;
}

.float-left {
	float: left;
}

.float-right {
	float: right !important;
}

.float-none {
	float: none !important;
}

.clear-both {
	clear: both;
}

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

legend {
	display: none;
}

.logo {
	float: left;
}

.logo img {
	margin: 0px;
}


/* Header */



header {
	position: relative;
	width: 100%;
}

header nav.login {
	position: absolute;
	right: 0;
	top: 15px;
	margin-top: 0;
	font-size: 13px;
}

header nav.login p {
	right: 0;
	text-align: right;
}

header nav.utility a {
	padding-top: 27px;
	min-width: 30px;
	color: #666666;
	font-size: 11px;
	line-height: 12px;
	text-decoration: none;
}

header nav.utility a.change-password {
	background: url(img/ico-password.png) center top no-repeat;
}

header nav.utility a.log-out {
	background: url(img/ico-logout.png) center top no-repeat;
}

header nav.bread a.help {
	background: url(img/ico-help.png) left center no-repeat;
	color: #29abe1;
	padding: 0 0 0 30px;
	text-decoration: none;
}

/* End Header */

/* Footer */



footer {
	background-color: #EEEEEE;
	margin: 62px 0 0 0;
	min-width: 1300px;
}

footer nav ul {
	margin: 10px 0 0 0;
	width: auto;
	float: right;
}

footer nav ul li {
	margin: 0;
	padding: 0 10px;
	list-style: none;
	float: left;
}

footer nav ul li a {
	margin-right: 20px;
	font-size: 14px;
	line-height: 14px;
}

footer nav.container {
	padding: 0;
	margin: 0 auto;
	min-height: auto !important;
}

footer nav ul, footer nav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

footer nav ul li.last-child {
	float: right;
	margin: 0px 0 0 0;
}

footer nav ul li.last-child a {
	margin: 0;
}

footer nav ul li a {
	margin-right: 20px;
	font-weight: normal;
	font-size: 14px;
	font-family: Sanchez-regular, Arial, Helvetica, sans-serif;
	text-decoration: none !important;
}
 footer nav ul li a:link span, footer nav ul li a:active span, footer nav ul li a:hover span, footer nav ul li a:visted span {
 color:#666666;
 background:transparent;
}

footer nav ul li a:hover span {
	transition: color 0.2s ease-out;
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	background-color: transparent;
	color: #333333;
}

footer nav ul li a span {
	color: #666666;
	background-color: transparent;
	padding: 24px 0 0 3px;
}

/* End Footer */


/* Section Title */



.title {
	width: auto;
	margin: 0px 0 0 0;
}

.title article {
	margin: 0;
}

/* Modal */




.modal.fade.in {
	top: 140px !important;
}

.modal-backdrop, .modal-backdrop.fade.in {
	opacity: 0.4;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}

.modal {
	width: 560px;
	padding: 20px 40px;
	position: absolute;
	margin-top: 0;
}

.modal h1 {
	font-size: 26px;
	margin: 15px 0 20px 0;
	clear: right;
	display: block;
}

.modal h2 {
	font-size: 14px;
	line-height: 16px;
	margin-top: 0;
}

.modal a, .modal a:link, .modal a:hover, .modal a:visited {
	color: #00a6a6;
	cursor: pointer;
}

.modal p span {
	display: none;
	float: left;
	margin: -3px 0 15px 195px;
}

.modal p.error span {
	display: block;
	float: left;
	margin: -3px 0 15px 195px;
	width: 330px;
}

.modal p {
	display: inline-block;
	line-height: 14px;
}

.modal label, .modal p.uniform label:first-child {
	font-size: 13px;
	font-weight: bold;
	color: #403f3f;
	float: left;
	width: 195px;
	margin-top: 4px;
}

.modal p.uniform label {
	width: 90px;
	font-weight: normal;
	font-size: 12px;
	color: #7e7d7d;
}

.modal p.uniform a {
	float: left;
	clear: left;
	margin-top: -5px;
}

.modal section {
	margin-left: 60px;
}

.modal section h1 {
	font-size: 16px;
	color: #7b7b7b;
}

.modal section p {
	width: 100%;
}

.modal section p label {
	width: 440px !important;
	float: left;
	font-weight: normal !important;
	color: #403f3f;
	line-height: 16px;
}

.modal form p label b {
	float: right;
	font-weight: normal;
	margin-right: 5px;
}

.modal section p label .checker {
	margin-left: -37px;
}

.modal .save-cancel {
	margin-top: 10px;
}

.modal .add-item {
	margin-top: 12px;
}

.modal form p.payment-name input[type="text"] {
	width: 270px;
}

.modal form p.payment-amount input[type="text"] {
	width: 90px;
	text-align: right;
}

.modal .add-pay-slip-message p {
	display: block;
}

.modal .add-pay-slip-message textarea, .modal .add-admin-note textarea {
	margin-top: 10px;
	resize: none;
	width: 545px;
	height: 60px
}

.modal .add-admin-note textarea {
	height: 100px
}

.modal input[type="radio"], .modal input[type="checkbox"] {
	margin: 2px 5px 0 0;
	float: left;
}

.modal .one-off-payment-in label {
	padding-left: 25px;
}

.modal .one-off-payment-in label input[type="checkbox"] {
	margin-left: -25px;
}

.modal.allowance {
	width: 720px;
	left: 40%;
}


/* End Modal */
a:focus {
	outline: none;
}

TD.QuickHelp {
	BACKGROUND-COLOR: black;
	COLOR: white;
	TEXT-ALIGN: center;
}

TD.QuickHelp2 {
	COLOR: black;
}

TD.ErrorMsg {
	BACKGROUND-COLOR: #FF0000;
	COLOR: white;
	TEXT-ALIGN: center;
}

.content-area.manual-pay-details article:first-child {
	border-bottom: 1px solid #fff;
	width: 100%;
}

/* End Framwork */

/* Logged Out */

.logged-out div div header {
	height: 174px;
	width: 100%;
	position: relative;
}

.logged-out div div header nav.bread {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

/* Logged Out */

/* Login */

.login-area {
	width: 575px;
	margin: 0 auto;
}

.login-area h1, .login-area h2 {
	font-size: 36px;
	text-align: center;
	color: #585858;
}

.login-area h1 {
	font-size: 36px;
	line-height: 33px;
	width: auto;
	margin: 0 auto;
}

.login-area h1 span {
	width: 35px;
	height: 32px;
	display: inline-block;
	margin-bottom: -2px;
	background: url(img/ico-login.png) left top no-repeat;
}

.login-area h2 {
	font-size: 17px;
	margin: 0 0 17px 0;
	font-family: Helvetica, Arial, sans-serif;
}

.login-area p {
	font-size: 12px;
	line-height: normal;
}

.login-area form fieldset {
	float: left;
	width: auto !important;
	padding: 10px 25px 0 0 !important;
}

.login-area div {
	float: left;
	width: 170px;
	padding: 0 0 0 25px;
	border-left: 2px solid #B8B8B8;
}

.login-area div strong {
	font-size: 14px;
}

.login-area .footer {
	width: auto !important;
	text-align: center;
	padding: 40px 80px !important;
	border: none;
}

/* End Login */


/* Change Password */

.change-password {
	margin-left: 0px;
}

.change-password h1 {
	font-size: 36px;
	line-height: 33px;
	width: auto;
	margin: 0 auto;
}

.change-password article {
	float: left;
	width: 990px;
	padding: 30px 0 15px 0;
	margin-bottom: 30px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.change-password article h2 {
	margin: 0 0 10px 0;
}

.change-password form {
	float: left;
	width: 410px;
	padding: 0px 25px 15px 0 !important;
}

.change-password.confirmation form {
	width: auto;
	position: relative;
	left: 50%;
	margin-left: -52px;
	float: left;
}

.change-password.confirmation h1 {
	font-size: 24px;
	line-height: 33px;
	width: auto;
	margin: 0 auto;
}

.change-password.confirmation h2 {
	padding-left: 52px;
}

/* End Change Password */


/* Forms */

form {
	margin-bottom: 0px;
}

.form-inline h3 {
	margin: 0 0 10px 0;
}

p, label, input, button, select, textarea, table, tbody {
	font-size: 12px;
	color: #525252;
}

.textarea-characters-left {
	float: right;
	width: auto !important;
	color: #A8A8A8;
}

.textarea-characters-left-warning {
	color: #ff0000;
}

/* End Forms */


.clearfix:before, .clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */




.clearfix {
 *zoom: 1;
}


/* Fix Bootstrap to 1270px (1366px) */
[class*="span"] {
 margin-left: 30px;
}

.row {
    /*margin-left: -30px;*/
    *zoom: 1;
}

.row:before, .row:after {
	display: table;
	line-height: 0;
	content: "";
}

.row:after {
	clear: both;
}

.login-page .container {
	width: 600px;
}



/* Framework - 1280 */



header nav.main-nav {
	margin: 51px 0 0 20px
}

a.btn-large-x, .btn-large-x {
	padding: 12px 30px!important
}

.content-area.welcome article .notice-board {
	margin: 0 200px;
	width: 480px
}

.content-area.welcome {
	padding-left: 120px;
}

.content-area.welcome article .notice-board {
	margin: 0 200px;
	width: 480px
}

.content-area.manual-pay-details {
	width: 795px;
	margin-left: 0!important
}

.manual-pay-details .table.table-grid {
    width: 795px;
}

header nav.login {
	top: 6px
}

.secondary-nav li a, .secondary-nav li a:link, .secondary-nav li a:hover, .secondary-nav li a:visited {
	padding: 7px 4px 7px 12px
}

.template-elements {
	margin-left: 0!important;
	float: left;
}

.table.table-grid {
	width: 970px
}

.secondary-nav {
	margin: 0
}

div.summary-period {
	float: right;
	margin: 0 0 30px
}

div.summary-period label, div.summary-period input {
	display: inline
}

div.summary-period label {
	margin-left: 20px
}

article .btn-general-alt2 {
	margin-right: 10px!important
}

.span13 {
	width: 1270px
}

.span12 {
	width: 1170px
}

.span11 {
	width: 1070px
}

.span10 {
	width: 970px
}

.span9 {
	width: 870px
}

.span8 {
	width: 770px
}

.span7 {
	width: 670px
}

.span6 {
	width: 570px
}

.span5 {
	width: 470px
}

.span4 {
	width: 370px
}

.span3 {
	width: 270px
}

.span2 {
	width: 170px
}

.span1 {
	width: 70px
}

footer {
	min-width: 1200px
}

footer nav ul {
	width: 970px
}

.offset12 {
	margin-left: 1230px;
}

.offset11 {
	margin-left: 1130px;
}

.offset10 {
	margin-left: 1030px;
}

.offset9 {
	margin-left: 930px;
}

.offset8 {
	margin-left: 830px;
}

.offset7 {
	margin-left: 730px;
}

.offset6 {
	margin-left: 630px;
}

.offset5 {
	margin-left: 530px;
}

.offset4 {
	margin-left: 430px;
}

.offset3 {
	margin-left: 330px;
}

.offset2 {
	margin-left: 230px;
}

.offset1 {
	margin-left: 130px;
}

.row-fluid {
	width: 100%;
 *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
	display: table;
	line-height: 0;
	content: "";
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class*="span"] {
	display: block;
	float: left;
	width: 100%;
	min-height: 30px;
	margin-left: 2.564102564102564%;
 *margin-left: 2.5109110747408616%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
	margin-left: 0;
}

.row-fluid .span12 {
	width: 100%;
 *width: 99.94680851063829%;
}

.row-fluid .span11 {
	width: 91.45299145299145%;
 *width: 91.39979996362975%;
}

.row-fluid .span10 {
	width: 82.90598290598291%;
 *width: 82.8527914166212%;
}

.row-fluid .span9 {
	width: 74.35897435897436%;
 *width: 74.30578286961266%;
}

.row-fluid .span8 {
	width: 65.81196581196582%;
 *width: 65.75877432260411%;
}

.row-fluid .span7 {
	width: 57.26495726495726%;
 *width: 57.21176577559556%;
}

.row-fluid .span6 {
	width: 48.717948717948715%;
 *width: 48.664757228587014%;
}

.row-fluid .span5 {
	width: 40.17094017094017%;
 *width: 40.11774868157847%;
}

.row-fluid .span4 {
	width: 31.623931623931625%;
 *width: 31.570740134569924%;
}

.row-fluid .span3 {
	width: 23.076923076923077%;
 *width: 23.023731587561375%;
}

.row-fluid .span2 {
	width: 14.52991452991453%;
 *width: 14.476723040552828%;
}

.row-fluid .span1 {
	width: 5.982905982905983%;
 *width: 5.929714493544281%;
}

.row-fluid .offset12 {
	margin-left: 105.12820512820512%;
 *margin-left: 105.02182214948171%;
}

.row-fluid .offset12:first-child {
	margin-left: 102.56410256410257%;
 *margin-left: 102.45771958537915%;
}

.row-fluid .offset11 {
	margin-left: 96.58119658119658%;
 *margin-left: 96.47481360247316%;
}

.row-fluid .offset11:first-child {
	margin-left: 94.01709401709402%;
 *margin-left: 93.91071103837061%;
}

.row-fluid .offset10 {
	margin-left: 88.03418803418803%;
 *margin-left: 87.92780505546462%;
}

.row-fluid .offset10:first-child {
	margin-left: 85.47008547008548%;
 *margin-left: 85.36370249136206%;
}

.row-fluid .offset9 {
	margin-left: 79.48717948717949%;
 *margin-left: 79.38079650845607%;
}

.row-fluid .offset9:first-child {
	margin-left: 76.92307692307693%;
 *margin-left: 76.81669394435352%;
}

.row-fluid .offset8 {
	margin-left: 70.94017094017094%;
 *margin-left: 70.83378796144753%;
}

.row-fluid .offset8:first-child {
	margin-left: 68.37606837606839%;
 *margin-left: 68.26968539734497%;
}

.row-fluid .offset7 {
	margin-left: 62.393162393162385%;
 *margin-left: 62.28677941443899%;
}

.row-fluid .offset7:first-child {
	margin-left: 59.82905982905982%;
 *margin-left: 59.72267685033642%;
}

.row-fluid .offset6 {
	margin-left: 53.84615384615384%;
 *margin-left: 53.739770867430444%;
}

.row-fluid .offset6:first-child {
	margin-left: 51.28205128205128%;
 *margin-left: 51.175668303327875%;
}

.row-fluid .offset5 {
	margin-left: 45.299145299145295%;
 *margin-left: 45.1927623204219%;
}

.row-fluid .offset5:first-child {
	margin-left: 42.73504273504273%;
 *margin-left: 42.62865975631933%;
}

.row-fluid .offset4 {
	margin-left: 36.75213675213675%;
 *margin-left: 36.645753773413354%;
}

.row-fluid .offset4:first-child {
	margin-left: 34.18803418803419%;
 *margin-left: 34.081651209310785%;
}

.row-fluid .offset3 {
	margin-left: 28.205128205128204%;
 *margin-left: 28.0987452264048%;
}

.row-fluid .offset3:first-child {
	margin-left: 25.641025641025642%;
 *margin-left: 25.53464266230224%;
}

.row-fluid .offset2 {
	margin-left: 19.65811965811966%;
 *margin-left: 19.551736679396257%;
}

.row-fluid .offset2:first-child {
	margin-left: 17.094017094017094%;
 *margin-left: 16.98763411529369%;
}

.row-fluid .offset1 {
	margin-left: 11.11111111111111%;
 *margin-left: 11.004728132387708%;
}

.row-fluid .offset1:first-child {
	margin-left: 8.547008547008547%;
 *margin-left: 8.440625568285142%;
}

input, textarea, .uneditable-input {
	margin-left: 0;
}


 .controls-row [class*="span"] + [class*="span"] {
 margin-left: 30px;
}

input.span12, textarea.span12, .uneditable-input.span12 {
	width: 1156px;
}

input.span11, textarea.span11, .uneditable-input.span11 {
	width: 1056px;
}

input.span10, textarea.span10, .uneditable-input.span10 {
	width: 956px;
}

input.span9, textarea.span9, .uneditable-input.span9 {
	width: 856px;
}

input.span8, textarea.span8, .uneditable-input.span8 {
	width: 756px;
}

input.span7, textarea.span7, .uneditable-input.span7 {
	width: 656px;
}

input.span6, textarea.span6, .uneditable-input.span6 {
	width: 556px;
}

input.span5, textarea.span5, .uneditable-input.span5 {
	width: 456px;
}

input.span4, textarea.span4, .uneditable-input.span4 {
	width: 356px;
}

input.span3, textarea.span3, .uneditable-input.span3 {
	width: 256px;
}

input.span2, textarea.span2, .uneditable-input.span2 {
	width: 156px;
}

input.span1, textarea.span1, .uneditable-input.span1 {
	width: 56px;
}

.thumbnails {
	margin-left: -30px;
}

.thumbnails > li {
	margin-left: 30px;
}

.row-fluid .thumbnails {
	margin-left: 0;
}

.TextLabel {
    color: #525252;
    text-align: Right;
    vertical-align: text-top;
    width: 120px;
    margin-bottom: 5px;
    padding-right: 10px;
    display: table-cell
}

.TextLabelNoWidth {
    color: #525252;
    
    vertical-align: text-top;
    margin-bottom: 5px;
    padding-right: 10px;
    display: table-cell
}

.TextLabel2 {
    text-align: Right;
    width: 120px;
    margin-bottom: 0px;
    padding-right: 10px;
}

.TextLabel3 {
    text-align: Right;
    width: 70px;
    margin-bottom: 5px;
    padding-right: 10px;
}

td .TextLabel3 {
    color: #525252;
    width: 70px;
}

.TextLabel_NoWidth{
    text-align: Left;
    padding-top: 50px;
    padding-left: 10px;
}

.Left {
    text-align: left;
}

.nowrap {
    white-space: nowrap;
}

input[type=text]::-ms-clear {
    display: none;
}

input[type="text"].inputBox,  input[type="number"].inputBox,  input[type="password"].inputBox
{
    line-height: 12px;
    padding: 0px 10px;
    vertical-align: middle;
    margin-bottom: 5px;
    font-size: 12px; 
    font-style: normal; 
    font-weight: normal;
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
}

input[type='button'].disabled, a.disabled:not(.paginate_button ) {
    pointer-events: none;
    cursor: default;
    background: #a7a7a7 !important;
    box-shadow: none !important;
    border: 1px solid #a7a7a7 !important;
}




input[type="checkbox"].inputSelectBox, input[type="radio"].inputSelectBox
{
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 5px;
}

select::-ms-expand{
    width:12px;
    border:none;
    background:transparent;
}

select.selectDropBox
{
    height: 22px;
    line-height: 15px;
    padding: 0px 10px;
    vertical-align: middle;
    margin-bottom: 5px;
    font-size: 12px; 
    font-style: normal; 
    font-weight: normal;
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
    -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
	-webkit-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
	box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
}

select.selectDropBox::-ms-expand {
    width:12px;
    border:none;
    background:transparent;
}


.width1200 {
    width: 1200px !Important; 
}

.width1000 {
    width: 1000px !Important; 
}

.width800 {
    width: 800px !Important; 
}

.width700 {
    width: 700px !Important; 
}

.width650 {
    width: 650px !Important; 
}

.width600 {
    width: 600px !Important; 
}

.width550 {
    width: 550px !Important; 
}

.width400 {
    width: 400px !Important; 
}

.width360 {
   width: 360px !Important; 
}

.width320 {
   width: 320px !Important; 
}

.width300 {
   width: 300px !Important; 
}

.width280 {
   width: 280px !Important; 
}

.width260 {
   width: 260px !Important; 
}

.width240 {
   width: 240px !Important; 
}

.width220 {
   width: 220px !Important; 
}

.width220m2 {
   width: 218px !Important; 
}

.width200 {
   width: 200px !Important; 
}

.width160 {
   width: 160px !Important; 
}

.width140 {
   width: 140px !Important; 
}

.width130 {
   width: 130px !Important; 
}

.width120 {
    width: 120px !Important; 
}

.width100 {
    width: 100px !Important; 
}

.width90 {
   width: 90px !Important; 
}

.width80 {
   width: 80px !Important; 
}

.width70 {
   width: 70px !Important; 
}

.width60 {
   width: 60px !Important; 
}

.width40 {
   width: 40px !Important; 
}

.width30 {
   width: 30px !Important; 
}

.width20 {
   width: 20px !Important; 
}

.widthAuto {
    width: auto !Important;
}


.height40 {
    height: 40px;
}
.height50 {
    height: 50px;
}
.height60 {
    height: 60px;
}
.height80 {
    height: 80px;
}

.heightAuto {
    height: auto;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell !important;
    vertical-align: middle;
}

#progressMessage {
    margin: 10px 0px  0px  0px;
}

.delimiter {
    margin-top: 3px;
    background-color: rgb(206, 206, 206);
    height: 1px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.delimiter2 {
    margin-top: 10px;
     margin-bottom: 10px;
    background-color: rgb(206, 206, 206);
    height: 1px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

h3.SectionHeading {
    font-size: 18px;
    font-weight: bold;
}

h3.ReducedSectionHeading {
    font-size: 16px;
    font-weight: bold;
}

td a.icon-help-circled {
    padding-top: 3px;
    vertical-align: top;
    text-decoration: none;
    cursor: pointer;
}

input[type='button'].btn.btn-general-alt1 {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

 input[type='button'].btn.btn-general-alt2 {
    line-height: 20px;
    padding: 5px 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border-bottom: 1px solid #c3c5c7;
    background: -moz-linear-gradient(top,#c3c5c7 2%,#959191 3%,#6f6b6b 50%,#6e6a6a 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(2%,#c3c5c7),color-stop(3%,#959191),color-stop(50%,#6f6b6b),color-stop(100%,#6e6a6a));
    background: -webkit-linear-gradient(top,#c3c5c7 2%,#959191 3%,#6f6b6b 50%,#6e6a6a 100%);
    background: -o-linear-gradient(top,#c3c5c7 2%,#959191 3%,#6f6b6b 50%,#6e6a6a 100%);
    background: -ms-linear-gradient(top,#c3c5c7 2%,#959191 3%,#6f6b6b 50% #6e6a6a 100%);
    background: linear-gradient(to bottom,#c3c5c7 2%,#959191 3%,#6f6b6b 50%,#6e6a6a 100%);
}

 a.btn-general-alt2 {
     cursor: pointer;
 }

  /* Colour for Withdrawn and Declined and Terminated */
.redColour {
    color: RED !important;
}

/* Currently used in LeaveRequest for leave status(withdraw/declined) */
.darkRedColour {
    color: #BD1763 !important;
}

/* Colour for Pending */
.orangeColour {
    color: #FF8400 !important;
    /*color: #fe9d3b;*/
}

/* Colour for Approved and Partially Processed */
.greenColour {
    color: #859C2B !important;
    /*color: #8FC84A;*/
}

/* Bold the fonts for status within the DataTable */
.boldFont {
    font-weight: bold;
}



 /*  DataTables  */
 table.dataTable.table-bordered td ,table.dataTable.table-bordered th {
    border-collapse:collapse;
    border: 0px solid #ddd;
    border-left: 0px solid #ddd;
 }

table.table-bordered {
     border-left: 0
}

 table.dataTable thead, table.dataTable thead tr {
    
    background: url(img/table-grid-header.png) repeat-x;
    background-position: left bottom;
    background-size: auto 100%;
    line-height: 25px !important;
    text-align: left;
}

 table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #ddd !important;
}
 
table.dataTable > tbody td { 
 height:20px;
}

div.dataTables_filter > label .dataTables_length > label {
    font-weight: normal;
}

.dataTables_length > label > select {
    color: #555;
    font-weight: normal;
}
.dataTables_length > label > select {
    margin-bottom: 10px;
}

.dataTables_info {
    font-size: 12px;
}

select#SelectedPayGroupId {
    width: auto;
    height: 22px;
    line-height: 12px;
    padding: 0px 10px;
    vertical-align: middle;
    margin-bottom: 5px;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
    -webkit-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
    box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
}

select {
     height: 22px;
    line-height: 15px;
    padding: 0px 10px;
    vertical-align: middle;
    margin-bottom: 5px;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
    -webkit-box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
    box-shadow: inset 2px 2px 3px rgba(201,201,201,0.5);
   
}

.dataTables_wrapper .dataTables_length select {
    line-height: 15px;
}

.dataTables_filter input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: textfield; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 2px 2px 3px rgba(201, 201, 201, 0.5);
    -webkit-box-shadow: inset 2px 2px 3px rgba(201, 201, 201, 0.5);
    box-shadow: inset 2px 2px 3px rgba(201, 201, 201, 0.5);
    height: 26px;
}

.dataTables_paginate.paging_simple_numbers {
    font-size: 12px;
}

span.multiselect-selected-text {
    font-size: 13px;
}

table.dataTable > tbody {
    background-color: #fff !important;
}

table.dataTable > tbody tr.selected td.greenColour { 
    color: white !important;
}
       
table.dataTable > tbody tr.selected td.orangeColour  { 
    color: white !important;
}       
   
table.dataTable > tbody tr.selected td.redColour  { 
    color: white !important;
}  

table.dataTable > tbody tr.selected td a.iir.icon-medium.icon-pencil  { 
    color: white !important;
}   

table.dataTable > tbody tr.selected td a.icon-credit  { 
    color: white !important;
}  

table.dataTable > tbody tr.selected td a.icon-info-circled  { 
    color: white !important;
}  

table.dataTable > tbody tr.selected td a.iir.icon-trash.pulsar-lib:before  { 
    color: white !important;
}

/*************************************************/
/*  Drop down for Datatable                      */
/*************************************************/
/* Set the background colour of the dropdown button to be transparent */
.btn-default {
    background-color: transparent !important;
}

/* Repositioning the down arrow button for the dropdown menu */
.btn .caret {
    margin-top: 0!important;
    vertical-align: middle;
}

/* Make the entire row of the dropdown menu clickable. */
.dropdown-menu li a {
    padding: 0 !important;
    line-height: 30px !important;
}

/* No background colour for the dropdown menu before selection */
.dropdown-menu li a {
    background-color: transparent !important;
    background-image: none !important;
}

/* Change the font colour of the active item when hovering on the dropdown menu */
.dropdown-menu .active a:hover label {
    color: #fff;
}

/* Change the font colour of the non-active item when hovering on the dropdown menu */
.dropdown-menu li a:hover label {
    color: #fff;
}

button.multiselect.dropdown-toggle.btn.btn-default.btn-mini.btn-xs {
    background-color: transparent !important;
    background-image: none;
}

.multiselect-container > li > a > label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px;
    text-align: left;
    border-radius: 4px;
}

li > a.multiselect-all > label {
    cursor: pointer;
    font-weight: bold;
}

/**** Nav Tabs ****/
.nav-tabs li.active {
    font-weight: bold;
    -webkit-box-shadow: #CCC -3px -3px 5px;
    -moz-box-shadow: #CCC -3px -3px 5px;
    box-shadow: #CCC -3px -3px 5px;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
}

.nav-tabs > .active > a {
    border-bottom-color: #E4EDF2 !important;
    background-color: transparent !important;
}

.nav-tabs > li > a ,
.modal .nav-tabs > li > a {
    text-decoration: none;
    color: #555; 
    cursor: default; 
    background-color: #E5E5E5; 
    border: 1px solid #ddd !important;
    border-bottom-color: transparent;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}


.nav-tabs > li > a:hover {
    background-color: #E5E5E5; 
}

.nav-tabs > li {
        margin-right: 4px !important;
    }

.nav > li > a {
    position: relative;
    display: block;
    padding:auto;
}

.nav-tabs > li:first-child {
    margin-left: 10px;
}

select[multiple], select[size] {
    height: auto;
    padding-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 0;
}

.ui-accordion .ui-accordion-header .ui-icon {
    left: auto;
    right: 0;
    margin-right: 4px;
}

.ui-widget-content {
    border: 0px;
    background: #F6F6F6;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 0px;
}

.info-icon-color {
    color: #18B9E8 !important;
    text-decoration: none !important;
    cursor: pointer;
}



/* Company Departments */

.departmental-costing {
    margin-left: 0;
    background-color:transparent;
}

.departmental-costing li {
    list-style: none;
    display: block;
}

.departmental-costing li span a {
    text-decoration: none;
    padding: 0 0 0 20px;
    line-height: 22px;
    color: #393939;
}

div.departmental-costing li a {
    padding: 6px 30px;
    display: inline;
    border-top: 1px solid transparent;
}

.departmental-costing li.has-child span a {
    position: relative;
}


.departmental-costing li li > span > a:before {
    font-size: 16px;
    content: '-';
    position: absolute;
    left: 10px;
}

.departmental-costing li.has-child > span > a:before {
    font-family: 'entypo-icons';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    content: '\e81a';
    position: absolute;
    left: 10px;
}

.departmental-costing li.has-child > span > a.open-list:before {
    font-family: 'entypo-icons';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    content: '\e81b';
    margin: 0 8px -3px 0;
}

.departmental-costing li.has-child > span > a.open-list {
    background-color: transparent;
    color: #393939;
    margin-left: -1px;
}

.departmental-costing li.has-child > span > a.open-list {
    background-color: transparent;
    color: #393939;
}

.departmental-costing li.has-child span a.open-list ul {
    background-color: transparent;
    color: #393939;
    border-top: 1px solid transparent;
    border-bottom: 4px solid #000000 !important;
}

.departmental-costing li > ul {
    margin: 0 0 0 -1px;
    padding: 0 0 0px 30px;
    background-color: transparent;
    border-left: none;
}

.main span:hover {
    padding-bottom: 10px;
    padding-right: 20px;
}

.department span:hover  {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 20px;
}

.main span:hover a,
.department span:hover a {
    font-weight: bold;

}

.main span div.addDepartment:hover,
.department span div.addDepartment:hover {
    cursor: pointer;
}

.department span div.editDepartment:hover {
    cursor: pointer;
}

.department span div.deleteDepartment:hover {
    cursor: pointer;
}




/* Employee Departments */

.employeeDepartment {
    margin-left: 0;
    background-color: transparent;
}

.employeeDepartment li {
    list-style: none;
    display: block;
}

.employeeDepartment li span a {
    text-decoration: none;
    padding: 0 0 0 20px;
    line-height: 22px;
    color: #393939;

}

div.employeeDepartment li a {
    padding: 6px 30px;
    display: inline;
    border-top: 1px solid transparent;
}

.employeeDepartment li.has-child span a ul {
    background-color: transparent;
    color: #393939;
    border-top: 1px solid transparent;
    border-bottom: 4px solid #000000 !important;
}

.employeeDepartment li > ul {
    margin: 0 0 0 -1px;
    padding: 0 0 0px 30px;
    background-color: transparent;
    border-left: none;
    color: #393939;
}

.main span:hover {
    padding: 0px;
}

.department span:hover {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 20px;
}




/* Ribbons */
 .corner-ribbon {
    width: 200px;
    background: #e43;
    position: absolute;
    top: 25px;
    left: -50px;
    text-align: center;
    line-height: 50px;
    letter-spacing: 1px;
    color: #f0f0f0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* Custom styles */

.modal .corner-ribbon.sticky {
    position: absolute;
}

.corner-ribbon.sticky {
    position: fixed;
}

.corner-ribbon.shadow {
    box-shadow: 0 0 20px rgba(0,0,0,.5);
}

/* Different positions */

.corner-ribbon.top-left {
    top: 25px;
    left: -50px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right {
    top: 25px;
    right: -50px;
    left: auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left {
    top: auto;
    bottom: 25px;
    left: -50px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right {
    top: auto;
    right: -50px;
    bottom: 25px;
    left: auto;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* Ribbon Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}