/* CSS Document @node 823*/

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
header #wpp_logo img {
	height: 50px;
}
textarea {
	font-family: 'Roboto', sans-serif;
	background-color: #ffffff;
	min-height: 3em;
	font-size: 1em;
}

ul {
	list-style: none;
}
ul.normalUL {
	list-style: disc inside none;
	padding: 10px;
}
ol {
	margin-left: 1.875em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
p {
	margin: 5px 0px 5px 0px;
	line-height: 120%;
}
h1 {
	font-size: 2em;
	line-height: 2em;
	font-weight: normal;
	border: 3px black solid;
	border-radius: 0.5em;
}
h1 span {
	font: inherit;
}
h2 {
	font-size: 1.8em;
	font-weight: bold;
	margin: .25em 0 .25em 0;
	color: #548cab;
	display: inline-block;
}
.usefullinks h2, .relatedlinks h2 {
	font-size: 1.5em;
	margin: 0.8em 0;
	display: block;
}

h2 small {
	font-size: 0.47em;
	font-weight: normal;
	color: #999999;
}
h2.smalltitle {
	font-size: 1.1em;
	line-height: 1em;
	font-weight: normal;
	color: #118CB1;
}
h3 {
	font-size: 1.4em;
	line-height: 2.5em;
	color: #999999;
}

h3 small a {
	font-size: 0.65em;
	font-weight: normal;
	color: #999999;
}

.rsAwardTypeSection h3 {
	font-size: 1.0em;
	line-height: 2em;
	font-weight: normal;
	background: #FAFAFA;
	padding: 2px 2px 2px 20px;
	font-style: italic;
}
h4 {
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
	color: #999999;
}

h5 {
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
}
hr {
	margin: 8px 2px;
	border: none;
	border-top: 1px solid #d2d2d2;
}
.classified {
	padding: 10px;
	font-weight: bold;
	font-style: italic;
	display: inline-block;
}

a img {
	outline: none;
	border: none;
	text-decoration: none;
}

#systemlogoplaceholder {
	line-height: 65px;
	color: #fff;
	font-size: 2.5em;
}
#systemlogoplaceholder a {
	color: #fff;
}
.dataTable a, .dataTable a:hover {
	outline: none;
	border: none;
	text-decoration: none;
}
.dataTable a.button, .dataTable a.button:hover {
	display: inline-block;
}

.dataTable .data_change{
	color: red;
}

/* FONT STYLES */
.small, small {
	font-size: 0.85em;
	line-height: 1.2em;
}
.tiny {
	font-size: 0.85em;
	line-height: 0.85em;
}
strong, .strong {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.light {
	font-weight: normal;
}
em {
	font-style: italic; 
}

.nopadding {
	padding: 0;
}

/* POSITIONAL */
.clr, .clear {
	clear: both;
	margin-bottom: 10px;
}
.ctr {
	text-align: center;
}
.rgt {
	text-align: right;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block;
}
.block {
	display: block;
}
.absmiddle {
	vertical-align: middle;
}
.abstop {
	vertical-align: top;
}
.margin30 {
	margin-left: 30px;
}
.height2{
	height: 2em;
}
.h400 {
	height: 25.000em;
}
.h300 {
	height: 18.750em;
}
.w150 {
	min-width: 9.375em;
}
.w200 {
	min-width: 12.500em;
}
.w300 {
	min-width: 20em;
}
.w400 {
	min-width: 25.000em;
}
.noborder {
	border: 0;
}
.red, .red a:not(.smallbutton), .header1.red {
	color: #E3180D;
}
.orange {
	color: #EF832C;
}
.green {
	color: #8FBA39;
}
.updatelink {
	display: inline;
}
.padding4 {
	padding: 4px;
}
.padding10 {
	padding: 10px;
}
.padding20 {
	padding: 20px;
}
.paddingleft20 {
	padding-left: 20px;
}
.margin10 {
	margin: 10px;
}
.margin15 {
	margin: 0 15px;
}
/* PAGE CONSTRUCTION LAYOUT ELEMENTS */
#contentwrapper {
	margin: 0px 0px 0px 150px;
	position:relative;
}

#contentwrapper .content {
	padding: 0;
}

#footer {
	background: #E3E3E3;
	padding: 5px;
	margin: 10px 20px;
	color: #888888;
	height: 1.8em;
}

.float-left {
	float: left;
	display: inline-block;
}
.float-right {
	float: right;
	display: inline-block;
}
.left-col {
	width: 150px;
}

#sectiontabs, #goback {
	font-size: 0.950em;
}
#sectiontabs {
	background-color: #F5F7F6;
	color: #999999;
}
#sectiontabs a {
	padding: 0;
	border-top: 2px solid #F5F7F6;
	text-decoration: none;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	font-weight: bold;
	color: #999999;
}
#sectiontabs a.active,
#sectiontabs a:hover{
	background-color: #fff;
	color: #3598dc;
	border-top: 2px solid #3598dc;
	border-bottom: 1px solid #fff;
	transition: all 0.3s ease 0s;
}
#sectiontabs ul {
	display: table; 
	width: 100%; 
}
#sectiontabs ul li.sectiontab {
	display: table-cell;
	height: 4em;
	text-align: center;
}
#sectiontabs ul li.sectiontab a {
	display: block;
	padding: 1.5em;
}
#sectiontabs ul li.sectiontab a span {
	position: relative;
	display: block;
	top: 50%;
	transform: translateY(-50%);
}
.sectiontitle {
	background-color: #fff;
	padding: 10px;
}
.sectiontitle h2 {
	color: #3497DB;
	font-size: 1.5em;
}
.sectiontitle2 {
	background-color: #ECF0F1;
	padding: 10px;
}

.tab {
	display: none;
	background-color: transparent;
}

.col-onecol, .col-twocol, .col-threecol, .col-fourcol, .col-thirdscol, .col-twothirdscol {
	box-sizing: border-box;
	padding: 4px;
	display: block;
	margin: 0;
	float: left;
}
.col-onecol {
	width: 25%;
	min-width: 18em;
}
.col-twocol {
	width: 50%;
}
.col-threecol {
	width: 75%;
}
.col-fourcol {
	width: 100%;
}
.col-thirdscol {
	width: 33.33%;
}

.col-twothirdscol {
	width: 66.66%;
}

@media screen and (max-width: 1178px) { 
	.col-twocol { float: none; width: 100%; } 
}

/* LOGIN FORM */
#login, #fgtContainer {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	padding: 30px 50px;
	background:  no-repeat right  #f7f9fa;
	border-radius: 4px;
}

.nowrap {
	white-space: nowrap;
}

/* FORM ELEMENTS */
form:not(#download) {
	display: block;
}
form#download{
	display: inline;
	clear:left;
}
fieldset, .fieldset {
	border: 3px solid #3598DC;
	border-radius: 1em;
	padding: .5em;
	margin: 2px;
	position: relative;
}
.standard fieldset {
	border: none;
}
fieldset fieldset {
	border: none;
	width: 95%;
}
legend {
	font-weight: normal;
	color: #999;
	font-size: 1.4em;
	padding: 5px 10px;
	margin: 0 0 0 -10px;
	width: 98%;
	background-color: transparent;
	position: absolute;
}
.checkbox_group legend {
	position: static;
}
.radio_group legend {
	background-color: #f7f9fa;
	padding: 5px 15px;
	position: static;
}
/*fieldset div.form-item:first-of-type {
	margin-top: 30px;
}*/

label, .label {
	display: block;
	margin: 15px 0 0;
	clear: left;
	color: #576479;
	font-weight: bold;
	position: relative;
}
.ms-drop ul > li label {/*multiple select*/
	margin: 0;
}
div.ms-drop input[type="checkbox"]{/*multiple select*/
	margin-top: 0;
}
button.ms-choice {/*multiple select*/
	border-radius: 0;
	border-color: #CCCCCC;
}
#filter-form button.ms-choice {/*multiple select*/
	min-height: 2.8em;
}
.filtercontent label {
	margin: 0;
}

