/**** Generic CSS For Gateway ********/

/*============================    Background Color CSS   ========================*/
.tg_background_pale_blue{
	background-color: #c5d5f1!important;
}
.tg_background_pale_red{
	background-color: #fab9b9!important;
}
.tg_background_pale_yellow{
	background-color: #f9ffa5!important;
}

/*============================    Button Color CSS   ========================*/
.tg_background_color_blue{
	background-color:#2196f3;
}
.tg_background_color_grey{
	background-color:#aaaaaa;
}

.tg_background_color_red{
	background-color:#ffa5a5;
}

/*============================   Error CSS     ========================*/
.tg_error{
	background-color: #fab9b9!important;
}
.tg_error_msg{
	color: red!important;
}

/*============================   Warning CSS     ========================*/
.tg_warning{
	background-color: orange!important;
}
.tg_warning_msg{
	color: orange!important;
}

/*============================   Photo CSS     ========================*/
.tg_photo_thumbnail_tiny{
	/* override inline background-image: url(runtime);*/
	display:inline-block;
	width: 42px;
	height: 54px;
	background-repeat: no-repeat;
	background-position: top center;
	position:relative; /* content are layers */
}
.tg_photo_thumbnail{
	/* override inline background-image: url(runtime);*/
	display:inline-block;
	width: 60px;
	height: 75px;
	background-repeat: no-repeat;
	background-position: top center;
	position:relative; /* content are layers */
}

/*============================   Table CSS   ========================*/
.tg_table{
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	display:table;
	font-size: 11px;
	font-weight: normal;
}
/* header */
.tg_table th
, .tg_table tfoot td{
	font-size: 9px;
	font-weight: normal;
	text-decoration: none;
	padding:8px 8px;
	display:table-cell;
	text-align:left;
	vertical-align:top;
	background-color: #9bb5cd;
	color: #ffffff;
	white-space: nowrap;
}
.tg_table th a{
	color: #ffffff;
	text-decoration:none;
}
.tg_table th:first-child{
	padding-left:16px;
}
.tg_table th .tg_checkbox + label{
	top:-3px;
}

/* row (tr)*/
.tg_table:not(.expandible) > tbody > tr:nth-child(odd)
, .tg_table.expandible > tbody > tr:nth-child(4n+1)
, .tg_table.expandible > tbody > tr:nth-child(4n+2)
{
	background-color:#fff;
}
.tg_table > tbody > tr {
	background-color:#f1f1f1;
}
.tg_table:not(.expandible) > tbody > tr:hover
, .tg_table.expandible > tbody > tr:nth-child(odd):hover{
	background-color:#ddd;
}
.tg_table.no_stripe tbody tr {
	background-color: #ffffff;
}

.tg_table > tbody > tr > td:last-child,
.tg_table td:first-child {
	white-space: nowrap;
}

/* cell (td) */
.tg_table > tbody td{
	padding:8px 8px;
	display:table-cell;
	text-align:left;
	vertical-align:middle;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	height: 30px;
	color:#000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9bb5cd;
	white-space: normal;
}

.tg_table tbody td.text_color_green {
	color: green;
}

.tg_table tbody td.text_color_red {
	color: red;
}

.tg_table.condensed tbody td {
	height: unset;
	padding: 4px;
}
.tg_table tbody td.section_header {
	color: #666666;
	background-color: #EEEEEE;
}

.tg_table tbody td a{
	color: #4360aa;
	text-decoration:none;
}

.tg_table tbody td a:hover {
	color: #FF0000;
	text-decoration:none;
}

.tg_table tbody td:first-child{
	padding-left:16px
}
/* footer */
.tg_table tfoot td:first-child{
	padding-top:10px;
}

.tg_table.expandible table tbody td {
	padding: 3px 10px 3px 2px;
	border: 0;
	height: 25px;
	vertical-align: top;
}

.tg_table tfoot div {
	font-size:9px;
	font-weight:normal;
	color:#000000;

}

.tg_table tfoot div:first-child {
	float: left;
	width: 30%;
	text-align:left;
}

.tg_table tfoot div:nth-child(2) {
	float: right;
	width: 60%;
	text-align:right;
	padding-right: 10px;
}

/*============================   Pagination CSS   ========================*/
.tg_pagination {
	text-align:center;
}
.tg_pagination ul {
	display: inline-block;
	padding: 0;
	margin: 8px 0;
}
.tg_pagination li {
	display: inline;

}
.tg_pagination li a{
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border:1px solid #aaa;
	margin: 0 4px;
}
.tg_pagination li a.tg_selected_page {
	background-color : #ddd;
}
/*============================   Buttons CSS   ========================*/
.tg_buttons{
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
	width:100%;
}

