@import url("StylesOverlay.css");
@import url("StylesOSH.css");

.no_checkbox>i.jstree-checkbox {
  display: none;
}

html {
  font-size: 62.5%;
  background: white;
}

body,
pre {
  font-family: "Exo2.0", Verdana, Arial;
  font-size: 1.3em;
  color: black;
}

a {
  color: #0f3165;
}

.hide {
  display: none;
}

img {
  max-width: 1000px;
}

.formLabel {
  font-size: 0.84em;
  color: black;
}

input,
select {
  font: 1em "Exo2.0", Verdana, Arial;
}

.subheading {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: bold;
}

.workflowdescription {
  font-size: 0.6em;
  line-height: 1.28em;
  font-weight: normal;
}

.wfTableHeading {
  font-variant: normal;
  padding-bottom: 5px;
  font-size: 1.28em;
  line-height: 1.6em;
  font-weight: bold;
}

.searchBarHeading {
  font-size: 2.25em;
  color: #56833b;
  padding-bottom: 5px;
  font-variant: normal;
}

.searchBarTable {
  width: 60%;
}

html,
body,
div#pagecontainer {
  position: relative;
  margin: 0;
  padding: 0;
}

#pagecontainer {
  background: #56833b;
}

/*#version
{
position: relative;
left: -20px;
}


#employeename
{
position: relative;
left: 76px;

}
					
#selectedEmployee
{
position: relative;
right: -150px;

}

#timerDisplay
{
position: relative;
right: -400px;

}

#adminEmployee
{
position: relative;
right: -300px;

}
*/

#logo {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #56833b;
  width: 280px;
  text-align: center;
}

#logo img {
  max-width: 280px;
  max-height: 90px;
}

div#employeeheading {
  background: #56833b;
  color: white;
  position: absolute;
  top: 110px;
  padding-left: 20px;
  padding-right: 20px;
  width: 280px;
}

div#headerbanner {
  max-height: 123px;
  margin: 0;
  padding: 0;
}

div#ssbanner {
  margin: 0;
  background: white url(../images/image_selfservice_stretch.png) repeat-x top left;
}

/* #headingline {   
				padding: 0 3em; 
				font-size: 1.25em;
				margin: 0;
			    overflow:hidden;
			     } */

#version,
#nameLabel,
#nameValue,
#codeLabel,
#codeValue {
  color: #eff0dc;
}

#version-container img {
  width: 100px;
  margin-left: -5px;
}

#version-container img.svg {
  margin-top: -11px;
  margin-bottom: -11px;
}

#version {
  line-height: 31px;
  vertical-align: top;
}

#menu {
  /*	jk2:
					if there will be a need to have footer under the whole page including menu, 
					then this needs to be change to float:left and position: absulute removed
					
					in such a case, this won't work for IE6, so this current design 
					would have to be kept for IE6 by conditional CSS
					
					when this is float:left, then there is also an issue with IE7: 
					that long table are falling under the menu. 
					This can be easily resolved by conditional css setting zoom:1 
					for all main components (see http://bonrouge.com/2c-hf-fluid.php)
				*/

  /* position: absolute;   
			padding-left: 20px; */

  padding-right: 20px;
  top: 210px;
  width: 280px;
  color: white;
  background: #56833b;
}

/* 25/08/2017 #JST-2683 - restyle Milonic menus */
/*submenu placement*/
.mmenu {
  margin-top: -3px;
  margin-left: 19px;
  box-shadow: -2px 0px 4px #3d6c21;
}

/*main menu focusing*/
a#mmlink0 {
  margin-left: -20px;
  border-left: #6e9a53 solid 20px;
  border-right: #6e9a53 solid 20px;
  border-bottom: #6e9a53 solid 1px;
}

.mmenucontainer>.milonictable>tbody>tr>td,
.mmenucontainer>.milonictable>tbody>tr>td td {
  padding-left: 0px !important;
}

.milonictable .milonictable td:last-child i {
  font-size: 1.9em;
}

/***************** Menu borders **********************/
/* main menu borders */
.mmenucontainer>.milonictable>tbody>tr>td {
  border-top: solid 1px #6e9a53;
}

.mmenucontainer>.milonictable>tbody>tr:last-child>td {
  border-bottom: solid 1px #6e9a53;
}

/* sub menu borders */
.mmenu .milonictable td {
  border-top: solid 1px #6e9a53;
}