.fxratedialog label {
	float: left;
	width: auto;
	clear: none;
}
.sharepricedialog label {
	width: auto;
}
label.ui-button{
	width: auto;
	font-size: 1.1em;
	font-family: 'Roboto', sans-serif;
	border: 1px solid #d8dcdf;
}

input[type="text"],
input[type="email"],
input[type="email_multi"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input [type="submit"],
input [type="button"],
textarea {
	border: 1px solid #cccccc;
	padding: 4px;
	margin: 0.2rem 0;
	width: 75%;
}
input[type="email_multi"] {
	width: 95%;
}
input[type="number"] {
	width: 75%;
}
.inline input[type="text"] {
	width: auto;
}

.radio_group input, .radio_group label, .checkbox_group input, .checkbox_group label {
	display: inline-block;
	border: 0px;
	width: auto;
}
/*.radioset {
	font-size: 0.8em;
}
.radioset .on.ui-state-active .ui-button-text {
	background-color:  #75BD24;
	color: #ffffff;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.radioset .off.ui-state-active .ui-button-text {
	background-color:  #E60000;
	color: #ffffff;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}*/

input.slideramount:focus, input.rangeamount:focus {
	border: 0;
	margin: 1px;
}
.inline label { display:inline-block; }
.inline input[type="text"].datepicker,
input[type="text"].hasDatepicker,
input.datepicker,
input.datepicker:focus {
	background: url("images/calendar.png") 90% no-repeat #fff;
	/*border: 0px;*/
	margin: 1px;
	margin-right: 15px;
	/*width: 5%;*/
	min-width: 12px;
	max-width: 10rem;
	overflow: hidden;
	display: inline-block;
	/*float: left;*/
	/*color: transparent;*/
	cursor: pointer;
}
/*.inline input[type="text"].datepicker {
    float: none;
    width: 20px;
}*/
/*.inline input[type="text"].fxrate,
input.fxrate,
input.fxrate:focus,
input.shareprice,
input.shareprice:focus,
input.spdatepicker,
input.spdatepicker:focus {
	background: url("images/calendar.png") 50% no-repeat;
	border: 0px;
	margin: 1px;
	width: 5%;
	min-width: 12px;
	overflow: hidden;
	display: inline-block;
	float: left;
	color: transparent;
	cursor: pointer;
}*/
/*.inline input[type="text"].fxdatepicker,
input.fxdatepicker,
input.fxdatepicker:focus,
input.fxdatepicker1,
input.fxdatepicker1:focus,
input.fxdatepicker2,
input.fxdatepicker2:focus {
	background: url("images/calendar.png") 50% no-repeat;
	border: 0px;
	margin: 1px;
	width: 12px;
	min-width: 12px;
	overflow: hidden;
	display: inline-block;
	float: left;
	color: transparent;
	cursor: pointer;
}*/
input.datepickeralt, input.fxratealt, input.sharepricealt {/*, span.datepickershow*/
	width: 86%;
	max-width: 100px;
	display: inline-block;
}
/*span.datepickershow {
	height: 17px;
	border: 1px solid #cccccc;
	border-radius: 2px;
	margin-bottom: 2px;
	padding: 4px;
	vertical-align: bottom;
}*/
input [type="button"] {
	width: 55px;
}
select, .iechzn {
	border: 1px solid #CCCCCC;
	/*border-radius: 4px 4px 4px 4px;*/
	color: #555555;
	background-color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 2em;
	margin: 0.2rem 0;
	padding: 4px 2px 4px 4px;
	vertical-align: middle;
}
select.ui-datepicker-month, select.ui-datepicker-year {
	padding: 4px 4px 4px 4px;
}

#FilterForm select, #FilterForm .iechzn, #FilterForm .iechznmulti {
	width: 75%;
	box-sizing: border-box;
}

.filtercontent input,
.filtercontent select
{
	margin-bottom: 3px;
}

.grantCitizenship, .grantOfficeID {
	width: 200px;
}

select.passed, select.failed, .ui-selectmenu-text.passed, .ui-selectmenu-text.failed {
	background-position: right 22px top 50%;
}

/*.rangeamount, .slideramount {
	border: 0; 
	color: #f6931f; 
	font-weight: bold;
	background-color: transparent;
}
.range, .slider {
	margin-bottom: 8px;
}*/
.button, .button:focus, a.button, a.button:focus {
	display: inline-block;
	background-color: #616b6f;
	font-weight: bold;
	border: none;
	color: #ffffff;
	padding: 3px 5px;
	font-size: 1em;
	margin: 1px;
	min-width:77px;
	width: auto;
	border-radius: 4px;
	text-align: center;
}
.button:hover, a.button:hover {
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
	background-color: #95a5a6;
	border: none;
}
.button:active {
	color: #ffffff;
}
.button.yellow {
	background-color: #F7DB49;
	color: #6A6A6A;
}
.button.yellow:hover {
	background-color: #F9E26D;
	color: #6A6A6A;
	transition: all 0.3s ease 0s;
}

.bluebutton, .bluebutton:focus {
	display: inline-block;
	background-color: #616b6f;
	border: none;
	color: #ffffff;
	padding: 3px 5px;
	font-size: 1em;
	margin: 1px;
	width: auto;
	border-radius: 4px;
	font-weight: bold;
	text-align: center;
}
.bluebutton:hover {
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
	background-color: #95a5a6;
	border: none;
}
.bluebutton:active {
	color: #ffffff;
}
#titlelinks a.smallbutton,
.smallbutton, .smallbutton:focus {
	display: inline-block;
	background-color: #616b6f;
	border: none;
	color: #ffffff;
	padding: 4px 10px;
	font-size: 0.8em;
	margin: 1px;
	width: auto;
	border-radius: 4px;
	font-weight: bold;
}
.filterlabel {
	display: block;
	width: 100%;
	float: left;

}
.filtercontent {
	clear: both;
	display: block;
	width: 100%;
	float: left;
}
.contentlabel {
	display: block;
	width: 100%;
	float: left;
}

.expandbutton {
	background-image: url(images/plus.png);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
}
.contractbutton {
	background-image: url(images/minus.png);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
}

a.deletebutton {
	background-color: #FFB2B2;
	color: #ffffff;
}
a.deletebutton:hover {
	background-color: #f40;
	color: #ffffff;
	transition: all 0.3s ease 0s;
}
#titlelinks a.smallbutton {
	line-height: 1em;
}
#titlelinks a.smallbutton:hover, 
.smallbutton:hover {
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
	background-color: #95a5a6;
	border: none;
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']).failed, select.failed, textarea.failed, span.failed, div.failed, td.failed {
	border: 2px solid #ff0000;
	border-radius: 4px;
}
.good {
	background: url("images/accept.png") no-repeat 98%;
}
.bad {
	background: url("images/Close-Delete-circle.png") no-repeat 98%;
}

.readonly {
	color: #555555;
	background-color: #F0F0F0;
}
/* add on hover to not show border */
/*input[type="text"].readonly:focus {
	border: 1px solid #cccccc;
	margin: 1px;
	transition: all 0.3s ease 0s;
}*/

.fail {
	color: #D1363A;
	padding-left: 20px;
}
.pass {
	color: #75BD24;
	padding-left: 20px;
}

input[type=number].passed,
input[type=number].failed {
	background-position: right 21px center;
}

sup.req {
	color:#ff0000;
	text-transform: lowercase;
	font-size: 0.9em;
}

.expandable {
	display: none;
}
/* modal 'pop-up' box */
#modalmask, #toolboxmask {
	position:absolute;
	top:0px; /* start from top */  
	left:0px; /* start from left */  
	height:100%; /* cover the whole page */  
	width:100%;  
	z-index: 9000;
	background-color:#fff;
	display:none;
}
#modalBox {
	display: none;
	position: fixed;
	width:95%;
	max-width: 75em;
	height: auto;
	min-height: 18em;
	z-index: 10000;
	font-family: 'Roboto', sans-serif;
	color: #000000;
	background: #f8f8f8;
	font-size: 0.9em;
	line-height: 1em;
	font-weight: normal;
	float: right;
	overflow: hidden;
	box-shadow: 0px 7px 35px 0px rgba(0,0,0,0.75);
}