.tg_button:hover,.tg_button:focus{
	box-shadow: 4px 4px 16px 4px rgba(0,0,0,0.2);
}

.tg_button_small:hover,.tg_button_small:focus{
	box-shadow: 1px 4px 10px 1px rgba(0,0,0,0.2);
}

.tg_button{
	min-width: 120px;
	color: #FFFFFF;
	border:none;
	display:inline-block;
	outline:0;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	font-size: 15px;
	margin-right:5px;
	height:35px;
}

.tg_dialog_button{
	min-width: 120px !important;
	color: #FFFFFF !important;
	border:none !important;
	display:inline-block !important;
	outline:0 !important;
	padding:8px 16px !important;
	vertical-align:middle !important;
	overflow:hidden !important;
	text-decoration:none !important;
	text-align:center !important;
	cursor:pointer !important;
	white-space:nowrap !important;
	font-size: 15px !important;
	margin-right:5px !important;
	height:35px !important;
	background-image:none !important;
	background:none !important;
	margin-bottom:20px !important;
}

.tg_dialog_button_blue{
	background-color:#2196f3 !important;
}

.tg_dialog_button_grey{
	background-color:#aaaaaa !important;
}

.tg_button_small{
	color: #FFFFFF;
	border:none;
	padding: 0px 10px;
	display:inline-block;
	outline:0;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	font-size: 9px;
	margin-right:-2px;
	height:20px;
}

/*============================   Label CSS   ========================*/
.tg_label{
	color: #000000;
	font-family: Verdana;
	font-size: 11px;
	padding: 10px 5px;
}

.tg_label_bold{
	color: #000000;
	font-weight: bold;
	font-family: Verdana;
	font-size: 11px;
	padding: 5px;
}
/*============================   Radio Buttons CSS   ========================*/
.tg_radio{
	width:18px;
	height:18px;
	position:relative;
	top:-3px;
	vertical-align:top;
	margin-left:0px;
}

/*============================   Checkbox CSS   ========================*/

/* Base for label styling */
.tg_checkbox:not(:checked),
.tg_checkbox:checked {
	position:absolute;
	left: -9999px;
}
.tg_checkbox:not(:checked) + label,
.tg_checkbox:checked + label {
	position: relative;
	padding-left: 1.95em;
}
.tg_checkbox:not(:disabled):not(:checked) + label,
.tg_checkbox:not(:disabled):checked + label{
	cursor: pointer;
}

/* checkbox aspect */
.tg_checkbox:not(:checked) + label:before,
.tg_checkbox:checked + label:before {
	content: '';
	position: absolute;
	left: 0; top: -1;
	width: 14px;
	height: 14px;
	border: 2px solid #ccc;
	background: #fff;
	border-radius: 4px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
	box-sizing: content-box;
}
/* checked mark aspect */
.tg_checkbox:not(:checked) + label:after,
.tg_checkbox:checked + label:after {
	content: '✔';
	position: absolute;
	top: .2em; left: .3em;
	font-size: 14px;
	line-height: 0.8;
	color: #09ad7e;
	transition: all .2s;
}
/* checked mark aspect changes */
.tg_checkbox:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
.tg_checkbox:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
/* disabled checkbox */
.tg_checkbox:disabled:not(:checked) + label:before,
.tg_checkbox:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
}
.tg_checkbox:disabled:checked + label:after {
	color: #09ad7e;
}
/* accessibility */
.tg_checkbox:checked:focus + label:before,
.tg_checkbox:not(:checked):focus + label:before {
	border: 2px dotted blue;
}

/* hover style just for information */
.tg_checkbox:not(:disabled) + label:hover:before {
	border: 2px solid #4778d9!important;
	cursor: cursor;
}

/*============================   Select Field CSS   ========================*/
.tg_select {
	padding: 3px 3px;
	vertical-align:middle;
	color: #000000;
	border: 1px solid #cfcfcf;
	font-family: Verdana;
	font-size: 11px;
	height: 34px;
	background-color:#fff;
}

.tg_select_small {
	padding: 3px 3px;
	vertical-align:middle;
	color: #000000;
	border: 1px solid #cfcfcf;
	font-family: Verdana;
	font-size: 11px;
	height: 27px;
	background-color:#fff;
}

.tg_select:disabled{
	background-color:#eee;
}

/*============================   Text Field CSS   ========================*/
.tg_textbox {
	padding: 3px 3px;
	vertical-align:middle;
	color: #000000;
	border: 1px solid #cfcfcf;
	font-size: 11px;
	font-family: Verdana;
	text-decoration: none;
	width: calc(100% - 6px);
	height: 27px;
}

