/* start Override default Bootstrap setting */

/*==========  Mobile First Method  ==========*/
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 767px) {
    .columnLeft {
        padding-left:5px;
        padding-right:5px;
    }
    
    .columnRight {
        padding-left:5px;
        padding-right:5px;
    }
    
    .columnRightFill {
        padding-top: 0px;
    }
	
	.tg_notification_content {
		padding: 20px 25px;
	}
	
	.content.label {
		width: 80px;
	}

	#attachment_list {
		padding: 20px 25px 20px 25px;
	}

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .columnLeft {
        padding-left:5px;
        padding-right:5px;
    }
    
    .columnRight {
        padding-left:5px;
        padding-right:5px;
    }
 
	.tg_notification_content {
		padding: 30px 80px 20px 80px;
	}
 
 	.content.label {
		width: 140px;
	}

	#attachment_list {
		padding: 10px 80px 20px 80px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .columnLeft {
        padding-left:10px;
        padding-right:10px;
    }
    
    .columnRight {
        padding-left:10px;
        padding-right:10px;
    }
    
    .columnMiddle {
        padding-left:0px;
        padding-right:0px;
    }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .columnLeft {
        padding-left:10px;
        padding-right:10px;
    }
    
    .columnRight {
        padding-left:10px;
        padding-right:10px;
    }

    .columnMiddle {
        padding-left:0px;
        padding-right:0px;
    }

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .columnLeft {
        padding-left:10px;
    }
    
    .columnRight {
        padding-right:10px;
    }

    .columnMiddle {
        padding-left:0px;
        padding-right:0px;
    }
}

.container-fluid {
    padding-right: 0px;
}

.bootstrap-select.btn-group .btn .filter-option,
.bootstrap-select.btn-group .dropdown-menu li > a {
    text-align: center;
}

.dropdown-menu>li>a {
    color: #337ab7;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dropdown-menu>li>a:hover {
    color: #FF0000;
}

/* fix the click failure on mobile */ 
.dropdown-backdrop {
  position: static;
}

.navbar-default {
    background-color: transparent;
    
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
    width: 30px !important;
    height: 5px !important;
}

.navbar-toggle:hover {
    border: 0px solid transparent;
}

.nav_div_toogle {
    width: 100px;
}

.navbar-default .navbar-toggle {
    border-color: grey;
}

.navbar-fixed-top {
	border-width: 0 0 0 0px;
}

.navbar-brand >.mobile_inline {
	display: inline;
}

@media (min-width: 0) {
  .navbar-toggle {
    display: block; /* force showing the toggle */
  }
}

@media (min-width: 9999px) {
  body {
    padding: 0;
  }
  .navbar {
    right: auto;
    background: none;
    border: none;
  }
}

table.table>tbody>tr>td {
	border-top-style: none;
	border-top-width: 0px;
	padding-left: 0px;
}

table.table>tbody>tr>td.panelHeaderColumn {
	padding-right: 0px;
}
a.jumplink {
    background-color: #fff;
    text-decoration: none;
    cursor: pointer;
}

div.jumplink {
    text-decoration: none;
    cursor: pointer;
}

a.jumplink:hover, div.jumplink:hover {
    color: red;
}

a.jumplink.reminder, div.jumplink.reminder {
    color: rgba(204, 90, 90, 0.74);
}

a.jumplink.reminder:hover, div.jumplink.reminder:hover {
    color: red;
}
/*  end Override default bootstrap setting */

/* start override normalize css */
table {
    border-collapse: initial;
}

/* end override normalize css */


/*  start general css class */
.msgbox {
    border-color: #dbedff;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 4px;
    margin-bottom: 4px;
}

.homepanelbase {
    margin-top: 5px;
	margin-bottom: 10px;
    overflow-x:hidden;
    overflow-y:auto;
    border-width: 0px; 
}

.homepanelbase.msg{
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    border-width: 0px;
    margin-bottom: 0px;
    font-size: 11px;
}

.homepanelbase > .homepanelheader {
    color: #333;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
	font-size: 18px;
	font-weight: bold;
	border-width: 1px; 
	border-bottom-style: solid;
	border-color: rgb(224, 222, 222);
}

.homepanelbase > .homepanelheader > a {
    text-decoration: none;
}