#draghandle {
	padding: 10px;
	cursor: move;
	background-color: #3598DC;
	color: #fff;
}
#modalcontent {
	margin: 0 auto;
	overflow: auto;
	height: auto;
	font-size: 1em;
	line-height: 1.2em;
	padding: 30px;
}
#modalcontent .display {
	min-width: auto;
}
/*#modalcontent h2:hover,
.addform h4:hover {
	cursor: move;
}*/
#modalcontent h1:hover {
	cursor: move;
}
.modalclose {
	font-size: 1.5em;
	font-family: 'Roboto', sans-serif;
	line-height: 1.5em;
	font-weight: bold;
	color: #7b7b7b;
	position: absolute;
	top: 0px;
	right: 15px;
	background: url("images/modal-close.png") 0px 0px no-repeat;
	height: 42px;
	width: 42px;
	z-index: 10500;
}

#loading {
	display: none;
	position: fixed;
	bottom: 0;
	width: 20%;
	left: 40%;
	text-align: center;
	padding: 20px 0;
	background-color: #D0E0F2;
	border-radius: 10px 10px 0px 0px;
}

#msgBoxBox {
	position: fixed;
	bottom: 4px;
	border: none;
	left: 10px;
	width: auto;
	z-index: 9003;
}
.msgBox {
	display: inline-block;
	float: left;
	bottom: 4px;
	border-bottom: none;
	left: 10px;
		font-size: 11px;
	width: 18em;
	padding-bottom: 20px;
	margin-right: 8px;
	z-index: 9003;

}
.msgcontent {
	margin: 0 auto;
	overflow: auto;
	font-size: 1em;
	line-height: 1.2em;
	padding: 0 8px 8px 8px;
}
a.msgclose {
	font-size: 0.8em;
	font-family: 'Roboto', sans-serif;
	line-height: 1.0em;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: right;
	margin: 0px 4px 3px 0px;
}

/* Confirmation Box */
.conf {
	background: url("images/tick.png") 10px 10px no-repeat;
	background-color: #BEE7B8;
	padding-top: 20px;
	font-weight: normal;
}
/* Warning Box */
.warningbox {
	background: url("images/error.png") 10px 10px no-repeat;
	background-color: #F9DF74;
	padding-top: 20px;
	font-weight: normal;
}
/* Notify/Prompt Modal */
.notification, .error, .addform {
	padding: 10px;
}
.notification h4 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: capitalize;
	line-height: 1.5em;
	color: #7b7b7b;
}
.notification h5 {
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: capitalize;
	line-height: 1.5em;
}
.addform h4 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: capitalize;
	line-height: 1.5em;
	color: #8FBA39;
}
.addform h4 div { 
	 width:20px; height:20px; background:url('images/icon-20pxGreen.png') -204px 0px; margin-right: 10px; display: inline-block; margin-bottom: -0.125em;
} 
.notification h4 div { 
	width:23px; height:20px; background:url('images/icon.png') -2539px 0px; margin-right: 10px; display: inline-block; margin-bottom: -0.125em;
} 
/* Error Modal */
.error h4 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: capitalize;
	line-height: 1.5em;
	color: #E3170D;
}

.info, .success, .warn, .err, .validation, .question {
	margin: 10px 0px 10px 0;
	padding:15px 10px 15px 60px;
	background-repeat: no-repeat;
	background-position: 10px center;
	font-size: 1em;
	line-height: 1.5em;
}

#msgBoxBox .err, #msgBoxBox .info, #msgBoxBox .success, #msgBoxBox .warn, #msgBoxBox .validation, #msgBoxBox .question {
	box-shadow: 1px 1px 5px #646566;
	border-radius: 5px;
}
.info {
	color: #fff;
	background-color: #3598dc;
	background-image: url("images/info.png");
}
.success {
	color: #fff;
	background-color: #4F8A10;
	background-image:url('images/success.png');
}
.warn {
	color: #fff;
	background-color: #f08a24;
	background-image: url('images/warning.png');
}
.err {
	color: #fff;
	background-color: #D8000C;
	background-image: url('images/warning.png');
}
.err a { color: #fff; text-decoration: underline; }
.validation {
	color: #D63301;
	background-color: #FFCCBA;
	background-image: url('images/validation.png');
}
.question {
	color: #244E73;
	background-color: #C2DCF2;
	background-image: url("images/question.png");
}
.highlight {
	background-color: #f7f9fa;
	border: 1px solid #ccc;
	padding: 20px;
}
.big {
	font-size: 1.3em;
}
.info ul {
	list-style: disc inside none;
	padding: 10px;
}

/* DataTables modifications */
table.dataTable {
	font-size: 0.85em;
}
/* DataTables modifications end - more elsewhere */
.cycledetailbox {
	display: inline-block; 
	overflow: auto;
}
.withsal {
	color: #7C8D00;
}
.withoutsal {
	color: #55575A;
}
.Approved, .Confirmed {
	color: #7C8D00;
}
.Unapproved, .Unconfirmed {
	color: #BA2F2F;
}
.Obsolete {
	color: #c2c2c2;
}

.historydetailbox .display thead {
	background-color: #E6EAEF;
}

th:active {
	outline: none;
}

.top .dataTables_info {
	float: none;
}

tfoot input {
	margin: 0.5em 0;
	width: 100%;
	color: #444;
}
tfoot input.search_init {
	color: #999;
}

td.group {
	background-color: #d1cfd0;
	border-bottom: 2px solid #A19B9E;
	border-top: 2px solid #A19B9E;
}
td.details {
	background-color: #d1cfd0;
	border: 2px solid #A19B9E;
}

/*basictbl used in salary module*/
table.basictbl {
	font-size: 0.85em;
	width: 100%;
}
table.basictbl thead th {
	cursor: default;
	padding: 5px 10px 5px 0;
}

table.basictbl tbody tr, table.basicreporttbl tbody tr {
	margin-top: 6px;
	padding: 4px;
}

table.basictbl tbody td {
	border: none;
	background-color: #ffffff;
	line-height: 18px;
	font-size: 11px;
	padding: 5px 10px 5px 0;
}
table.basictbl .button {
	margin: 0;
}

table.basictbl tbody tr:hover td {
	background-color: #e5eff8;
}
table.basictbl tbody td.redshade {
	background-color: #F2DCDB;
	font-style: italic;
}
table.basictbl thead th.redshade {
	background-color: #F2DCDB;
	font-style: italic;
}
table.basictbl2 {
	width: 100%;
}
table.basictbl2 th {
	cursor: default;
	width: 20%;
}
table.basictbl2 tbody tr {
	margin: 0;
	padding: 2px;
}
table.basictbl2 tbody td {
	border: none;
	background-color: #ffffff;
	line-height: 10px;
	padding: 2px;
}
table.basictbl2 tr:hover td {
	background-color: #e5eff8;
}

table.basicreporttbl tbody td {
	border: none;
	background-color: #ffffff;
}

table.admin {
	margin:1em auto;
	border-collapse:collapse;
}
table.admin th {
	border-bottom:1px solid #e5eff8;
	padding:.3em 1em;
	text-align:right;
	font-weight: bold;
}
table.admin td {
	border-bottom:1px solid #e5eff8;
	padding:.3em 1em;
	text-align:left;
}
table.admin tr.odd td {
	background:#f7fbff;
}

table.display td.grouping,
.grouping {
	background-color: #f2f2f2;
	color: #666666;
}
div.grouping{
	margin-top: 6px;
	padding: 4px;
}

div.icon {
	padding: 0;
	margin: -2px 0 0;
	border: 0px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 0px;
}
a .icon {
	vertical-align: middle;
}

.d {
	display: inline;
	float: left;
	width: 25px;
}
.t {
	float: left;
	line-height: 200%;
	margin-left: 20px;
}
.totals th {
	text-align: left;
	padding: 3px;
}
.totals td{
	border-bottom: 1px dotted;
	text-align: right;
	padding: 3px;
}

.grid {
	width: 100%;
	min-width: 755px;
	margin: 0 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.grid-pad, .table1 td.grid-pad {
	padding: 0;
}
#alternatenav {
	display: none;
}

.hidden, .sectioncontent .hidden {
	display: none !important;
}

.txt {
	line-height: 1.1em;
}

element.style {
	width: 296px;
}

.ui-dialog{
	z-index:11000 !important;
}
.ui-dialog .ui-dialog-content {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
}

#chartdiv {
	min-height: 500px;
	display: inline-block;
	overflow: visible;
	position: relative;
}