.tg_textbox_small {
	padding: 3px 3px;
	vertical-align:middle;
	color: #000000;
	border: 1px solid #cfcfcf;
	font-size: 11px;
	font-family: Verdana;
	text-decoration: none;
	width: calc(100% - 6px);
	height: 20px;
}

.tg_keyword_search {
	width: 150px;
}

/*============================   Action Links CSS   ========================*/

.tg_link_add,
.tg_link_plus,
.tg_link_edit,
.tg_link_edit_photo,
.tg_link_download_photo,
.tg_link_delete,
.tg_link_arrow_up,
.tg_link_arrow_down,
.tg_link_print,
.tg_link_back,
.tg_link_export,
.tg_link_import,
.tg_link_download,
.tg_link_view,
.tg_link_pdf,
.tg_link_scrollup,
.tg_link_scrolldown,
.tg_link_sync,
.tg_link_backtotop,
.tg_link_sync_from_google,
.tg_link_publish_google,
.tg_link_copy {
	background-repeat: no-repeat;
	text-decoration: none;
	padding-left: 20px;
	display:inline-block;
	min-height:20px;
	cursor: pointer;
	color:#258002;
}
.tg_link_action{
	color:#258002;
	text-decoration: none;
	cursor:pointer;
}
.tg_link_action_blue{
	color:#4360aa;
	text-decoration: none;
	cursor:pointer;
}
.tg_link_action_blue:hover {
	color: #FF0000;
}
.tg_link_add{
	background-image:url(/theme/image_en/icon_add.gif);
}
.tg_link_plus{
	background-image:url(/theme/image_en/icon_add2.gif);
}
.tg_link_edit{
	background-image:url(/theme/image_en/icon_edit.gif);
	padding-left:15px;
}
.tg_link_delete{
	background-image:url(/theme/image_en/icon_delete_off.gif);
}
.tg_link_arrow_up{
	background-image:url(/theme/image_en/icon_sort_up_off.gif);
}
.tg_link_arrow_down{
	background-image:url(/theme/image_en/icon_sort_down_off.gif);
}
.tg_link_delete.always_on,
.tg_link_delete:hover{
	background-image:url(/theme/image_en/icon_delete_on.gif);
}
.tg_link_print{
	background-image:url(/theme/image_en/icon_print.gif);
}
.tg_link_export{
	background-image:url(/theme/image_en/icon_export.gif);
}
.tg_link_import{
	background-image:url(/theme/image_en/icon_import.gif);
}
.tg_link_download{
	background-image:url(/theme/image_en/icon_download.png);
	padding-left:15px;
}
.tg_link_edit_photo{
	background-image:url(/theme/image_en/icon_edit_photo.png);
}
.tg_link_download_photo{
	background-image:url(/theme/image_en/icon_download_photo.png);
}
.tg_link_sync{
	background-image:url(/theme/image_en/icon_sync.png);
}

.tg_link_sync_from_google{
	background-image:url(/theme/image_en/icon_sync_from_google.png);
	background-repeat:no-repeat;
}

.tg_link_publish_google{
	background-image:url(/theme/image_en/icon_publish_google.png);
	background-repeat:no-repeat;
	padding-top: 3px;
	padding-left: 25px;
}

.tg_link_copy{
	background-image:url(/theme/image_en/icon_copy.png);
}

/*============================   Section Title CSS   ========================*/
.tg_icon_loading{
	background-image:url(/theme/image_en/ajax_loading_indicator.gif);
	background-repeat:no-repeat;
	height:20px;
	margin:10px 0px;
}

/*============================   Section Title CSS   ========================*/
.tg_section_title{
	width: 100%;
	background-color: #c5d5f1;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	box-sizing: border-box;
}

/*============================   Notification Pages CSS   ========================*/

.tg_notification_module_bar{
	width: 100%;
	background: none repeat scroll 0% 0% rgb(250, 185, 185);
	float: none;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	box-sizing: border-box;
}
.tg_notification_body{
	background-color:white;
	padding-bottom:20px;
	width:95%;
	box-shadow: 4px 4px 2px #CCC;
	margin: 10px auto;
}
.tg_notification_question{
	background-color: #FFFFFF;
	width: 100%;
}
.tg_notification_title{
	text-align:center;
	width:100%;
	padding:20px;
	font-size: 25px;
	font-weight: bold;
	display: table;
	box-sizing:border-box;
	background-color: #c5d5f1;
}
.tg_notification_content{
	padding: 30px 80px 20px 80px;
}

.tg_note{
	background-color:#caefff;
	border-left:6px solid #0090d2;
	width: 100%;
	float: none;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
	font-size: 11px;
	box-sizing: border-box;
}