.mmenu .milonictable tr:last-child td {
  border-bottom: solid 1px #6e9a53;
}

/***************** End Menu borders **********************/

#content {
  position: relative;
  margin-left: 320px;
  margin-right: 0;
  margin-bottom: 0;
  background: white;
}

.mainContentArea {
  padding: 10px 40px 10px 30px;
}

#logincontent {
  border: 0px solid black;
}

#footermessage {
  font-weight: bold;
  margin: 20px;
  padding: 0 10px;
}

#footer {
  border: 1px solid black;
  margin: 20px;
  padding: 0 10px;
}

.upload {
  position: relative;
  width: 400px;
  height: 31px;
}

.realupload {
  position: absolute;
  top: 0;
  right: 0;
  height: 31px;
  /* start of transparency styles */
  opacity: 0;
  /*
    -moz-opacity :0;
    filter: alpha(opacity :0);
     end of transparency styles */

  z-index: 2;
  /* bring the real upload interactivity up front */
  width: 400px;
}

form .fakeupload {
  background: url(../images/Browse.gif) no-repeat 58% 40%;
  height: 31px;
}

form .fakeupload input {
  width: 140px;
}

/* style for tables */
.tableRow {
  background-color: #ffffff;
}

.tableRowOdd2 {
  border-bottom: thin solid black;
  background-color: #eff0dc;
  color: black;
}

.tableFooter {
  background-color: #a2a931;
  font-weight: bold;
}

.tableRowEven2 {
  border-bottom: thin solid black;
  background-color: #eeeeee;
  color: black;
}

.tableCellBottom {
  border-bottom: thin solid black;
}

/* 25/08/2017 #JST-2678 - Implement new css table styles */
/*********** Standard Table Styles *************/
.stdTable {
  background-color: white;
  border: 1px #b1bfaa solid;
  line-height: 1.35em;
  width: 100%;
  width: 100%;
  border-radius: 10px 10px 10px 10px;
}

.stdTable td {
  border-style: solid;
  border-width: 0px;
  border-color: #cbcbcb;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.stdTable tr:hover,
.stdTable tr:hover a {
  background-color: #56833b;
  color: #edeada;
}

.tableHeading,
tr.tableHeading:hover,
.tableHeader,
tr.tableHeader:hover,
.tableHeading a,
tr.tableHeading:hover a,
.tableHeader a,
tr.tableHeader:hover a {
  background-color: #ececec;
  color: #000000;
  border-radius: 10px 10px 0 0;
}

/* Remove some borders to prevent double borders and allow 1px borders */
.stdTable th:first-child {
  border-left-width: 0px;
}

.stdTable tr td:first-child {
  border-width: 0px 0px 1px 0px;
}

.stdTable tr:last-child td {
  border-width: 0px 0px 0px 1px;
}

/* Remove until we think center aligning all tables might be something we want to do

.stdTable tr {
  text-align: center;
  width: 80%;
}

.stdTable th {
  min-width: 55px;
  text-align: center;
}

*/

/* Rounded borders for standard tables (internal table elements) */
.stdTable tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.stdTable tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

/* JST-3914 fix rounded corners in last table row for tableheaders */
.stdTable tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
}

.stdTable tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
}

.stdTable tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
  border-width: 0px;
}

.stdTable tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/*********** End of Standard Table Styles *************/

.tinyTable {
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
  border-style: none;
  width: 80%;
}

/* Correcting spacings after nonebreaking white spaces have been removed. */
.tinyTable input,
.tinyTable a {
  margin-right: 4px;
}

.tinyTable td>input:nth-child(1n + 2),
.tinyTable a {
  margin-left: 4px;
}

.tinyTable a[name*="Date"] {
  margin-left: 0px;
}

/*************** End of space correction ******************/

.chartItem,
.stdTable {
  background-color: white;
  border: 1px #b1bfaa solid;
}

.stdTable {
  line-height: 1.35em;
  width: 100%;
  width: 100%;
}

.bodyTable {
  width: 100%;
}

.tableRowExcluded {
  background-color: #4d4d4d;
  color: black;
}

.tableRowExcluded2 {
  border-bottom: thin solid black;
  background-color: #4d4d4d;
  color: black;
}

.totalLine {
  font-weight: bold;
}

.stdTable.th {
  border: 1px #b1bfaa solid;
}