input[type="text"]:disabled, 
input[type="email"]:disabled, 
input[type="email_multi"]:disabled,
input[type="password"]:disabled, 
input[type="number"]:disabled, 
input[type="url"]:disabled, 
input[type="tel"]:disabled, 
input [type="submit"]:disabled, 
textarea:disabled
 {
   border: 0px;
   background-color: transparent;
} 

#dropbox {
	border: 1px gray dashed; 
	width: 99%; 
	min-height: 10em;
	text-align: center;
	color: gray;
	padding-top: 30px;
}

.progress {
	display: none;
}
#table2 td:not(:first-child) {
	padding-left: 4em;
}
#table2 th, #table2 td {
	padding: 0 10px;
}
.step, .stage {
	width: 24.7%;
	display: inline-block;
	text-align: center;
	color: #848484;
}
.stage a, .stage a:hover {
	color: #848484;
	font-weight: normal;
	border: none;
}
.stepCurrent, .stage a.stageCurrent {
	color: #576479;
	font-weight: bold;
}
#line1 {
	padding: 30px 10px 0 10px;
	height: 30px;
}

.line1, .stage {
	width: 14%; /* fallback for browsers without support for calc() */
	box-sizing: border-box;
	width: calc((100% - 2px) / 7);
}
.thirds {
	width: 33.3%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 3);
}
.fourths {
	width: 25%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 4);
}
.fifth {
	width: 20%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 5);
}
.sixth {
	width: 16%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 6);
}
.eighth {
	width: 12.5%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 8);
}
#labels1 {
	padding: 0 10px 10px;
}
.line1 {
	overflow: visible;
	display: inline-block;
	position: relative;
	height: 4px;
	background-color: #CCCCCC;
	border-top: 1px #CCCCCC solid;
	border-bottom: 1px #CCCCCC solid;
}
.stepnav {
	background-color: #fff;
	margin-bottom: 40px;
}

.line1:first-child {
	border-left: 1px #CCCCCC solid;
	border-top-left-radius: 5px 50%;
	border-bottom-left-radius: 5px 50%;
}
.line1:last-child {
	border-right: 1px #CCCCCC solid;
	border-top-right-radius: 5px 50%;
	border-bottom-right-radius: 5px 50%;
}
.stage:first-child {
	border-left: 1px #fff solid;
}
.stage:last-child {
	border-right: 1px #fff solid;
}
.line2 {
	width: 24.7%;
	height: 2px;
	background-color: #576479;
	overflow: visible;
	display: inline-block;
}
.outercircle {
	background-color: white;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	position: relative;
	top: -20px;
	left: calc(50% - 20px);
	border: 1px #CCCCCC solid;
	border-radius: 50%;
	padding: 4px;
}
.circle1 {
	background-color: #95A5A6;
	box-sizing: border-box;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	position: relative;
	text-align: center;
	line-height: 30px;
	color: white;
	font-weight: bold;
	font-size: 1.3em;
	display:block;
}
.circle1:hover,
.sectioncontent .circle1:hover {
	color: white;
	font-weight: bold;
	border: none;
}
.circle2 {
	background-color: #576479;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	position: relative;
	top: -4px;
	left: 49%;
}
.circleBig {
	width: 16px;
	height: 16px;
	top: -7px;
}
#cp {
	width: 100%;
}
.navy {
	background-color: #548cab;
}
table.importtable{
	margin-left:auto; 
	margin-right:auto;
}
table.importtable th{
	text-align: left;
	padding-bottom: 15px;
	padding-right: 15px;
	font-weight:bold;
}
table.importtable td{
	text-align: left;
	padding-left: 0em;
	padding-right: 15px;
}
table.importerrortbl{
	margin-left:auto; 
	margin-right:auto;
	width:60%;
	padding:0px;
	padding:10px;
}
table.importerrortbl th{
	border-bottom:0px solid #000000;
	text-align:center;
	padding:10px;
	font-weight:bold;
}
table.importerrortbl td{
	text-align: center;
	border-bottom:1px solid #000000;
	padding:10px;
}