.homepanelbase > .homepanelheader > .headerformore {
    float: right;
}

.homepanelbase > .homepanelbody {
    padding-top: 5px;
    padding-bottom: 2px;
}

.homepanelheader.ballot {
    padding: 5px 5px;
    margin: 0px;
    background-color: #A1A1A1;
    background-image: linear-gradient( to bottom, #A1A1A1 0%, #A1A1A1 85%, #929292 100%);
    font-size: 12px;
    font-weight: bold;
    color:#fff;
}
.listnorecord {
	background-color: #FFFFFF;
	font-style: italic;
	text-align: left;
}

.container_padding {
	padding-left: 0px;
    padding-right:0px;
}

.text-span {
	width: 100%;
	white-space: nowrap;
}

.text-wrapping {
    width: 100%;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.text-center {
    text-align: center;
}

.mobile_nav_right {
	text-align: right;
	padding-right: 5px;
	padding-top: 5px;
}

.noborderbottom {
    border-bottom: 0px;
}

.topspacing {
    padding-top: 1px;
}

.indicator{
    font-size:11px;
    font-weight:normal;
    color:#fb0505;
}

.searchSection {
	display: block;
	font-weight: bold;
	padding: 5px;
}

.page_footer {
    background-color: #C7C3C3;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
}


/*  end genearl css class */

/* override - font_size_normal */
.content_bold {
	margin-left: 5px;
}

/* override - common.css */
.greyBar {
	/*font-size: 14px;*/
	
}
.sub_layer_link {
/*font-size: 14px;*/
font-weight: normal;
color: #597f06;
text-decoration: none;
}
.sub_layer_link:hover {
color: #FF0000;
}
.sub_layer_content {
width: 95%;
line-height: 20px;
}

/* distruct document repository layout
#bulletin_recordtop {
	width:100%;
	margin: 0px;
	border: 0px;
	padding: 0px;
}
*/

/* start override - common_cammy.css */
/* destruct activity - register.php
#bulletin_record{
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}
*/
/*  start login */
.login_info {
    color:#000000;
}
/*  end login */

/*  start module menu */
.popsubmenu {
  display:none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  /*font-size: 14px;*/
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  word-wrap: break-word;
}

.popsubmenu > ul {
	list-style: none;
	padding-left: 0;
}

.popsubmenu > ul > li {
    text-align: -webkit-match-parent;
}

.popsubmenu > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 2.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.popsubmenu > ul > li > a:hover {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 2.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
    padding:5px;
    height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
    min-width:3000px;
    margin-left:12px;
    margin-top:0px;
}

.list li{
    display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}
/*  end module menu */

/*  start Home page */
.homepanel{
    clear:both;
    margin: 0px;
    width: 100%;
}

.table-responsive>.table>tbody>tr>td.panelHeaderColumn{
    display:inline-block;
    margin: 0px;
    white-space:normal;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    border: none;
    text-align: left;
    font-size: 11px;
    padding-left: 5px;
}

.panelHeaderColumn > a,
.panelHeaderColumn > a:link,
.panelHeaderColumn > a:visited{
	background-color: #fff;
    text-decoration: none;
    font-weight: normal;
}

.table-responsive>.table>tbody>tr>td.panelContentColumn {
    white-space:normal;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
	text-align: center;
    font-size: 12px;
}

.table>tbody>tr>td.panelContentColumn {
        border: none;
}

.panelrow {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;  
}

.panellink:hover{
   color:red;
   text-decoration: none;
}

/* attendance */
.attendance_photo {
    width: 30px;
    height: 37px;
}

.attend_warning {
    color: red;
    text-align: center;
}

.attend_normal {
    color: green;
    text-align: center;
}


.attendancelist {
    display: none; /* hide attendance info by default */
}

.attendancetable {
    display: none; /*  hide attendance info by default */
    margin-bottom: 0px;
}

.attendancetable > tbody > tr > td > span.attend_warning {
}

.attendance_studentinfo {
    text-align: left;
    vertical-align: top;
    padding-left: 3px;
    color: grey;
}

.attendance_name {
    text-align: left;
    vertical-align: top;
    padding-right: 15px;
}

ul.attendancelist {
    list-style-type: none;
}

ul.attendancelist > li{
    display: block;
}

/*  notice */
.enoticetable > tbody > tr > td.panelHeaderColumn {
    border-bottom-width: 1px;
    font-size: 12px;
}


div > .viewitempanel{
    clear:both;
    margin: 0px;
    width: 100%;
    border: none;
    border-width: 0px;
}

div > .viewitempanelnews{
    padding: 10px;	
}

.table-responsive >.table > tbody > tr > td.viewitemlistLabel{
    display:inline-block;
    margin: 0px;
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    border: none;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.viewitemlistLabel > a,
.viewitemlistLabel > a:link,
.viewitemlistLabel > a:visited
.viewitemlistLabel > a:hover {
    text-decoration: none;
}

.table-responsive > .table > tbody > tr > td.viewitemlistContent {
    text-align: left;
    font-size: 12px;
    border: none;
    white-space: normal;
}

.table-responsive > .table > tbody > tr > td.viewitemlistContent_detail {
    text-align: left;
    font-size: 12px;
    border: none;
    white-space: normal;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
}


div > table > tbody > tr > td > p.viewitemlistNotice {
	background-color: #c5d5f1;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
	white-space:normal;
}


.parentconsultationtable {
    display: none; /*  hide attendance info by default */
    margin-bottom: 0px;
}

.parentconsultation_name {
    text-align: left;
    vertical-align: top;
    padding-left: 3px;
    
}
/*  end Home page */

.portal_search_result_title {
    background-color: #f2f2f2;
    border-bottom: solid 1px #cdcdcd;
    padding: 2px;
    width: 100%;
    font-size: 12px;
    height: 15px;
}
.portal_search_result_thumbnail{
    width:100px;
}
.portal_search_result_subject {
    vertical-align: top;
    font-size: 12px;
}

.portal_search_form_title {
width: 80px;
height: 25px;
clear: none;
float: left;
padding: 3px;
}

.portal_search_staff_form_title {
clear: none;
float: left;
height: 25px;
padding: 2px;
width: 76px;
}

.portal_search_result_header {
padding: 2px;
padding-top: 5px;
font-size: 11px;
float: left
}

.portal_entry_more {
    padding: 3px;
}
.portal_entry_more a {
    color: #0033CC;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}
.portal_entry_more a:hover {
    color: #FF0000;
}
#invite_btn,
#notify_btn{
    float:right;
    margin-right: 5px;
}


/*  start - iCalendar */
#portal_cal_active_event {
    clear: left;
    float: left;
    background-repeat: no-repeat;
    height: 125px;
    width: 115px;
    padding-top: 5px;
    background-image: url(/theme/image_en/layout_grey/portal_active_event_bg.gif);
}

.portal_cal_active_event_title {
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
}

#portal_cal_active_event a {
    height: 25px;
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
}
#portal_cal_active_event a.invite{
    color: #15a905;
}
#portal_cal_active_event a.notify{
    color: #1641a3;
}
#portal_cal_active_event a:hover{
    color: #FF0000;
}
#portal_cal_tab > li#current > a{
    background-color: #dbedff;
    color: #0b2b92;
}
#portal_cal_content{
    border-color: #dbedff;
    border-width: 5px 5px 10px;
    border-style: solid;
    border-radius: 0 15px 15px 15px;
    width: 100%;
    height: 210px;
    background-color: #fff;
    overflow-x:hidden;
    overflow-y:auto;
    background-color: #dbedff;
}
#calendar_wrapper >#agenda{
    background-color:#fff;
    min-height: 210px;
    padding:0px 5px;
}
.cal_agenda_title {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #c2c2c2;
    padding-top: 8px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}

