@CHARSET "UTF-8";

body
{
	background-color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;
	margin:0px;
	height:100%;
	}

a:link, a:visited {
	color:#000000;
	}
	
font.warning, font.compulsory {
	color:#FF0000; /* Red */
	}

textarea {
	font-family: Verdana;
	font-size: 12px;
	resize:none; /* Do not allow textarea to be resized. */
	margin:1px;
	}
	
select {
	width:100%; /* Select box will follow the width of the cell. */
	}

input {
	white-space:normal; /* Allows text on button to wrap when it is longer than button. */
	}
/**** Begin: Banner ****/
img.banner_logo {
	height:100px;
	border:none;
	margin:0px;
	}
td.banner {
	background-color:#225F50;
	}
/**** End: Banner ****/

/**** Begin: Login box ****/
table.login {
	background-color:#D8D8D8;
	border-radius: 5px;
	border:2px solid #225F50;
	margin-top:5%;
	margin-left:auto; 
    margin-right:auto; 
	}
th.login {
	background-color:#225F50;
	border-radius: 5px;
	color:#FFFFFF;
}
td.login {
	text-align:left;
	}
td.loginButton {
	text-align:center; 
	}
th.login, td.login, td.loginButton {
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	}
input.login {
	width:200px;
	}
/**** End: Login box ****/

/**** Begin: Dialog box ****/
table.dialogBox {
	width:500px;
	border-radius: 5px;
	background-color:#FFFFFF;
	border:1px solid #225F50;
	border-spacing:4px;
	margin-top:20%;
	margin-left:auto; 
    margin-right:auto; 
	}
th.dialogBox {
	border-radius: 5px;
	background-color:#225F50;
	padding:4px;
	color:#FFFFFF;
	}
td.dialogBox {
	text-align:justify;
	}
td.dialogBoxButton {
	text-align:center;
	}
th.dialogBox, td.dialogBox, td.dialogBoxButton {
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	}
input.dialogBox {
	width:100px;
	
	}
#overlay {
    visibility: hidden;
    position: fixed;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
	background-color: #222222;
	}
#dialogBox {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    z-index: 1000;
}
#confirmDialogBox {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    z-index: 1000;
}
/**** End: Dialog box ****/

/**** Begin: Forms ****/
table.form {
	background-color:#E6E6E6;
	border:1px solid #225F50;
	border-spacing:4px;
	margin:3px;
	}
table.form_float {
	float:left; 
	background-color:#E6E6E6;
	border:1px solid #225F50;
	border-spacing:4px;
	margin:3px;
	}
th.form {
	background-color:#225F50;
	padding:5px;
	color:#FFFFFF;
}
td.form {
	font-weight:bold;
	}
td.formField {
	background-color:#F2F2F2;
	border:1px solid #225F50;
	word-break:break-all;
	}
table.form, table.form_float, th.form, td.formField, td.formFieldHilight {
	border-radius: 5px;
	}
td.form, td.formField {
	padding:3px;
	vertical-align:top;
	}
input.formTextbox {
	margin:1px;
	}
input.formTextbox {
	width:98%;
	}
td.formFieldHilight {
	background-color:#F7BE81;
	border:1px solid #225F50;
	}
font.formNote {
	font-size: 10px;
	}
select.formSelect {
	width: 99%;
	}
option.warning {
	color:#FF0000;
	}
option.compulsory {
	color:#FF0000;
	}
input.formButton {
	background-color:#E6E6E6;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 10px;
	}
input.formButton:hover {
	background-color:#B5E9F4;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 10px;
	}
input.naviButton {
	background-color:#E6E6E6;
	color:#000000;
	border-width:1px;
	margin:1px;
	padding:2px 10px 2px 10px;
	}
input.naviButton:hover {
	background-color:#B5E9F4;
	color:#000000;
	border-width:1px;
	margin:1px;
	padding:2px 10px 2px 10px;
	}
input.naviButton:disabled {
	background-color:#FAAC58;
	color:#000000;
	border-width:1px;
	margin:1px;
	padding:2px 10px 2px 10px;
	}
/*
Added: 2017-05-19, Shaiful. 
Buttons used inside table rows, eg: edit button etc.
To use, put button inside a row cell. Button width will follow cell width.  
*/
input.tableButton {  
	background-color:#E6E6E6;
	width:100%;
	border-width:1px;
	margin:0;
	padding:4px 4px;
	}
input.tableButton:hover {
	background-color:#B5E9F4;
	width:100%;
	border-width:1px;
	margin:0;
	padding:4px 4px;
	}
ul.formList {
	list-style-type:square;
    padding:0.2em;
    margin:0.1em;
    text-indent:1em;
	}
/**** End: Forms ****/