.loadingdiv {
	display:	none;
	position:   fixed;
	z-index:	100000;
	top:		65px;
	left:	   0;
	height:	 100%;
	width:	  100%;
	background: rgba( 255, 255, 255, .8 ) 
				url("images/ajax-loader.gif") 
				50% 50% 
				no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
	overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loadingdiv {
	display: block;
}

.bold {
	font-weight: bold;
}

.pagecontent {
	padding-left: 10px;
	padding-right: 10px;
}
/*switch control - used in salary and def bon update*/
.switch {
	position: relative;
	display: block;
	width: 75px;
	height: 30px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 49px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
}
/* Switch Left Right
==========================*/
.switch-left-right .switch-label {
	overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
	width: 20px;
	height: 20px;
	top: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 11px 0 0 0;
	text-indent: -12px;
	border-radius: 20px;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
	/*background: #3598DC;*/
	background: #616b6f;
	text-align: left;
	padding-left: 50px;
	padding-right: 10px;
}
.switch-left-right .switch-label:after {
	text-align: left;
	text-indent: 9px;
	background: #85C401;
	left: -75px;
	opacity: 1;
	width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
	opacity: 1;
	left: 75px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
	left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
	background: inherit;
}
.givemespace {
	margin-top: 20px;
}

.validation-help {
	display: none;
	padding: 2px;
	color: red;
	font-weight: bold;
	width: 75%;
}
.validation-help-on {
	display: block;
	min-width: 150px;
}

/* Expandable sections*/
.expandable-row {
	background: #4bacc6;
	border: none;
	min-height: 61px;
	margin-bottom: 14px;
	clear:both;
}
.expandable-row-sub {
	border: none;
	min-height: 25px;
	margin-bottom: 14px;
	width: 100%;
	display: inline-block;
}
.expanding-section {
	display:none;
	padding-top: 5px;
	background: #f9fafa;
	padding: 10px 15px;
	position: relative;
	white-space: normal;
}

.expandable-list-section .expandable-row .expanding-section {
	background-color: transparent;
}

.expanding-section.open {
	display:block;
}

.expandable-row .click-to-select {
	width: 2%;
	float: left;
	margin: 13px 0 0 15px;
}

.expandable-row .title {
	padding: 10px 0 10px 15px;
	font-size: 1.2rem;
	line-height: 41px;
	font-weight: bold;
	word-spacing: 3px;
	letter-spacing: 1px;
	margin: 0;
	clear:left;
	width: 40%;
	float: left;
	color: #FFFFFF;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
}

.expandable-row-sub .title-sub-open {
	padding: 10px 0 10px 15px;
	font-size: 1rem;
	line-height: 1rem;
	font-weight: bold;
	margin: 0;
	/*width: 40%;*/
	float: left;
	color: #4bacc6;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	display:none;
}

.expandable-row-sub .title-sub-load-open {
	padding: 10px 0 10px 15px;
	font-size: 1rem;
	line-height: 1rem;
	font-weight: bold;
	margin: 0;
	/*width: 40%;*/
	float: left;
	color: #4bacc6;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	display:block;
}

.expandable-row-sub .title-sub-closed {
	padding: 10px 0 10px 15px;
	font-size: 0.9rem;
	line-height: 0.9rem;
	font-weight: normal;
	text-decoration: underline;
	margin: 0;
	width: auto;
	color: #4bacc6;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
}
a.remuneration_details {
	color: #4bacc6;
	font-family: 'Roboto', sans-serif;
	text-decoration: underline;
	font-weight: normal;
}

.expandable-row-sub .close-sub {
	padding: 30px 0 10px 0;
	font-size: 0.9rem;
	line-height: 0.9rem;
	font-weight: normal;
	text-decoration: underline;
	margin: 0;
	width: auto;
	color: #4bacc6;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	display: inline-block;
}

.expandable-row-sub .click-to-expand {
	display: inline-block;
	width: auto;
}

.expandable-row.small_title .title {
	font-size: 1rem;
	color: #333333;
	font-family: Arial;
	word-spacing: 0px;
	letter-spacing: 0px;
}

.expandable-row .summary {
	padding: 10px 0 10px 15px;
	width: 50%;
	float: left;
	word-spacing: 1px;
	font-size: 0.9rem;
	margin-right: 1%;
	text-align: right;
	color: #FFFFFF;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	line-height: 41px;
}
.expandable-row .summary span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

.expandable-row .spacer {
	width: 30px;
	display: inline-block;
}

.expandable-row .arrow-down {
	background: url("images/expand_arrow.png") right center no-repeat transparent;
	border: medium none;
	color: #FFFFFF;
	cursor: pointer;
	text-align: center;
	max-width: 35px;
	float: right;
	margin-top: 22px;
	margin-right: 5px;
	content: " ";
	width: 15px;
	height: 15px;
	display: block;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
} 
.expandable-row .arrow-up {
	background: url("images/collapse_arrow.png") right center no-repeat transparent;
	border: medium none;
	color: #FFFFFF;
	cursor: pointer;
	text-align: center;
	max-width: 35px;
	float: right;
	margin-top: 25px;
	margin-right: 5px;
	content: " ";
	width: 15px;
	height: 15px;
	display: block;
	margin-left: -4px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}


@media screen and (max-width: 550px) { 
	.expandable-row .summary {
		display: none;
	}
	.expandable-row .title {
		width: 70%;
	}
	.expandable-row .arrow-down,
	.expandable-row .arrow-up {
		min-width: 30px;
		width: 9%;
	}
}

.expandable-list-section {
	overflow: auto;
}
_:-ms-fullscreen, :root .expandable-list-section { overflow: scroll; }

.expandable-list-section .expandable-row {
	background: #FFF;
	border: none;
	min-height: 61px;
	margin-bottom: 14px;
	clear:both;
}

.expandable-list-section .click-to-expand {
	cursor: pointer;
}

.expandable-list-section .click-to-expand.open,
.expandable-list-section .expandable-row .expanding-section,
.expandable-list-section .expandable-row:not(.header):hover {
	background: #F9FAFA;
}

.expandable-list-section .expandable-row:nth-of-type(odd) {background-color: #F9FAFA;}

.expandable-list-section .expandable-row .expanding-section .header2 {
	background: transparent;
}

.expandable-list-section .header {
	background: #f3f1f2;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	color: #5b5b5b;
	margin-bottom: 0px;
}

.expandable-list-section .data {
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	color: #5b5b5b;
}
.expandable-list-section .header .data-item {
	display:inline-block;
	margin: 0; 
	padding: 0;
	padding-left: 10px;
	vertical-align: top;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	white-space: normal;
}
.expandable-list-section .data .data-item {
	display:inline-block;
	margin: 0; 
	padding: 0; 
	padding-left: 10px;
	vertical-align: top;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	white-space: normal;
}
.expandable-list-section .data .data-item:first-of-type,
.expandable-list-section .data .data-item:last-of-type {
	padding-left: 0;
}
.expanding-override {
	display: inline-block;
	width:95%;
	height: 61px;
	white-space: nowrap;
}
.expandable-list-section .click-to-expand {
	height: 100%;
}

.expandable-list-section .arrow-down {
	background: url("images/collapse_arrow_grey.png") right center no-repeat transparent;
	float: none;
}

.expandable-list-section .arrow-up {
	background: url("images/expand_arrow_grey.png") right center no-repeat transparent;
	float: none;
}

.more-info {
	background-image: url(images/view_details.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 32px;
	height: 36px;
	cursor: pointer;
}

* html .clearfix {
	height: 1%;
}
*:first-child + html .clearfix {
	min-height: 1%;
}
.clearfix { clear: both; }
/* IE6 */
* html .clearfix { height: 1%; }
/* IE7 */
*:first-child + html .clearfix { min-height: 1%; }
/** Markup free clearing.  @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clear { clear: both; }

#filter-form .form-item {
	margin-top: 0;
	margin-bottom: 1em;
	display: inline-block;
	width: 20%;
	margin-bottom: 0;
	margin-right: 25px;
}

#filter-form .form-item.double-width {
	width: 42%;
}

#filter-form .advanced-filter-spacing .form-item {
	margin-right: 0px;
}
.notebox {
	position: relative;
	display: inline-block;
}
.notebox .notebox-icon {
	background-size: 30px 30px;
	background-image: url(images/message.png);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	float: right;
	height: 30px;
	position: relative;
	width: 30px;
	z-index: 50;
}
.notebox .notebox-helper {
	background-color: #545454;
	color: #ffffff;
	border: 1px solid #545454;
	border-radius: 10px;
	display: none;
	padding: 10px;
	position: absolute;
	z-index: 8999;
	box-shadow: 0 0 10px rgba(201,202,204,0.9);
	width: 450px;
	white-space: pre-line;
	float: right;
	left: 25px;
	top: 20px;
	text-align: left;
}
.helpbox {
	display: inline-block;
}
.helpbox .helpbox-icon, .helpbox .helpbox-icon-small {
	background-size: 30px 30px;
	background-image: url(images/help-32.png);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding: 0 5px;
	height: 30px;
	width: 30px;
	z-index: 50;
}
.helpbox .helpbox-icon-small {
	background-image: url(images/help-16.png);
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
	top: 3px;
}
.helpbox .helpbox-text {
	display: none;
}
.ui-dialog .helpbox-dialog {
	background: #42c0fb;
	color: #ffffff;
	border-radius: 5px;
	white-space: pre-line;
}

.edit_button, .edit_button:focus, .edit_button_opco, .edit_button_opco:focus { 
	background-image: url(images/edit_button.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	min-width: 30px;
}
.delete_button, .delete_button:focus { 
	background-image: url(images/cross.png);
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	min-width: 30px;
}
.add_button, .add_button:focus { 
	background-image: url(images/tick.png);
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	min-width: 30px;
}

.orange_warning {
	background-image: url(images/orange_warning.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}

.green_tick {
	background-image: url(images/green_tick.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}

.red_cross {
	background-image: url(images/red_cross.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}

.right_arrow {
	background-image: url(images/grey_arrow_in_grey_circle.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}

input.clearbutton, input.clearbutton:focus, input.clearbutton:focus:enabled, input.clearbutton:active {
	display: inline-block;
	background-color: #FFFFFF;
	font-weight: normal;
	border: 1px solid #616b6f;
	color: #616b6f;
	padding: 6px 7px;
	font-size: 1.6em;
	margin: 5px;
	min-height: 45px;
	min-width:127px;
	height: auto;
	width: auto;
	border-radius: 4px;
	text-align: center;
	float:right;
	clear:left;
	font-family: 'Roboto', sans-serif;
}
.modalclosebutton {
	display: none;
	background-color: #FFFFFF;
	font-weight: normal;
	border: 1px solid #616b6f;
	color: #616b6f;
	font-size: 1.2em;
	margin: 5px;
	height: auto;
	width: auto;
	border-radius: 4px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}
.modalclosebutton,
input.clearbutton {
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.modalclosebutton:hover {
	color: #fff;
}
.modalclosebutton:hover,
input.clearbutton:hover:enabled {
	cursor: pointer;
	background-color: #95A5A6;
	border: 1px solid #616b6f;
}

input.applybutton, input.applybutton:focus, input.applybutton:focus:enabled, input.applybutton:active {
	display: inline-block;
	background-color: #616b6f;
	font-weight: normal;
	border: 1px solid #616b6f;
	color: #FFFFFF;
	padding: 6px 7px;
	font-size: 1.6em;
	margin: 5px;
	min-height: 45px;
	min-width:127px;
	height: auto;
	width: auto;
	border-radius: 4px;
	text-align: center;
	float:right;
	clear:left;
	font-family: 'Roboto', sans-serif;
}
input.applybutton {
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
input.applybutton:hover:enabled {
	cursor: pointer;
	background-color: #95A5A6;
	border: 1px solid #616b6f;
}

#entity-select .form-item select,
#filter-form .form-item select,
.dataTables_wrapper select {
	width:100%;
	min-height: 3.1em;
	line-height: 2.8em;
}
.dataTables_wrapper select {
	width: auto;
}
#entity-select .form-item select option,
#filter-form .form-item select option,
	.dataTables_wrapper select option {
	min-height: 2em;
}

#filter-form div.iechznmulti {
	width:100%;
}
/*.dataTables_filter input,*/
#filter-form .form-item input:not([type="checkbox"]) {
	width:96%;
	min-height: 2.05em;
}
#entity-select .form-item label,
#filter-form .form-item label {
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	color: #6e6e6e;
	margin-bottom: 7px;
}
#filter-form .form-item li label {/*multiple select*/
	margin-bottom: 0;
}
#filter-form .form-item .passed {
	background: #FFFFFF none;
}
#filter-form .form-item .failed {
	background-color: #FFFFFF;
}
#filter-form .form-item select.advanced_filter  {
	width:auto;
	padding: 2px;
}
#filter-form .expandable-row-sub .form-item {
	min-width: 22%;
	width: auto;
}

