@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;
	}
font.formNoteToolTip {
	font-size: 10px;
	color: white;
}
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;
	}
input.sendButton {
	border-radius: 5px;
	background-color:#b8e0b9;
	color:#1f4720;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 10px;
	}
input.sendButton:hover {
	background-color:#4CAF50;
	color:white;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 10px;
	}
input.cancelButton {
	border-radius: 5px;
	background-color:#ffb3b3;
	color:#800000;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 10px;
	}
input.cancelButton:hover {
	background-color:#e60000;
	color:white;
	border-width:1px;
	margin:1px;
	padding:4px 10px 4px 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;
	}
.profilePicture {
	position: relative;
	text-align: center;
}
.profilePicture > .main_image {
	position: relative;
	vertical-align: middle;
	border-radius: 50%;
	border:2px solid #990000;
}
.profilePicture > img.action_icon {
	position: absolute; 
	bottom: 0%; 
	right: 20%;
	cursor: pointer;
	border-radius: 20%;
	background-color: white;
}
.profilePicture > img.action_icon:hover {
	opacity: 0.5; 
}
/**** 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;
	}
div.scrollTableContent2 {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow-y:auto;
	overflow-x:auto;
	white-space: nowrap;
	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;
}
.arrowUp {
	color:#FFFFFF;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    cursor: pointer;
    float: right;
}
.arrowDown {
	color:#FFFFFF;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    cursor: pointer;
    float: right;
}
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;
} */
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.accordion-input:checked ~ .tab-content {
  max-height: 100em;
}
/* Icon */
label.accordion-btn-menu::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.accordion-input[type=checkbox] + label.accordion-btn-menu::after {
  content: "+";
}
input.accordion-input[type=radio] + label.accordion-btn-menu::after {
  content: "\25BC";
}
input.accordion-input[type=checkbox]:checked + label.accordion-btn-menu::after {
  transform: rotate(315deg);
}
input.accordion-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 ***/

/*** Start: overlay ***/
.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; 
} 
/*** End: overlay ***/

/*** Start: switch button ***/
.switch {
  position: relative;
  display: inline-block;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}
/*** End: switch button ***/

/*** Start: Custom Button ***/
.circle-button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #3498db; /* You can change the background color */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff; /* You can change the text color */
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.circle-button:hover {
  background-color: #2980b9; /* You can change the hover background color */
}
/*** End: Custom Button ***/

/*** 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: fieldset ***/
fieldset {
/*   background-color: #e6e6e6; */
  border-radius: 5px;
  margin:5px;
  border-color: #990000;
  min-width: 57vw;
}

legend {
  background-color: #990000;
  box-shadow: 3px 5px #a6a6a6;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
}
div.fieldset_action {
	position: relative;
	top: -25px; 
	text-align: right;
	margin-bottom: -20px;
}
/*** End: fieldset ***/
/*** Start: dashboard ***/
div.dashboardright {
	border-radius: 5px;
	overflow-y:scroll;
	margin:5px;
	border:1px solid #990000;
	background-color:#e6e6e6;;
	overflow: auto;
	max-height: 80vh;
	min-height: 100px;
	width: 35vw;
	float: right;	
	}
img.dashboard_icon {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}
img.dashboard_icon:hover {
	opacity: 0.5; 
	}
/*** End: dashboard ***/