#displatModeTab{
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 5px;
}
.display_tab{
    color: #1b2a9b;
    text-decoration: none;
}
.display_tab.currentTab{
    font-weight:bold;
}
a.sen_bold,
a.eal_bold,
a.gt_bold,
a.innote_bold{
    font-weight: bold;
}
a.eal_1{
    color:#00FF00;
}
a.eal_2{
    color:#FF9933;
}
a.eal_3{
    color:#FF0033;
}
a.eal_4{
    color:#000000;
}
.eal_default{
    color:#000000;
}

/*  end - iCalendar */

/* Bulletin */
.table-responsive > .table > tbody > tr > td.viewbulletin {
    border: none;
    white-space: normal;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
}

.panelnorecord {
    padding: 3px;
    height: 25px;
    vertical-align: middle;
    text-align: -webkit-center;
    display: table-cell;
    width: 100%;
}

.searchPanel {
	text-align: -webkit-right;
	padding-left: 5px;
	padding-right: 5px;
}

.viewtab {
    border-bottom-width: 0px;
}

/* search panel */
.homepanelheader.searchheader {
	border-bottom-style: none;
}

/* start - font_size_normal.css */
.imail_entry_unread {
	font-size: 14px;
}
.bulletin_portal_entry a {
	font-size: 14px;
}
.day_time {
	font-size: 12px;
}
#module_content_header_title a {
	font-size: 12px;
}
/* end - font_size_normal.css */