.tg_note:before{
	content:"";
	display:table;
	clear:both;
}

.tg_dialog.withScrollY {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* ESF Timestamp=2017-07-20Z16:37:42T+0800 ; 20170720-v1706_fix_enhance-UploadBy_albertwong - faddf8a851b31d2481e884bc81f869f5 */
/* ESF Timestamp=2017-08-10Z17:44:43T+0800 ; 20170810-ActivityRevamp-UploadBy_terrytsang - 2160d548b47b75ac077b8263b253d83d */
/* ESF Timestamp=2017-08-16Z17:09:53T+0800 ; 20170816-v1707_enhance-UploadBy_albertwong - 0d232597787afd4937cfff5e35fab1f7 */
/* ESF Timestamp=2017-09-22Z12:56:38T+0800 ; 20170922-v1707_major_demographic-UploadBy_albertwong - 3d3a216c832d61494e2beb57fb4094c3 */
/* ESF Timestamp=2017-09-29Z18:33:35T+0800 ; 20170929-esfpolicyupdate-UploadBy_matthewmak - 10ffc068aed33d1caf7d72e477a8749d */
/* ESF Timestamp=2017-10-20Z16:13:26T+0800 ; 20171020-v1709_enhance_urgent_fix-UploadBy_albertwong - 3db0a2b0d39b313fe1625e940634db18 */
/* ESF Timestamp=2017-11-01Z17:36:14T+0800 ; 20171101-v1710_fix-UploadBy_terrytsang - 79160e7e64f5154ea99484db9aab4895 */
/* ESF Timestamp=2017-12-18Z11:16:41T+0800 ; 20171218-v1711_enhance-UploadBy_matthewmak - 2551d0a6810b4b3326aae1d6349bc48a */
/* ESF Timestamp=2018-01-19Z15:49:17T+0800 ; 20180119-v1712_enhance-UploadBy_matthewmak - 990d8c64195374de16932c88d981142c */
/* ESF Timestamp=2018-02-23Z15:40:36T+0800 ; 20180223-v1801_release-UploadBy_matthewmak - 9dacf5a88d6094755da624bec47fc696 */
/* ESF Timestamp=2018-04-26Z17:05:45T+0800 ; 20180426-v1803_major_hr_dependent-UploadBy_terrytsang - 32d9599ae9de8027bfdedf9e435b7579 */
/* ESF Timestamp=2018-11-12Z10:45:39T+0800 ; 20181112-ImproveLoadTime-UploadBy_albertwong - 2f9a134af1cc8b53e26ccdd492eef676 */
/* ESF Timestamp=2018-11-27Z11:07:13T+0800 ; 20181127-v1810_enhance-UploadBy_matthewmak - b6ea6cb87f345ae8008bde0cc22cdb0e */
/* ESF Timestamp=2019-03-29Z15:36:30T+0800 ; 20190329-UploadAssessment-UploadBy_albertwong - 5837ccca332a3ac893aa81e3d40d0808 */
/* ESF Timestamp=2019-09-10Z11:42:28T+0800 ; 20190910-StudentOption-UploadBy_albertwong - e01371db7e3a4e9f79b995b9039076b9 */
/* ESF Timestamp=2019-11-06Z16:28:19T+0800 ; 20191106-PHP7CommonCodeUpdate-UploadBy_terrytsang - c829bf1d3788ebca9f756e5b3039d85b */
/* ESF Timestamp=2019-11-28Z14:48:45T+0800 ; 20191128-TeacherCover-UploadBy_albertwong - 63aa3589f81d5b89821e15d620d7f39f */
/* ESF Timestamp=2020-06-19Z18:57:05T+0800 ; 20200619-v2004_enhance_student_notes-UploadBy_terrytsang - 1464de33932be1a292dee892f723b88e */
/* ESF Timestamp=2020-06-24Z10:26:55T+0800 ; 20200624-ESF_CPD-UploadBy_albertwong - fd5a5a4ddcf1b4b69b2a43e1f4ff0128 */
/* ESF Timestamp=2020-07-10Z11:18:25T+0800 ; 20200710-fixDialogOverflow-UploadBy_terrytsang - 2af56ccedd5d11746bf682d19e6431f6 */
/* ESF Timestamp=2022-01-13Z17:26:38T+0800 ; 20220113-v2111_enhance_ib_exam-UploadBy_matthewmak - d3ce7cc5b36db6445d7414a633d8d4f3 */
/* ESF Timestamp=2023-08-28Z17:07:54T+0800 ; 20230828-TCApproval-UploadBy_terrytsang - 542fa183c24d0602fa7e647af806bb81 */