/**** Begin: Desktop ****/
#desktop {
	float:left;
	width:100%;
	}
div.icon {
	width:104px;
	/* height:auto; */
	/*
	Note: Gave the same height to all desktop icons. This will allow the icons on 
	the second line and onwards to float all the way to the left. If not it will be
	blocked by the uneven heights.
	*/  
	height: 150px;
	margin:1%;
	float:left;
	}
div.icon:hover {
	background-color:#225F50;
	}
img.icon {
	width:100px;
	height:100px;
	border:none;
	}
img.iconCRUD:hover {
	opacity: 0.5; 
	}
a.icon {
	text-align:center;
	padding:2px;
	}
a.icon:link, a.icon:visited {
	display:block;
	color:#000000;
	text-decoration:none;
	}
a.icon:hover {
	color:#FFFFFF;
	}
table.module_group {
	border-collapse:collapse;
	width:100%;
	}
td.module_group {
	font-weight:bold;
	background-color:#225F50;
	color:#FFFFFF;
	}
/**** End: Desktop ****/

/**** Begin: App Container ****/
#app_container {
	/* width: 99%; */
	border-radius: 5px;
	/* border:1px solid #225F50; */
	padding: 2px;
	/*background-color:#D8D8D8;*/
	margin-top:1%;
	margin-left:auto; 
    margin-right:auto; 
	}
/**** End: App Container ****/

/**** Begin: Scrollable table ****/
/**** Used for tables that can be scrolled. ****/
table.scrollTable {
	float:left;
	border-radius: 5px;
	background-color:#E6E6E6;
	border:1px solid #225F50;
	border-spacing:4px;
	margin:3px;
	}
th.scrollTable {
	border-radius: 5px;
	background-color:#225F50;
	padding:4px;
	color:#FFFFFF;
}
table.scrollTableContent {
	background-color:#FFFFFF;
	border-spacing:4px 0px;
	}
tr.scrollTableContent:hover td{
	background-color:#F7BE81;
	}
tr.scrollTableContentHilight {
	background-color:#F7BE81;
	}
td.scrollTableContent {
	padding:4px;
	}
div.scrollTableContent {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow-y:scroll;
	border:1px solid #225F50;
	background-color:#FFFFFF;
	}
/**** End: Scrollable table ****/

/**** Begin: Table of data ****/
/**** Used for table that display data in tabulated format. ****/
table.dataTable {
	float:left;
	background-color:#E6E6E6;
	border-spacing:2px;
	margin:3px;
	}
th.dataTable {
	background-color:#225F50;
	padding:4px;
	color:#FFFFFF;
}
td.dataTableLabel {
	font-weight:bold;
	}
td.dataTableValue {
	background-color:#FFFFFF;
	word-break:break-all;
	}
table.dataTable,td.dataTableValue {
	border:1px solid #225F50;
	}
table.dataTable,th.dataTable,td.dataTableValue {
	border-radius: 5px;
	}
td.dataTableLabel,td.dataTableValue {
	height: 15px;
	vertical-align:top;
	padding:3px;
	}
td.dataTableRow1 {
	background-color:#E6E6E6;
	}
td.dataTableRow2 {
	background-color:#FFFFFF;
	}
td.dataTableRow1, td.dataTableRow2 {
	padding:3px;
	}
div.singleRowHilight {
	background-color:#F7BE81;
	border:1px solid #225F50;
	}
div.singleRow {
	background-color:#FFFFFF;
	border:1px solid #225F50;
	}
div.singleRowCell {
	vertical-align:top;
	padding:3px;
	}
div.singleRowHilight,div.singleRow,div.singleRowCell {
	float:left;
	}
div.singleRowHilight,div.singleRow {
	border-radius:5px;
	margin:2px;
	}
/**** End: Table of data ****/

/**** Begin: Table of data ver2 ****/
/*
table.data {
	background-color:#FFFFFF;
	border-spacing:4px;
	margin:3px;
	}
th.data {
	background-color:#225F50;
	padding:4px;
	color:#FFFFFF;
}
td.dataLabel {
	font-weight:bold;
	}
td.dataValue {
	background-color:#F2F2F2;
	}
table.data,td.dataValue {
	border:1px solid #225F50;
	}
table.data,th.data,td.dataValue {
	border-radius: 5px;
	}
td.dataLabel,td.dataValue {
	height: 15px;
	vertical-align:top;
	padding:3px;
	}
td.dataRow1 {
	background-color:#F2F2F2;
	}
td.dataRow2 {
	background-color:#FFFFFF;
	}
td.dataRow1, td.dataRow2 {
	padding:3px;
	}
div.dataRowHilight {
	background-color:#F7BE81;
	border:1px solid #225F50;
	}
div.dataRow {
	background-color:#FFFFFF;
	border:1px solid #225F50;
	}
div.dataRowCell {
	vertical-align:top;
	padding:3px;
	}
div.dataRowHilight,div.dataRow,div.dataRowCell {
	float:left;
	}
div.dataRowHilight,div.dataRow {
	border-radius:5px;
	margin:2px;
	}
*/
/**** End: Table of data ver2 ****/