.stdTable.td {
  border: 1px #b1bfaa solid;
}

th {
  /* background-color: #ECECEC;					-j4277 */
  text-align: left;
  font-weight: bold;
}

th.tableHeaderAlignRight {
  text-align: right;
}

tr.stdTable:hover {
  background-color: #56833b;
}

td>* {
  vertical-align: middle;
}

td.buttonWF>* {
  vertical-align: top;
}

td.right,
th.right,
tr.right,
td.rightAlign,
th.rightAlign,
tr.rightAlign {
  text-align: right;
}

td.bold,
th.bold,
tr.bold {
  font-weight: bold;
}

/* heading style for remuneration table */
.tableHeadingrem {
  background-color: #a2a931;
  color: black;
  border-color: #000000;
  border-top-style: solid;
  border-width: 1px;
}

.tableHeadingrembottom {
  background-color: #a2a931;
  color: black;
  border-bottom: thin solid black;
}

/* 12/09/2017 #JST-2678 - work alongside new table styles */
.tableHeadingPerfPlan {
  font-weight: bold;
  color: white;
}

.tableHeadingPerfPlan th {
  background-color: #a2a931;
}

tr.tableHeadingPerfPlan:hover {
  color: white;
}

/* colour the background of the remuneration table cell */

.tableCellpp {
  background-color: #dff4d4;
  color: black;
}

.tableCellrem {
  background-color: #f8ecd4;
  color: black;
}

.tableCellBottompp {
  background-color: #dff4d4;
  color: black;
  border-bottom: thin solid black;
}

.tableCellBottomrem {
  background-color: #f8ecd4;
  color: black;
  border-bottom: thin solid black;
}

/*
.tableCellBottompp { background-color: #DFF4D4;color: black;	border-color: #000000; border-bottom-style: solid;	border-width: 1px }
.tableCellBottomrem { background-color: #F8ECD4;color: black;	border-color: #000000; border-bottom-style: solid;	border-width: 1px }
*/

.inputNumeric input {
  text-align: right;
  float: right;
}

/* colour the background of the header line cells on remuneration table */
th.hpp {
  background-color: #dff4d4;
  text-align: left;
  font-weight: normal;
}

th.hrem {
  background-color: #f8ecd4;
  text-align: left;
  font-weight: normal;
}

th.hpptitle {
  background-color: #dff4d4;
  text-align: center;
  font-weight: normal;
}

th.hremtitle {
  background-color: #f8ecd4;
  text-align: center;
  font-weight: normal;
}

th.hex {
  background-color: #cd0000;
  text-align: center;
  font-weight: normal;
}

/*
th.hpp {background-color: #DFF4D4; text-align: left;font-weight: normal;border-color: #003D4D; border-bottom-style: solid;border-top-style: solid;	border-width: 1px }
th.hrem {background-color: #F8ECD4; text-align: left;font-weight: normal;border-color: #003D4D; border-bottom-style: solid;border-top-style: solid;	border-width: 1px }
th.hpptitle {background-color: #DFF4D4; text-align: center;font-weight: normal;border-color: #003D4D; border-top-style: solid;border-right-style: solid;	border-width: 1px }
th.hremtitle {background-color: #F8ECD4; text-align: center;font-weight: normal;border-color: #003D4D; border-top-style: solid;	border-right-style: solid; border-width: 1px }
*/
.minorHeading,
.minorHeading a.hideShowLink,
.minorHeading a.hideShowLink:link,
.minorHeading a.hideShowLink:hover,
.minorHeading a.hideShowLink:visited,
.minorHeading a.hideShowLink:active {
  font-size: 1.6em;
  font-weight: bold;
  font-family: Verdana, Arial, Sans-serif;
  color: #dff4d4;
}

.negativeValue {
  color: red;
}

.underline {
  border-bottom-style: solid;
  border-width: 2px;
  font-variant: small-caps;
  padding-bottom: 0.2cm;
  padding-top: 0.2cm;
  font-weight: bold;
  font-size: 1.6em;
}

.topAndBottom {
  border-bottom-style: solid;
  border-top-style: solid;
  border-width: 1px;
  border-color: #000000;
}

.topAndBottomMinor {
  border-bottom-style: ridge;
  border-top-style: ridge;
  border-width: 1px;
  border-color: #cccccc;
}