#filter-form .expandable-row-sub .form-item .form-item {
	padding: 2px;
}
#filter-form .expandable-row-sub .advanced-filter-spacing {
	width: 100%;
	padding-top: 5px;
}

/* Header*/
.header1, .header2 {
	border: none;
	min-height: 40px;
	font-size: 1.4rem;
	line-height: 2rem;
	margin-top: 10px;
	width:98%;
	clear: both;
	border-radius: unset;
}
.header1 {
	background: #4bacc6;
	color: #FFFFFF;
	padding: 20px 10px 10px 10px;
}

/* Header*/
.header2 {
	background: #FFFFFF;
	color: #4bacc6;
	padding: 5px 10px 0 10px;
}

/* Header*/
.header3 {
	border: none;
	min-height: 45px;
	font-size: 1.2rem;
	line-height: 2rem;
	color: #878787;
	margin-top: 20px;
	font-weight: 500;
}

.header3 span {
	display: inline-block;
	vertical-align: middle;
	
}

.info-table th {
	font-weight: normal;
	padding: 10px 10px 10px 0px;
}
.info-table td {
	font-weight: normal;
	padding: 10px 10px 10px 0px;
}
table.summary-table {
	font-size: 1em;
}
.summary-table {
	width:80%;
}
.summary-table th {
	font-weight: normal;
	background-color: #edeff0;
	color: #4b4a4a;
	padding: 10px 20px 10px 20px;
}
.summary-table th.bold {
	font-weight: 500;
}
.expanding-section .col-twocol .summary-table th {
	padding: 5px 10px 5px 10px;
}
.summary-table td {
	/*font-weight:lighter;*/
	height: 28px;
	padding: 0 20px 0 20px;
}
.summary-table .total td {
	font-weight: 500;
	color: #4B4A4A;
}
.summary-table tr:nth-child(odd) {
	background-color: #f9fafa;
}
.expandable-list-section .expandable-row .expanding-section .summary-table tr:nth-child(odd) {
	background-color: #fff;
}
.detailedview_label {
	float:left; 
	text-align:right; 
	width:54%;
	line-height: 30px;
}
.detailedview_control {
	float:right; 
	text-align:left; 
	width:40%;
}
#detailed_views {
	margin-bottom: 30px;
}
#detailed_views:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.nom_actions_wrapper {
	margin-left: 10px;
	margin-top: 10px;
}

