/* being basic styles */
ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, H1, H2, H3, H4, H5, H6, MENU, OL, P, TD, TH,  {font-size: 10pt;
font-family: verdana,arial,helvetica,sans-serif; color: #900}
/* add by simon lau 20 March 2003 */

INPUT, TEXTAREA,SELECT, OPTION, CHECKBOX{
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size : 11px;
}

/* Real styles */

A {cursor: auto}
A:link {color: #900; background: transparent; text-decoration: none}
A:visited {color: #900; background: transparent; text-decoration: none}
A:active {color: #900; background: transparent; text-decoration: none}

A:hover {text-decoration: 2px underline dotted; cursor:pointer}

        table{font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000;border-color: #3366CC #3366CC #3366CC #3366CC}
		/*table{font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000;border-color: #960064 #960064 #960064 #960064}(for MIMO) wongkc 16/01/2008*/
        tr{font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000;border-color: #3366CC #3366CC #3366CC #3366CC}
        td{font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000; border: #CCCCCC; line-height: 12pt}
        .header {font-family: Arial,Times New Roman, Times, serif; font-size: 16pt; color: #E34234;font-weight:bold;}
        .greyheader1 {font-family: Verdana, Arial, Helvetica; font-size: 9pt; color: #008080; font-weight: bold}
        .greyheader2 {font-family: Verdana, Arial, Helvetica; font-size: 11pt; color: #008080; font-weight: bold}
        .bh1 {font-family: Verdana, Arial, Helvetica; font-size: 14pt; color: #3366cc; font-weight: bold}
        .bh2 {font-family: Verdana, Arial, Helvetica; font-size: 11pt; color: #3366cc; font-weight: bold}
        .subhead {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #313131}
        .bodytext {font-family: Arial, Helvetica; font-size: 7.5pt; color: #000000}
        .small {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000}
        .smaller {font-family: Verdana, Arial, Helvetica; font-size: 7.5pt; color: #000000}
        .lightfont {font-family: Verdana, Arial, Helvetica; font-size: 10pt; color: #919191}
        .lightfontsmall {font-family: Verdana, Arial, Helvetica; font-size: 7.5pt; color: #919191}
        .lighttable {font-family: Verdana, Arial, Helvetica; font-size: 10pt; color: #ffffff}
        .formtext {font-family: courier, monospace}
        .sm {font-family: Times New Roman, Verdana,  Helvetica; font-size: 14px; color: #3366cc; }
        .sep td, th {border: 1px solid black; border-collapse: collapse; font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #000000; line-height: 12pt}
		.sep3 {	border-collapse: collapse;	}
		.sep3 td{border: 1px solid black;	}
        .sepsmall td, th {border: 1px solid black; border-collapse: collapse; font-family: Verdana, Arial, Helvetica; font-size: 7pt; color: #000000; line-height: 9pt}
        p, div {font-family: Verdana, Arial, Helvetica; font-size: 10pt; color: #000000}
		.opaHighlight img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5;}
		.opaHighlight:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity: 1;}
        a:link {color: #0033CC}
        a:visited {color: #3366FF}
        a:active {color: #FF3300}
/* other font types */
        .titletext {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #FF6600}
        /*.whiteheader {font-family: Verdana, Arial, Helvetica; font-size:8pt; color: #FFFFFF; font-weight: bold;}*/
		.whiteheader {font-family: Verdana, Arial, Helvetica; font-size:10pt; color: #FFFFFF; font-weight: bold;line-height:20px;} /* wongkc 9/3/2022 */
        .whitetext {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #FFFFFF}
        .whitesmall {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #FFFFFF}
        .whitesmaller {font-family: Verdana, Arial, Helvetica; font-size: 10pt; color: #FFFFFF}
        .whitesmallest {font-family: Verdana, Arial, Helvetica; font-size: 8pt; color: #FFFFFF}
        .errortext {font-family: Verdana, Arial, Helvetica; font-size: 9pt; color: #FF0000; font-weight: bold; text-align: center}
/* other td types */
        .black {background-color: #000000}
        .darker {background-color: #3366CC}
        .dark {background-color: #3366CC}
        .medium {background-color: #CCCCCC}
        .light {background-color: #EEEEEE}
        .white {background-color: #FFFFFF}

/*	Table Type - lingmd 2005-10-01 */	
	.MainTable{background-color:#3366cc; width: 760px;}
	
/* TD Type*/
	.black {background-color: #000000}
	.border1{border-color : #666666;}
	.darker {background-color: #3366CC}
	.dark {background-color: #3366CC}
	.greanheadlineTD{background-color:#B3DCCC}
	.headline{background-color:#B3CBF0}
	.light {background-color: #EEEEEE}
	.medium {background-color: #CCCCCC}
	.white {background-color: #FFFFFF}
	
/*	TR Type*/	
	.blueTR{background-color: #78C0D3;}
	.blueTR1{background-color: #50AAC3;}
	.greenTR{background-color:#E1EFC9;}
	.greenTR1{background-color: #D1E4A5}
	.greenTR2{background-color: #A9D24D;}
	.greyTR{background-color:#F2F2F2}
	.greyTR1{background-color:#CCCCCC}
	.lightblueTR{background-color: #C7E2F8;}
	.priority1TR {background-color: #D2D2FF}
	.priority2TR {background-color: #D7EBFF}
	.priority3TR {background-color: #FFE8FF}
	.shadowblueTR{background-color: #8CA5DF;}
	.titleTR{background-color: #3366cc;}
	.whiteTR{background-color: #FFFFFF;}
	.yellowTR{background-color: #FFEFCE}
	.yellowTR1{	background-color: #FFDB90;}


/* dtree */
.dtree {
	position: relative;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: text-bottom;
}
.dtree a {
	text-decoration: none;
}
.dtree a:hover {
	color: #666;
	text-decoration: underline;
}
.dtree .node {
	position: relative;
	top: -2px;
	padding: 1px;
	color: #666;
}
.dtree .nodeSel {
	position: relative;
	top: -2px;
	padding: 1px;
	color: #666;
	background-color: #c0d2ec;
}



/*LMS index page CSS*/
/*
Theme Name: Striking Orange
Theme URI: http://www.perridot.com
Description: Default theme developed by Perridot Systems
Version: 1.0
Author: Perridot System
Author URI: http://www.perridot.com
*/

#pagecontainer {
	width: 760px;	
	/*border:1px solid pink;*/
}

#pageheader {	
	height: 60px;	
}
#pageheader_left {
	float: left;
	width: 50%;		
	font-weight:bold;
	/*border:1px solid green;*/
}
#pageheader_right {
	float: right;
	width: 49%;
	text-align: right;
	/*border:1px solid red;*/
}

#pageheader_strip {
	width: 100%;
	background: #FF6D06 url(images/header-strip-left.gif) left center no-repeat;
	margin-top:7px;
}
#pageheader_strip_content {
	/*padding: 0px 5px 0px 105px;*/
	color: #FFFFFF;
	font-size: 0.9em;
	font-weight: bold;
	background: url(images/header-strip-right.gif) right center no-repeat;
	height: 25px;
}

#footer{
	font-size:0.6em;
	width: 760;	
	margin-top: 5px;
}

#module_table td a{	
	text-decoration: none;
}

#module_table td{		
	border-bottom: 1px solid #D7D7D7;
}

#idx_content td{	
	color:#6666FF;
}

#idx_content td a{	
	text-decoration:none;	
}
#module_table td a:hover, #lms_idx_content td a:hover{
	text-decoration: underline ;
}

#module_table #int_resource_table{
	margin-top: 10px;
	background: #D7EBFF;
	border: 1px solid #B3D9FF; 
	padding: 5px;	
	border-bottom:0px;
}

#module_table #ann_table{
	margin-top: 10px;
	background: #FEFDEC;
	border: 1px solid #EDEBCD; 
	padding: 5px;		
}

#module_table #news_table {
	margin-top: 10px;
	background: #FFEAE0;
	border: 1px solid #FFD3B4; 
	padding: 5px;
}

#module_table #ann_table table td,#module_table #news_table table td{
	border-bottom:0px;		
}

#module_table #news_table{
	margin-top: 10px;
	background: #FFEAE0;
	border: 1px solid #FFD3B4; 
	padding: 5px;
}

#module_table #rm_border_bottom{
	border-bottom:0px;	
}

/* -------------- Index Ajax tab content -----*/
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(/images/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(/images/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.contentstyle{
border: 1px solid gray;
min-height: 700px; _height: 420px;
table-layout:fixed;
width: 520px;
margin-bottom: 1em; padding: 5px;
}

.content_table{
width: 520px;
margin-bottom: 1em; padding: 5px;
}
/*----------------------------------------*/


/******* display date in calendar style ********/
.date{
	background:transparent url(../../images/calendar.gif) no-repeat scroll 0% 50%;
	color:#666666;
	float:left;
	font-size:22px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	height:61px;
	line-height:100%;
	/*margin:15px 0px;*/
	padding:0px 2px 0pt 0pt;
	margin-left: 3px;
	text-align:center;
	width:45px;
}

.date span {
	color:#FFFFFF;
	display:block;
	font-size:11px;
	/*height:16px;
	line-height:normal;
	padding-top:5px;*/
	text-align:center;
}
.date p.month {
	font-size:10px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	margin:-2px 0px 0px;
	padding:0px 2px 0pt 0pt;
	text-align:center;
	text-transform:uppercase;
	width:45px;
}

img { image-orientation: none; }

/*
input[type=text]{ 
	padding: 3px 3px; 	
	font-size:12px;
}

select{ 
	padding: 3px 3px; 	
	font-size:12px;
}
*/

/* wongkc 1/12/2020 */
input[type=submit],input[type=button], input[type=reset]{
    padding:5px 12px; 
    background:#dfdfdf; 
    border:1px solid #bfbfbf;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
	font-size:14px;
}

input[type=submit]:hover, input[type=button]:hover,input[type=reset]:hover{
    border-color:#003d80;
	border-left:4px solid #0072f0;	
}

input[type=text], input[type=password]{
    -webkit-border-radius: 5px;
    border-radius: 5px;
	height:20px;
	padding-left:4px;
	padding-right:3px;
	border: 1px solid grey;
	margin-bottom:1px;	
}

input[type="text"]:disabled {
  background: #e8e8e8;
}

input[type=text]:hover, select:hover{
	border-color:#89c5c5;	
	/*border: 1pt solid #6DB6B6;*/
}

input[type=checkbox]:checked, input[type=radio]:checked{
	box-shadow: 0 0 0 1px #0080ff;
}

input[type="radio"],input[type=checkbox] {
	accent-color: #0080ff; 
}

select:not([multiple]){
	height:20px;
	background-color:white;
	margin-bottom:1px;
}

textarea, select{
    -webkit-border-radius: 5px;
    border-radius: 5px;	
	padding-left:4px;	
	padding-right:3px;	
	border: 1px solid grey;
}

/* wongkc 14/6/20240 */

.login_link{
	line-height:30px;
	margin-right:9px;
	border:0px solid black;
	border-radius: 15px;
	width:135px;
	background-color:#0072B5;
	padding-right:15px;
	font-size:18px;		
}

.login_link_img{
	border:0px solid black;
	width:25px;
	margin-left:5px;
	margin-top:6px;
	position:absolute;
}

.login_link a{
	color:white;
}

.login_link a:hover{	
	text-shadow: 2px 2px black;
    text-decoration: none;
}


.login_form{
	height:100%;
	background: -webkit-linear-gradient(bottom, #e1e1e1 5%, #fff 40%);
	background: -linear-gradient(bottom, #e1e1e1 5%, #fff 60%);
	background: -moz-linear-gradient(bottom, #e1e1e1 5%, #fff 40%);		
}

.login_form .login_tbl_line{
	/*border-left:1px solid #B50F0F;
	border-right:1px solid #B50F0F;
	border-bottom:3px solid #B50F0F;*/
	border-radius: 8px 8px 8px 8px;
	box-shadow:-2px 10px 22px -16px rgba(0,0,0,.75);	
}

.login_form .login_middle_line{
	background-image: radial-gradient(circle, #939597 10%,white 90%);
	height:400px;
	width:2px;
}

.login_form .login_here1{
	/*height:60px;*/
	font-size:30px;
	color:#303030;
	position:absolute;
	padding-top:10px;
	padding-left:2px;	
}
	
.login_form .login_here2{
	height:40px;
	font-size:20px;
	color:#5f5f5f;
	padding-left:2px;
}

.login_form .star_login_here{
	padding-top:10px;
	height:50px;
	font-size:20px;
	color:#5f5f5f;
	padding-left:2px;
}

.login_form .login_username{
	font-size:15px;
	padding:5px;
	height:40px;
	border-radius: 5px;
	border:1px solid grey;
	background-color:#f3f3f3;
	letter-spacing:1px;
}

.login_form .login_password{
	font-size:15px;
	padding:5px;
	height:40px;
	border-radius: 5px;
	border:1px solid grey;
	margin-bottom:5px;
	background-color:#f3f3f3;
	letter-spacing:1px;
}

.login_form .login_showhide_pass{
	border:0px solid red;
	float:left;
	position:absolute;
	margin-top:7px;
}

.login_form .login_language{
	height:40px;
	border-radius: 5px;
	border:1px solid grey;
	width:160px;
	font-size:16px;'
}

.login_form .login_captcha{
	text-align:center;
	font-size:14px;
	padding:5px;
	font-weight:bold;
	height:30px;
	border-radius: 5px;
	border:1px solid grey;
	background-color:#f3f3f3;
}

.login_form .login_submit{
	background-color: #008CBA;
	font-size: 16px;
	padding: 10px 10px;
	text-align: center;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.login_form .login_submit:hover{
	background-color: #006c91;
}


.login_form .new_login_submit{
	background-color: #b18876;
	font-size: 16px;
	padding: 10px 10px;
	text-align: center;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.login_form .new_login_submit:hover{
	background-color: #c19f93;
}

/* login page system message division */
.login_callout {
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

.login_callout_header {
  padding: 10px 10px;
  background: #555;
  font-size: 20px;
  color: white;
}

.login_callout_container {
  padding: 10px;  
  background-color: #ccc;
  color: black
}

.login_closebtn {
  position: absolute;
  top: 22px;
  right: 15px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

/* login page system message division */

.img_zoom { 
  transition: transform .2s; /* Animation */ 
  opacity:0.8; 
}
.img_zoom:hover {
  transform: scale(1.87); /* (200% zoom)*/
  opacity:1.0;
}


/* wongkc 31/3/2021, workplace table css */
.workplace_tbl_css{ /*wongkc 30/3/2021*/
	/*-webkit-border-radius: 5px;
	border-radius: 5px; */
	margin-top:5px;
	box-shadow:-2px 10px 22px -16px rgba(0,0,0,.75);
	border:0px solid #f7f0f0;		
}

.workplace_tbl_css:hover{
	box-shadow:-2px 10px 35px -16px rgba(0,0,0,.75);
}

.workplace_tbl_css a:link, .workplace_tbl_css a:visited{
	color:#313131;
}


/* Dropdown Button for workplace, wongkc 2/9/2021 */
.dropbtn_workplace {
  background-color: #4CAF50;
  color: white;
  padding: 2px 3px 2px;
  font-size: 10pt;
  border: none;
  cursor: pointer;
  width:289px;
  height:23px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown_workplace {
  position: relative;
  display: inline-block;
  /*border-bottom:3px solid #449b48;*/  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content_workplace {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 289px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content_workplace a {
  color: black;
  padding: 5px 6px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content_workplace a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown_workplace:hover .dropdown-content_workplace {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown_workplace:hover .dropbtn_workplace {
  background-color: #3e8e41;
}


/* wongkc 13/9/2021, The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 5px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  /*to {bottom: 0; opacity: 0;}*/
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  /*to {bottom: 0; opacity: 0;}*/
}


.button_Disabled{
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Reset Password */
.captcha{
	height: 30px;
	width:100%;
	margin: 15px 0;	
}
.captcha span{
	/*float:right;*/
	line-height: 30px;
	font-size:13pt;
	font-weight: bolder;	
	margin-left:40px;
}
.captcha .check{
	border-radius: 3px;
	width:30px;
	height: 30px;
	border: 2px solid green;
	display:inline;
	position: absolute;
	cursor: pointer;
	border:1px solid blue;
}

/*Styles for check animation*/
.check .wrapper {
  width: 25px;
  display: inline;
  margin: 4em auto 0;
}

.check .checkmark {
  stroke: green;
  stroke-dashoffset: 745.74853515625;
  stroke-dasharray: 745.74853515625;
  -webkit-animation: dash 2s ease-out forwards;
          animation: dash 2s ease-out forwards;
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 745.74853515625;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 745.74853515625;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/*Reset Password */

.radius_shadow{
	border-radius: 13px;
	box-shadow: 0px 8px 14px 0px rgba(0,0,0,0.2);
	border: 0px solid #c4c4c4;
	font-size:15px;
}


#header_on_top{ /* wongkc 10/10/2025 */
	margin-top:5px;
}


/* wongkc 22/10/2025 */
.sch_info_style{
	border-bottom:4px solid #EB97FF;	
}

.sch_info_style::first-letter{
	font-size: 20px;
  	color: #EB97FF;
  	/*font-weight: bold;*/
}

.stf_mgt_style{
	border-bottom:4px solid #000000;	
}

.stf_mgt_style::first-letter{
	font-size: 20px;
  	color: #000000;
  	/*font-weight: bold;*/
}

.cls_info_style{
	border-bottom:4px solid #00DFDF;	
}

.cls_info_style::first-letter{
	font-size: 20px;
  	color: #00DFDF;
  	/*font-weight: bold;*/
}

.exm_result_style{
	border-bottom:4px solid #98E79B;	
}

.exm_result_style::first-letter{
	font-size: 20px;
  	color: #98E79B;
  	/*font-weight: bold;*/
}

.library_style{
	border-bottom:4px solid #B0C3FF;	
}

.library_style::first-letter{
	font-size: 20px;
  	color: #B0C3FF;
  	/*font-weight: bold;*/
}

.general_admin_style{
	border-bottom:4px solid #ff8040;	
}

.general_admin_style::first-letter{
	font-size: 20px;
  	color: #ff8040;
  	/*font-weight: bold;*/
}

.e_attd_style{
	border-bottom:4px solid #804000;	
}

.e_attd_style::first-letter{
	font-size: 20px;
  	color: #804000;
  	/*font-weight: bold;*/
}

.iventory_style{
	border-bottom:4px solid #ffff00;	
}

.iventory_style::first-letter{
	font-size: 20px;
  	color: #ffff00;
  	/*font-weight: bold;*/
}

.doc_share_style{
	border-bottom:4px solid #408080;	
}

.doc_share_style::first-letter{
	font-size: 20px;
  	color: #408080;
  	/*font-weight: bold;*/
}