@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:#990000;
	}
/**** End: Banner ****/

/**** Begin: Login box ****/
table.login {
	background-color:#D8D8D8;
	border-radius: 5px;
	border:2px solid #990000;
	margin-top:5%;
	margin-left:auto; 
    margin-right:auto; 
	}
th.login {
	background-color:#990000;
	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 #990000;
	border-spacing:4px;
	margin-top:20%;
	margin-left:auto; 
    margin-right:auto; 
	}
th.dialogBox {
	border-radius: 5px;
	background-color:#990000;
	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 #990000;
	border-spacing:4px;
	margin:3px;
	}
table.form_float {
	float:left; 
	background-color:#E6E6E6;
	border:1px solid #990000;
	border-spacing:4px;
	margin:3px;
	}
th.form {
	background-color:#990000;
	padding:5px;
	color:#FFFFFF;
}
td.form {
	font-weight:bold;
	}
td.formField {
	background-color:#F2F2F2;
	border:1px solid #990000;
	}
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%;
	}
input.uppercase {
	text-transform: uppercase;
	}			
td.formFieldHilight {
	background-color:#F7BE81;
	border:1px solid #990000;
	}
font.formNote {
	font-size: 10px;
	}
font.formNote2 {
	font-size: 7px;
	}
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:#990000;
	}
img.icon {
	width:100px;
	height:100px;
	border:none;
	}
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;
	}
img.crud_icon {
	width:100%;
	height:auto;
	border:none;
	cursor: pointer;
	}
img.crud_icon:hover {
	opacity: 0.5; 
	}	
table.module_group {
	border-collapse:collapse;
	width:100%;
	}
td.module_group {
	font-weight:bold;
	background-color:#990000;
	color:#FFFFFF;
	}
/**** End: Desktop ****/

/**** Begin: App Container ****/
#app_container {
	/* width: 99%; */
	border-radius: 5px;
	/* border:1px solid #990000; */
	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 #990000;
	border-spacing:4px;
	margin:3px;
	}
th.scrollTable {
	border-radius: 5px;
	background-color:#990000;
	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 #990000;
	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:#990000;
	padding:4px;
	color:#FFFFFF;
}
td.dataTableLabel {
	font-weight:bold;
	}
td.dataTableValue {
	background-color:#FFFFFF;
	}
table.dataTable,td.dataTableValue {
	border:1px solid #990000;
	}
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 #990000;
	}
div.singleRow {
	background-color:#FFFFFF;
	border:1px solid #990000;
	}
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:#990000;
	padding:4px;
	color:#FFFFFF;
}
td.dataLabel {
	font-weight:bold;
	}
td.dataValue {
	background-color:#F2F2F2;
	}
table.data,td.dataValue {
	border:1px solid #990000;
	}
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 #990000;
	}
div.dataRow {
	background-color:#FFFFFF;
	border:1px solid #990000;
	}
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 #990000;
}
th.datalist {
	background-color:#990000;
	padding:4px;
	color:#FFFFFF;
}
th.datalistchild {
	background-color:#b74e4e;
	padding:4px;
	color:#F5F5F5;
	text-align:left;
}
table.datalist,th.datalist,th.datalistchild {
	border-radius: 5px;
	}
td.datalistRow1 {
	background-color:#FFFFFF;
	}
td.datalistRow2 {
	background-color:#BDBDBD;
	}
td.datalistRow3 {
	background-color:#E0E0E0 ;
	}
td.datalistRow4 {
	background-color:#FFFFE0 ;
	}		
td.datalistRow1, td.datalistRow2 {
	vertical-align:top;
	padding:3px;
}
tr.datalist:hover td {
	background-color:#F7BE81;
}
/**** 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: #b74e4e;
  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;
}
/* :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;
}
ul.asCompactList {
    padding:0;
    margin:0;
    list-style-position: inside;
}
li.asCompactList {
    padding-left:1px;
}
/**** End: Tree ****/

/*** Start: Custom Checkbox ***/

/* The container */
.container {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 7px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*** End: Custom Checkbox ***/

/**** Start: dropdown button ***/
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 5px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/*** End: dropdown button ***/

.overlay { background: rgba(20, 20, 20, 0.85); position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; visibility: hidden; opacity: 0; transition: all 0.15s 0.3s; }

.overlay.called { visibility: visible; opacity: 0.9; transition: all 0.3s 0s; }

.loader{ 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform: translate(-50%, -50%); 
   display: flex; 
   align-items: center; 
     
 } 
 /* Creating the dots */ 
 .loader-dots{ 
   height: 25px; 
   width: 25px; 
   margin-right: 10px; 
   border-radius: 50%; 
   background-color: #e61919; 
   border : red;
   animation: loading 1s linear infinite; 
 } 
 /* Creating the loading animation*/ 
 @keyframes loading { 
   0%{ 
    transform: translateX(0); 
   } 
   25%{ 
    transform: translateX(15px); 
   } 
   50%{ 
    transform: translateX(-15px); 
   } 
   100%{ 
    transform: translateX(0); 
   } 
     
 } 
.loader-dots:nth-child(1){ 
  animation-delay: 0s; 
} 
.loader-dots:nth-child(2){ 
  animation-delay: 0.1s; 
} 
.loader-dots:nth-child(3){ 
  animation-delay: 0.2s; 
} 
.loader-dots:nth-child(4){ 
  animation-delay: 0.3s; 
} 
.loader-dots:nth-child(5){ 
  animation-delay: 0.4s; 
}