/* start - Common.css - customization */
html[lang=en] div#commontabs > ul > li > a, ul.commontabs > li > a {
	font-size: 11px;
}
b, table {
	font-size: 12px;
}
.top_submenu_item li a {
	font-size:11px;
}
.bulletin_board {
min-height: 320px;
}

.bulletin_table_header {
    background: #b5cce9;
}

.bulletin_table_header > td {
    height: 20px;
    padding: 5px 5px 5px 10px;
}

.bulletin_table_content {
    padding: 0px;
    height: 20px;
    background: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(207, 207, 207);
}

.bulletin_table_content > td {
    height: 20px;
    padding: 5px 5px 5px 10px;
}


table.bulletintable {
	border-collapse: collapse;
}

table.bulletintable>tbody>tr>td {
    border-spacing: 2px;
    padding-left: 15px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;    
    vertical-align: middle;
    font-size: 11px;
}
.bulletin_link {
}

table.mobile_demographic {
	border-spacing: 7px;
}

/* end - Common.css - customization */

/* start - mobile font class */
.mobile_label_font_size {
	font-size: 12px
}

.mobile_content_font_size {
    font-size: 12px
}

.mobile_label_bold {
    font-weight: bold;
}

.mobile_col_no_pad {
	padding: 0 0 0 0px;
}

.mobile_content_padding {
    padding: 1px 3px 1px  0px;
}
/* end - mobile font class */

.animate_left{
    text-align:left;
    vertical-align:bottom;
}

.container-fluid>.navbar-header.mobile_top_banner {
	margin-left: 0px;
	padding-left: 5px;
	width: 100%;
}

.mobile_nav {
	background-color: #fff;
	width: 100%;
}
.mobile_nav_icon {
float: left;
height: 35px;
font-size: 18px;
line-height: 20px;
border: 0px solid transparent;
padding: 5px 5px 5px 5px;
}

.mobile_hr_separator {
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: 4px solid #eee;
}

.mobile_div_header {
    clear: left;
    float: left;

    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 15px;
    background-color: #c5d5f1;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
}

.mobile_div_form_bottom {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin: 20px;
    clear: left;
    float: left;
    width: 95%;
    font-size: 11px;
    font-weight: bold;
    color: #2b57a5;
    border-top: dotted 1px #919bae;
    text-align: center;
}

.mobile_div_form_bottom a {
    font-size: 11px;
    font-weight: bold;
    color: #2b57a5;
    text-decoration: none;
}

.mobile_div_form_bottom a:hover {
    font-size: 11px;
    font-weight: bold;
    color: #045d9f;
    text-decoration: none;
}

.mobile_div_info {
	padding-bottom: 5px;
}

.mobile_td_title {
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 15px;
    width: 25%;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    vertical-align: top;
}

.list_text_top {
	vertical-align: top;
}
.widget_filter {
    padding-right: 5px;
    padding-top: 5px;
}


/* ESF Timestamp=2016-07-14Z16:41:23T+0800 ; 20160714-mobile_ui_parent_and_student-UploadBy_matthewmak - e302b6ca29ec2d66fc82ec0ea0fc1e2f */
/* ESF Timestamp=2020-08-25Z20:59:19T+0800 ; 20200825-parent_declaration_update_and_report-UploadBy_matthewmak - f0e32082f88299b197be0c1f69892cc4 */
/* ESF Timestamp=2020-10-30Z12:55:04T+0800 ; 20201030-parent_mobile_menu_and_declaration-UploadBy_matthewmak - ce47237a9a495244f63b112ff9469cd9 */