/* menu styles 
.menuStyleMainOn 
			{
			color: #366ba7;
			text-align: right;
			padding: 2px;
			border-bottom-color: #000000;
			border-bottom-width: 1px;
			border-bottom-style: dashed;
			}

.menuStyleMainOff 
			{
			color: #000000;
			text-align: right;
			border-bottom-color: #000000;
			border-bottom-width: 1px;
			border-bottom-style: dashed;
			padding: 2px;
			}
			
.menuStyleOn 
			{
			color: #366ba7;
			text-align: right;
			padding: 2px;
			}

.menuStyleOff 
			{
			color: #000000;
			text-align: right;
			border-color: #A0A0A0;
			border-width: 0.5px;
			border-style: solid;
			padding: 2px;
			}
*/

/* the following classes are used in the leave calendar */
table.tableLeave {
  border: none;
}

table.tableLeave td.headerTopRow {
  border-top-style: solid;
  border-top: 1px #000000;
  border-bottom: none;
  border-left: none;
  border-right: none;
  text-align: center;
}

table.tableLeave td.headerBottomRow {
  border-bottom-style: solid;
  border-bottom: 1px #000000;
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: center;
}

table.tableLeave td.dayCell {
  border: 1px solid #dddddd;
  text-align: left;
}

table.tableLeave td.personRow {
  border-bottom-style: solid;
  border-bottom: 1px #aaaaaa;
  border-top-style: solid;
  border-top: 1px #aaaaaa;
  border-left: none;
  border-right: none;
  text-align: left;
}

table.tableLeave td.personRowEnd {
  border-bottom-style: solid;
  border-bottom: 1px #aaaaaa;
  border-top-style: solid;
  border-top: 1px #aaaaaa;
  border-right-style: solid;
  border-right: 1px #dddddd;
  border-left: none;
  text-align: left;
}

.legend {
  float: right;
  position: relative;
  padding: 0;
  height: 1em;
}

td.Numeric {
  text-align: right;
  padding-right: 40px;
}

/* business card */
.businessCardEmpName {
  font-weight: bold;
  font-size: 1.25em;
}

.nobr {
  white-space: nowrap;
  display: inline;
}

textarea {
  white-space: pre-wrap;
}

span.mandatory {
  color: red;
  font-weight: bold;
  padding-left: 3px;
}

div.chart,
div.sgtVisibleTable {
  text-align: left;
  margin: 25px 15px 10px 0;
  float: left;
  background-color: #ffffff;
  display: inline;
}

.pointer {
  display: none;
}

div.sgtVisibleTable {
  border: 1px solid #999999;
}

.sgtVisibleTable div.sgtCaption {
  text-align: center;
  font-weight: bold;
  font-size: 1.44em;
}

.sgtVisibleTable .simpleGenericTable {
  margin: 2em 0;
}

table.simpleGenericTable {
  text-align: right;
}

table.simpleGenericTable col.firstCol {
  text-align: left;
}

.sgtVisibleTable .simpleGenericTable {
  border-color: #999999;
  border-width: 1px 1px 0 0;
  border-style: solid;
}

.sgtVisibleTable td,
.sgtVisibleTable th {
  border-color: #999999;
  border-width: 0 0 1px 1px;
  border-style: solid;
  padding: 0.5em;
  min-width: 60px;
}

.jqDialogContent td,
.jqDialogContent th {
  padding: 7px 10px 0 0;
  background-color: white;
}

.jqDialogContent th.sgtFirstRow {
  border-bottom: 1px solid black;
}

.calendar_search td {
  padding: 4px 20px 0 0;
}

a.hideShowLink {
  padding-right: 15px;
  background: #fff url(../images/expand.png) no-repeat scroll right center;
}

a.hideShowLink:link,
a.hideShowLink:visited,
a.hideShowLink:active {
  text-decoration: none;
}

a.hideShowLink:hover {
  text-decoration: underline;
}

.black_overlay {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.white_content {
  display: none;
  position: fixed;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 8px solid #939c21;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

.right {
  margin-left: 10px;
  float: left;
}

.emailRef {
  font-size: 0.8em;
  color: red;
}

#homepagecontent {
  position: relative;
  top: -42px;
}

button,
input.button,
.button input {
  background-color: #56833b;
  /* Green */
  border: none;
  color: white;
  padding: 7px 24px;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 39px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
}

.nbspace {
  padding-left: 5px;
}