/* PROGRESS INDICATOR*/
.progress-wrapper {
	margin-left: 10px;
	transform-style: preserve-3d;
}
.progress-indicator-label {
	text-align:left;
	float:left;
	font-weight: bold;
	font-size: 1.1rem;
}
.progress-indicator-value {
	text-align:right;
	color:#79bb43;
	float:right;
	font-weight: bold;
	font-size: 1.1rem;
	
}
.progress-indicator {
	width: 100%;
	background-color: #e0e0e0;
}
.progress-indicator-right {
	width: 75%;
	background-color: #e0e0e0;
	display: inline-block;
}
.progress-indicator-label-right {
	width: 25%;
	display: inline-block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.progress-indicator-label-right-text {
	display: inline-block;
	float: none;
	width: auto;
	padding-left:5px;
}
.progress-bar {
	width: 1%;
	height: 30px;
	background-color: #79bb43;
}
.progress-checks {
	color: #6e6e6e;
}
.progress-checks td {
   vertical-align:middle;
   padding: 3px;
   padding-right: 20px;
}
.progress-checks td label {
   margin-top: 0;
   margin-bottom: 0px;
}
.progress-checks label {
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 0px;
}
.progress-checks .redProgress {
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	color: #ad3232;
	margin-bottom: 0px;
	width: 100%;
	text-align: right;
}
.progress-checks .redProgressInstruction {
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	color: #5b5b5b;
	margin-bottom: 0px;
	width: 100%;
	text-align: right;
}
.progress-checks .greenProgress {
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	color: #79bb43;
	margin-bottom: 0px;
	width: 100%;
	text-align: right;
}
.expandable-list-section .progress-checks label, 
.expandable-list-section .progress-checks .greenProgress, 
.expandable-list-section .progress-checks .redProgress, 
.expandable-list-section .progress-checks .redProgressInstruction,
.expanding-override .progress-indicator-label-right-text
{
	font-size: 0.9em;
}
.progress-checks .form-item {
	display: inline-block;
	vertical-align: middle;
}
.smaller_switches .switch {
	width: 55px;
	height: 25px;
}
.smaller_switches .switch-label:after {
	content: attr(data-on);
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
.smaller_switches .switch-handle {
	width: 23px;
	height: 23px;
}
.smaller_switches .switch-input:checked ~ .switch-handle {
	left: 34px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.smaller_switches .switch-left-right .switch-input:checked ~ .switch-label:before {
	opacity: 1;
	left: 75px;
}
.smaller_switches .switch-left-right .switch-input:checked ~ .switch-label:after {
	left: 0;
}
.smaller_switches .switch-left-right .switch-input:checked ~ .switch-label {
	background: inherit;
}
input.actionbutton, input.actionbutton:focus, input.actionbutton:focus:enabled, input.actionbutton:active,
button.actionbutton, button.actionbutton:focus, button.actionbutton:focus:enabled, button.actionbutton:active,
a.actionbutton, a.actionbutton:focus, a.actionbutton:focus:enabled, a.actionbutton:active {
	display: inline-block;
	background-color: #616b6f;
	font-weight: normal;
	border: 1px solid #616b6f;
	color: #FFFFFF;
	padding: 6px 7px;
	font-size: 1.2em;
	margin: 5px;
	min-height: 40px;
	height: auto;
	width: auto;
	border-radius: 4px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}
a.actionbutton {
	box-sizing: border-box;
	line-height: 1.6em;
}
input.actionbutton.smallbutton, input.actionbutton.smallbutton:focus, input.actionbutton.smallbutton:focus:enabled, input.actionbutton.smallbutton:active {
    font-size: 0.8em;
    min-height: 26px;
    min-width: 77px;
    margin-top: 0;
    border: none;
    vertical-align: top;
}
.actionbutton,
input.actionbutton, button.actionbutton {
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
input.actionbutton:hover:enabled, button.actionbutton:hover:enabled, a.actionbutton:hover:enabled {
	cursor: pointer;
	background-color: #95A5A6;
	border: 1px solid #616b6f;
}
input.actionbutton:disabled, button.actionbutton:disabled {
	display: inline-block;
	border: 1px solid #616b6f;
}
input.actionbutton:hover:disabled, button.actionbutton:hover:disabled, a.actionbutton.disabled:hover {
	border: 1px solid #616b6f;
}
.spreadsheet_download_icon, input.spreadsheet, div.spreadsheet {
	background-image: url(images/excel_new_green_24px.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0 30px 10px 0;
	width: max-content;
	height: 24px;
	cursor:pointer;
	background-position: right 10px center;
	line-height: 24px;
	border: 1px solid #d3d3d3;
	padding: 5px 40px 5px 10px;
	border-radius: 4px;
	transition-duration: 0.4s;
}
.spreadsheet_download_icon {
	float: right;
}
input.spreadsheet {
	color: #6e6e6e;
	background-color: #fff;
	height: auto;
	display: inline-block;
	margin: 0;
	font-weight: normal;
}
input.spreadsheet:hover:enabled, input.spreadsheet:focus:enabled, input.spreadsheet:hover:enabled, input.spreadsheet:focus:enabled {
	background-color: #f5f5f5;
	border: 1px solid #bebebe;
}
.spreadsheet_download_icon:hover {
	cursor: pointer;
	background-color: #f5f5f5;
	border: 1px solid #bebebe;
}
.spreadsheet_download_icon[disabled=""], input.spreadsheet:disabled, a.disabled, a.disabled:focus {
	cursor: not-allowed;
	color: #95a5a6;
	background-color: #e4ecef;
}

.margin_auto {
	margin: auto;
}
.loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #000050;
	border-right: 16px solid #93DFE3;
	border-bottom: 16px solid #6B15D5;
	border-left: 16px solid #2BFFC1;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
	display: inline-block;
	position:absolute; /*it can be fixed too*/
	left:0; right:0;
	top:0; bottom:0;
	margin:auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
#loader-container {
	width:100%;
	height:100%;
	text-align: center;
	background:#FFFFFF;
	z-index:9002;
	position:fixed;
	top:95px;
	opacity:0.9;
}
#modalcontent #loader-container {
	position: absolute;
	top: unset;
}
.warningexpander {
 background-image: url(images/validation.png);
 background-position: 15px 15px;
 background-repeat: no-repeat;
 border: 2px solid #EB5339;
 background-color: #FCCAC2;
 color: #AC260F;
}
.warningexpander .title {
 color: #AC260F;
 width: 80%;
	font-size: 0.8rem;
	word-spacing: 0px;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: center;
	padding-left: 50px;
	min-height: 40px;
}

.errortable {
	margin: 0 auto; 
}

.errortable th {
	font-weight: bold;
	background-color: #D3D3D3;
	padding: 10px 10px 10px 10px;
	text-align:left;
}
.errortable td {
	font-weight: normal;
	text-align:left;
	padding: 4px 10px 4px 10px;
}
.errortable tr:nth-child(odd) {
	background-color: #E8E8E8;
}

#bonusupdatebutton, #currentBPupdatebutton {
	margin: unset;
	min-height: unset;
}
.pool_table{
	overflow: auto;
}

.pool_table .form-item .passed {
	background: #FFFFFF none;
}
.pool_table .form-item .failed {
	background: #FFFFFF none;
}

.inline-edit {
	min-width:85px;
}

/* DataTables modifications */
div.dt-container .dt-input {
	line-height: 2.05em;
	min-height: 3.1em;
	padding: 4px;
}
div.dt-container .dt-search input {
	min-height: 2.05em;
	min-width: 20rem;
	padding: 4px;
}
div.dt-container label {
	display: inline;
}

table.dataTable thead {
	background-color: #f0f0f0;
}
table.dataTable thead th label {
	margin: 0;
}
table.dataTable.display thead th, table.dataTable.display tbody td {
	border-right: 1px lightgrey dashed;
}
table.dataTable.display thead th:last-of-type, table.dataTable tbody td:last-of-type {
	border-right: none;
}
table.dataTable.display thead th, table.dataTable.display tbody td {
	border-top: none;
	border-bottom: none;
}
/*table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.135);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
}*/
/* DataTables modifications end - more elsewhere */
.ui-dialog .ui-dialog-titlebar {
	background-color: #42c0fb;
}
.ui-dialog.error_dialog .ui-dialog-titlebar{
	background-color: #E3170D;
	color: #fff;
}
.ui-corner-all {
	border-radius: 5px;
}
.ui-dialog .sessionWarn {
	background-color: #f08a24;
	color: #fff;
}
.col-thirdscol input.actionbutton {
	min-width: unset;
}
.col-twothirdscol .bold {
	padding: 10px 0 0 15px;
	display: inline-block;
	width: calc( 100% - 45px )
}
.col-twothirdscol .tooltip {
	left: 0;
}

#hometext {
	padding: 0 20px;
}
#hometext p {
	margin-bottom: 30px;
}
#homepage_list {
	list-style:none;
	padding-left: 0;
	margin-bottom: 30px;
}
#homepage_list li {
	background: url('/ecbs/system/pagebasics/images/bullet_point.png') no-repeat left center; /* <-- change `left` & `top` too for extra control */
	padding: 6px 0px 6px 40px;
	margin: 5px 0;
}
/*****************************************************

			RESTRICTED STOCK STYLES

******************************************************/
#rs_election_button, #rs_statement_button, #award_acceptance_button {
	margin:20px;
	height: 90px;
	line-height: 90px;
	border: 3px solid #8064A2;
	border-radius: 6px;
	background-image: url(/ecbs/system/pagebasics/images/stock_48.png);
	background-repeat: no-repeat;
	background-position: 30px;
	display: inline-block;
	width: 340px;
	color: #8064a2;
	box-shadow: 0px 0px 5px 3px rgba(191,189,191,0.8);
}
#rs_election_button:hover, #rs_statement_button:hover, #award_acceptance_button:hover {
	background-color: #e8e5ef;
	cursor: pointer;
}
#rs_election_button span, #rs_statement_button span, #award_acceptance_button span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	text-align: center;
	margin-left: 90px;
	margin-right:30px;
	font-size: 1.2rem;
}
#exec_choice_page #rs_election_button {
	margin: 30px 0 50px 30px;
}
#exec_choice_page p {
	margin: 30px;
}
#exec_choice_page #rs_pdf_list {
	left:0;
	margin:30px;
}
.hide {
	display: none;
}
#rsElectionForm {
	padding: 0 15px;
}
#rsElectionForm .summary-table {
	width: 60%;
}
#rsElectionForm .summary-table-note {
	font-style: italic;
	margin: 20px 0;
}
#rsElectionForm .summary-table th,
#rsElectionForm .summary-table td {
	text-align: center;
}
#rsElectionForm #step1 fieldset {
	border: none;
	margin: 0;
}
#rsElectionForm #step1 .description {
	padding: 10px 25px 25px 25px;
}
#rsElectionForm #step1 .description,
#rsElectionForm #step1 .description .header2 {
	border: none;
	background-color: var(--syscolour3);;
}
#rsElectionForm #step1 .description p {
	padding: 5px 0;
}
#rsElectionForm #step1 .control {
	font-size: 18px;
	position: relative;
	display: block;
	margin-bottom: 15px;
	cursor: pointer;
	font-size: 1.2em;
	text-align: center;
}
#rsElectionForm #step1 .control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
#rsElectionForm #step1 .control__indicator {
	position: relative;
	top: 15px;
	left: calc( 50% - 29px / 2 );
	width: 29px;
	height: 29px;
	background: transparent;
	border: 1px solid var(--syscolour3);
}
#rsElectionForm #step1 .control--radio .control__indicator {
	border-radius: 50%;
}
/* Checked state */
#rsElectionForm #step1 .control input:checked ~ .control__indicator {
	border: 1px solid #fff;
	background: url('/ecbs/system/pagebasics/images/green_tick.png');
}
#rsElectionForm #step1 #sell_percent {
	/*display: none;*/
	position: relative;
	left: calc(50% + 25px);
	top: -30px; 
}
@media screen and (max-width: 500px) {
	 #rsElectionForm #step1 #sell_percent {
        position: static;
    }
}
/*#rsElectionForm #step1 #sell_percent input {
	width: 60px;
	height: 20px;
	padding: 3px;
}*/
/*#rsElectionForm #step1 #broker_section {
   display: none; 
}*/
#rsElectionForm #step1 #capitaradiodiv input {
	top: 2px;
	position: relative;   
}
#rsElectionForm #step1 #capitaradiodiv label:hover {
	cursor: pointer;
}