/**** Begin: Table of data list (added on: 2013-09-27) ****/
/**** Used for tables that display rows of data. ****/
table.datalist {
	background-color:#E6E6E6;
	border-spacing:2px;
	margin:3px 0 6px 0;
	border:1px solid #225F50;
}
th.datalist {
	background-color:#225F50;
	padding:4px;
	color:#FFFFFF;
}
th.datalistchild {
	background-color:#40b498;
	padding:4px;
	color:#F5F5F5;
	text-align:left;
}
table.datalist,th.datalist,th.datalistchild {
	border-radius: 5px;
	}
td.datalistRow1 {
	background-color:#FFFFFF;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	}
td.datalistRow2 {
	background-color:#BDBDBD;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	}
td.datalistRow3 {
	background-color:#E0E0E0 ;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	}
td.datalistRow4 {
	background-color:#FFFFE0 ;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	}		
td.datalistRow1, td.datalistRow2 {
	vertical-align:top;
	padding:3px;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}
tr.datalist:hover table, tr.datalist:hover tr, tr.datalist:hover td, tr.datalist:hover th {
    background-color: #F7BE81 !important;
}

/**** End: Table of data list ****/


/**** Begin: Collapse (added:17-Oct-17) ****/
.accordion-tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  /*color: #fff;*/
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
}
.accordion-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion-btn {
  position: relative;
  display: block;
  padding: 0 2em 0 1em;
  /*background: #16a085;*/
  /*background: grey;*/
  font-weight: normal;
  line-height: 1.5;
  cursor: pointer;
}
.accordion-btn-menu {
  position: relative;
  display: block;
  padding:4px;
  background: #225F50;
  color:#F5F5F5;
  font-weight: normal;
  line-height: 1.5;
  cursor: pointer;
  border-radius:5px;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  /*background: #1abc9c;*/
  background: silver;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.accordion-input:checked ~ .tab-content {
    max-height: none;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 100em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 2em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
/**** End: Collapse ****/

/**** Begin: Tree (added:17-Jan-19) ****/
ul.asTree {
    list-style-type:none;
    padding:0;
    margin:0;
    text-indent:1em;
}
ul.asTree ul{
    list-style-type:none;
}
ul li.asTree:hover, ul li:focus {
 	background-color:#F7BE81;
}
/**** End: Tree ****/

/*** Start: toggle button ***/
input.tooglebutton {
  display: none; 
}
label.tooglebutton {
  border: 1px solid #777;
  padding: 5px;
  display: inline-block;
  height: 15px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(#fff, #eee);
  border-radius: 3px; 
}
label.tooglebutton:hover {
  background-image: linear-gradient(#eee, #ccc); 
}
label.tooglebutton > * {
  position: absolute;
  transition: opacity .2s ease; 
}
input.tooglebutton + label.tooglebutton > :last-child {
  opacity: 0; 
}
input.tooglebutton:checked + label.tooglebutton > :first-child {
  opacity: 0; 
}
input.tooglebutton:checked + label.tooglebutton > :last-child {
  opacity: 1; 
}
input.tooglebutton[type="radio"]:checked + label.tooglebutton {
  opacity: 1; 
}
input.tooglebutton[type="radio"]:checked + label.tooglebutton + input.tooglebutton[type="radio"] + label.tooglebutton {
  pointer-events: auto; 
}
input.tooglebutton[type="radio"]:first-child:not(:checked) + label.tooglebutton {
  pointer-events: auto; 
}
/**** End: toggle button ***/

/**** Start: tooltip ***/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptextright {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}
.tooltip .tooltiptextleft {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}
.tooltip .tooltiptextbottom {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 15px;
  right: -60px;
}
.tooltip:hover .tooltiptextright {
  visibility: visible;
}
.tooltip:hover .tooltiptextleft {
  visibility: visible;
}
.tooltip:hover .tooltiptextbottom {
  visibility: visible;
}
/**** End: tooltip ***/
/**** Start: hover input show(delete/edit) ***/
div.show-image {
    position: relative;
    float:left;
    margin:5px;
}
div.show-image:hover img{
    opacity:0.5;
}
div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
}
div.show-image input.update {
    top:0;
    left:0;
}
div.show-image input.delete {
    top:0;
    left:79%;
}
/**** End: hover input show(delete/edit) ***/