.election_form_icon {
    vertical-align: middle;
}
.jumper_wrapper {
    /*margin: 15px;*/
    /*margin-top: 70px;*/
    white-space: nowrap;
    text-align:left;
}
.jumper {
    padding: 15px;
    display: inline-block;
    border: solid 1px #DEDEDE;
	border-radius: 5px;
	margin-top: 25px;
}
.jumper_label {
    display: inline-block;
    position: relative;
    top: -36px;
    border: none;
	border-radius: 5px;
    margin: 0;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFFFFF;
    font-size: 1.4rem;
    font-weight: 500; 
    line-height: 2rem; 
    color:#4bacc6;
}
.jumper_contents {
    margin-top: -22px;
}
.jumper_contents p {
	padding: 4px; background-color: #d9d9; margin: 8px 0;
}
.jumper_contents .form-item {
    display: inline-block;
}
.jumper_contents select {
	min-height: 3em;
    margin-right: 15px;
}
@-moz-document url-prefix() {
	.jumper_contents select {
		min-height: 3em;
	}
}
.jumper_contents input:not(.datepicker) {
	min-height: 3.05em;
}
/*div.jumper_contents .datepicker {
	width: 100px;
	margin-right: 15px;
}*/
.percent1 { width: 1%; }
.percent2 { width: 2%; }
.percent3 { width: 3%; }
.percent4 { width: 4%; }
.percent5 { width: 5%; }
.percent6 { width: 6%; }
.percent7 { width: 7%; }
.percent8 { width: 8%; }
.percent9 { width: 9%; }
.percent10 { width: 10%; }
.percent11 { width: 11%; }
.percent12 { width: 12%; }
.percent13 { width: 13%; }
.percent14 { width: 14%; }
.percent15 { width: 15%; }
.percent16 { width: 16%; }
.percent17 { width: 17%; }
.percent18 { width: 18%; }
.percent19 { width: 19%; }
.percent20 { width: 20%; }
.percent21 { width: 21%; }
.percent22 { width: 22%; }
.percent23 { width: 23%; }
.percent24 { width: 24%; }
.percent25 { width: 25%; }
.percent26 { width: 26%; }
.percent27 { width: 27%; }
.percent28 { width: 28%; }
.percent29 { width: 29%; }
.percent30 { width: 30%; }
.percent31 { width: 31%; }
.percent32 { width: 32%; }
.percent33 { width: 33%; }
.percent34 { width: 34%; }
.percent35 { width: 35%; }
.percent36 { width: 36%; }
.percent37 { width: 37%; }
.percent38 { width: 38%; }
.percent39 { width: 39%; }
.percent40 { width: 40%; }
.percent41 { width: 41%; }
.percent42 { width: 42%; }
.percent43 { width: 43%; }
.percent44 { width: 44%; }
.percent45 { width: 45%; }
.percent46 { width: 46%; }
.percent47 { width: 47%; }
.percent48 { width: 48%; }
.percent49 { width: 49%; }
.percent50 { width: 50%; }
.percent51 { width: 51%; }
.percent52 { width: 52%; }
.percent53 { width: 53%; }
.percent54 { width: 54%; }
.percent55 { width: 55%; }
.percent56 { width: 56%; }
.percent57 { width: 57%; }
.percent58 { width: 58%; }
.percent59 { width: 59%; }
.percent60 { width: 60%; }
.percent61 { width: 61%; }
.percent62 { width: 62%; }
.percent63 { width: 63%; }
.percent64 { width: 64%; }
.percent65 { width: 65%; }
.percent66 { width: 66%; }
.percent67 { width: 67%; }
.percent68 { width: 68%; }
.percent69 { width: 69%; }
.percent70 { width: 70%; }
.percent71 { width: 71%; }
.percent72 { width: 72%; }
.percent73 { width: 73%; }
.percent74 { width: 74%; }
.percent75 { width: 75%; }
.percent76 { width: 76%; }
.percent77 { width: 77%; }
.percent78 { width: 78%; }
.percent79 { width: 79%; }
.percent80 { width: 80%; }
.percent81 { width: 81%; }
.percent82 { width: 82%; }
.percent83 { width: 83%; }
.percent84 { width: 84%; }
.percent85 { width: 85%; }
.percent86 { width: 86%; }
.percent87 { width: 87%; }
.percent88 { width: 88%; }
.percent89 { width: 89%; }
.percent90 { width: 90%; }
.percent91 { width: 91%; }
.percent92 { width: 92%; }
.percent93 { width: 93%; }
.percent94 { width: 94%; }
.percent95 { width: 95%; }
.percent96 { width: 96%; }
.percent97 { width: 97%; }
.percent98 { width: 98%; }
.percent99 { width: 99%; }
.percent100 { width: 100%; }

#awardAcceptanceForm {
	width: 60%;
	margin:auto;
}
.pdfObject {
	width:100%;
}
input[type="button"].deletebutton {
	background-image: url(images/cross.png);
	background-repeat: no-repeat;
	background-position: right;
	padding: 6px 2em;

	margin: .5em;
}
.table {
	display: table;
	margin: auto;
}
.table-cell {
	display: table-cell;
	vertical-align: middle;
}
#maintenance_warning {
	background-color: #f08a24; 
	background-image: url("images/warning.png"); 
	background-repeat: no-repeat;
	background-position: 5px center;
	color: white; 
	font-size: 1.5em; 
	font-weight: bold;
	padding: 0.5em;
	padding-left: 2.5em;
}
.full_page_form {
	width:80%; 
	margin-left:10%;
}
span.placeholder {
	display: block;
}
#pagepopup {
	border: 0;
}
#nmlcdiv {
	background-color:white;
	border: 1px solid black; 
	width: 75%; 
	font-size: 1em;
}
table#dupeauth {
	border: 1px black solid;
}
table#dupeauth th {
	background: #EDEFF0;
	text-align: center;
	color: #4B4A4E;
}
table#dupeauth th[scope=row] {
	text-align: left;
}
table#dupeauth th, table#dupeauth td {
	border-bottom: 1px black solid;
	padding: .25em;
}
table#dupeauth td {
	padding: .5em;
	border-right: 1px lightgrey dashed;
}
table#dupeauth th.small {
	font-size: .75em;
	border: 1px black solid;
}
table#dupeauth th.nobottom {
	border-bottom: none;
}
div#mercer {
	width:65%; 
	height:500px; 
	overflow-x:none; 
	overflow-y:scroll;
}
/*salary reports*/
.colour_1 {
	background-color: #F2DDDC;
}
.colour_2 {
	background-color: #D7E4BC;
}
.colour_3 {
	background-color: #C5D9F1;
}
.colour_4 {
	background-color: #FCD5B4;
}
.colour_5 {
	background-color: #CCC0DA;
}
div.radio_group {
	clear:both;
}
.sys_error {
	position: absolute; top:50%; left:20%;
}
body[data-node="686"] .oddyear { background-color: #F3F3F3; } 
body[data-node="686"] tr:hover td.oddyear { background-color: #e5eff8; } 
body[data-node="686"] table.display thead th.noshow { border:none; cursor:default; }

table.nonfunction {
	width: 100%;
}