@charset "utf-8";

small{
	color: #999;
}

/* Bootstrap Override */
.navbar-brand{
	
}
.nav-item{
	padding-right:2em;
	font-size: 1.1em;
}
	.navbar-nav{
		flex-wrap: wrap;
	}
	.navbar-nav >.nav-item .nav-link:hover{
		color: rgba(255,255,255, 0.80)
	}
	.navbar-nav >.nav-item .nav-link{
		color: rgba(255,255,255, 0.65)
	}
	.navbar-nav > .nav-item.active .nav-link{
		color: rgba(255,255,255, 1.0);
	}
	
.nav_wrapper{
	border-bottom: 0.05em solid #5773b2;
	padding-bottom: 0.6em;
}
.navbar-custom{
    transition: color 0.2s;
}
	.nav-logo-sub{
		padding-top:0.5em;
		font-weight: normal;
		color: rgba(255,255,255, 0.95);
		font-size: 1.6em;
		letter-spacing: 0.13em;
	}

.hdr_title{
	font-size:0.85em;
	color: rgba(255,255,255, 0.75);
	padding: 0.15em;
}
.hdr_subtitle{
	font-size:1.2em;
	color: rgba(255,255,255, 0.95);
	padding: 0.15em;
}

.datepicker {
	font-size: inherit;
	padding: 0.75em;
	color: #333;
}
.datepicker .today{
	background-color:#efefef;
}
.datepicker .today:hover{
	background-color:#dedede;
}
.datepicker thead{
	border-bottom: 0.5px solid #ddd;
	margin-bottom: 1em;
}
.datepicker table tr td.old, .datepicker table tr td.new{
	opacity:0.6;
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover{
	opacity:0.3;
}
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active{
	background-color: #5d795f;
	border-color: #303e31;
}
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active{
	background-color: #5d795f;
	border-color: #303e31;
}
.datepicker table tr td.active:active:hover, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active:active:focus, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active:active.focus, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.active.focus, .datepicker table tr td.active.highlighted.active.focus{
	background-color: #485849;
	border-color: #262e27;
}

.clockpicker-popover .popover-title{
	font-size:1.4em;
}
.clockpicker-popover .popover-title {
	padding-top:0.3em;
	padding-bottom:0.3em;
}
.clockpicker-tick {
	font-size:0.9em;
}
.clockpicker-tick:hover {
	background-color: rgb(182, 221, 185);
	background-color: rgba(93, 121, 95, .25);
}


/* Common Styling */

.jumbotron-title{
	font-size:3em;
	font-weight: bold;
	color:#666;
}
.jumbotron-subtitle{
	font-size:1.2em;
	color:#333;
}
.jumbotron-context{
	color:#dedede;
	
}
.jumbotroner {
    background-color: #edf8fa;
    margin-bottom: 0px;
    height: 70vh;
    display: flex;
    align-items: center;
	min-height:600px;
	color:#eee;
}
.jumbo-bg-image {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
	
	opacity: 0.9;
}
.badge-card-wrap{
	padding:1em;
	
}
.badge-card{
	border: 0.5px solid #efefef;
	font-size:0.85em;
	padding:1em 1.5em 1em 1.5em;

	background-color:#fefefe;
	box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2);
}
.badge-card .bctitle{
	margin-bottom: 0.5em;
	min-height:8em;
}
.badge-card .bctitle a{
	color:inherit;
	font-style:italic;
}
.badge-card .bctitle a:hover{
	color:#666;
}

.section-wrapper {
	padding: 0;
    padding-top:1em;
	padding-bottom:1em;
}
.section-wrapper-sm {
	padding: 0;
    padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.section-light {
    background-color: #fff;
}
.section-transparent {
    background-color: transparent !important;
}
.section-dark {
    background-color: #455073;
	color: #fff;
}
	.section-dark > p{
		color:#343a40;
	}
.section-gradient-blue {
    background-image: linear-gradient(120deg, #6981c9, #004c97 100%);
	color: #efefef;
}
	.section-gradient-blue > p{
		color:#343a40;
	}
.section-gradient-blue-lit {
    background-image: linear-gradient(120deg, #ffffff, #e7f3ff 100%);
	color: #444;
}
.section-gradient-green {
    background-image: linear-gradient(120deg, #cae2cb, #82bd84 100%);
	color: #444;
}

.section-gradient-green-lit {
    background-image: linear-gradient(120deg, #ffffff, #f0fbf1 100%);
	color: #444;
}

.tr_gridlock td{
	padding:0px !important;
	border-top: none;
	border-bottom: none;
}
.grey-text{
	color: #5f6973;
	text-align:justify;
	font-size:0.95em;
	letter-spacing:0.025em;
}
.grey-text-sm{
	color: #5f6973;
	text-align:justify;
	font-size:0.85em;
	letter-spacing:0.025em;
}
.grey-text-xsm{
	color: #959ea7;
	text-align:justify;
	font-size:0.70em;
	letter-spacing:0.025em;
}
.homeimg {
	margin-bottom: 0.8em;
	margin-top: 1.2em;
}
.heightened{
	line-height: 1.75em;
}
.hl{
	font-weight:bold;
	text-decoration:underline;
}
.table{
	margin-bottom: 0em;
	page-break-inside:auto;
}
.table tr{
	page-break-inside:avoid;
	page-break-after:auto;
}
.table thead th{
	border-bottom: 1px solid #cdcfd2;
	background-color:#fafafa;
}
.table thead th,.table thead td, .table tbody th, .table tbody td{
	vertical-align: middle;
}
.table-tight{
}
	.table-tight th, .table-tight td{
		padding-top:0.2em;
		padding-bottom:0.2em;
	}

.err_msg{
	font-size:0.85em;
	color:#cc0033;
}
.row{
	/*
	padding-bottom: 1em;
	*/
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.row-borded-btm{
	 border-bottom:1px solid #999;
}
	.row-borded-btm-lit{
		 border-bottom:1px solid #ddd;
	}

.row-tight{
	padding-top: 0em;
	padding-bottom: 0em;
}
/* Block Styling */
header {
	width: 100%;
	padding-top: 2.5em;
	margin-bottom: 2.5em;
	
}

header .container-fluid{
	padding-top: 1.0em;
	background-color: #3e557c;
}

#content {
	min-height:600px;
}

footer{
	background-color: #3e557c;
    position: relative;
	padding-top:1em;
	padding-bottom:1em;
}
	.footer-links-list {
		padding: 0px;
		list-style: none;
	}
	.footer-links {
		font-size: 0.9em;
		line-height: 2em;
		color: #bbb;
	}
	.footer-signature{
		font-size:0.8em;
		color: #efefef;
		display:inline-block;
		vertical-align: -0.8em;
	}

/* =======================   Module Components =========================== */

/* =============================== */

#login_wrap{
	background-color:#f6f8fb;
	border-radius: 1em;
	padding: 2em;
	padding-bottom: 1em;
}
#tbl_login{
	width: 100%;
	table-layout: fixed;
}
	#tbl_login th{
		border:none;
		background-color: #3e557c;
		color: #efefef;
		font-size: 1.0em;
		text-align: center;
		letter-spacing: 0.2em;
		padding-top: 1.0em;
		padding-bottom: 1.0em;
	}
	#tbl_login td{
		border:none;
	}
	#tbl_login input{
		font-size:1em;
	}
	#tbl_login #msg{
		color:#ff2222;
		font-size:0.8em;
		text-align:center;
	}
	#tbl_login button{
		min-width: 140px;
	}
/* =============================== */
/*
	Inherits #content
*/
	.page_report{
		
	}
		.page_report table{
			font-size: 0.9em;
		}
			.page_report #tbl_view th{
				
				vertical-align: middle;
			}
			.page_report #tbl_view td{
				
			}
		.tag_std{
			background-color: #5cbf88;
			text-align:center;
			color:#fff;
			font-size: 0.9em;
			border-radius: 0.25em;
			padding: 0.2em;
			
		}
		.tag_fl{
			background-color: #c79e92;
			text-align:center;
			color:#fff;
			font-size: 0.9em;
			border-radius: 0.25em;
			padding: 0.2em;
		}
		.tag_prepost{
			background-color: #f2935d;
			text-align:center;
			color:#fff;
			font-size: 0.9em;
			border-radius: 0.25em;
			padding: 0.2em;
		}
	
	.hdr{
		margin-bottom: 0.6em;
		padding-top: 0.25em;
		padding-bottom: 0.25em;
		border-bottom: 1px solid #dee2e6;
		font-weight: bold;
	}
	
		.auth_stat_0{
			color:#de4e7f;
			font-size: 1.3em;
		}
		.auth_stat_1{
			color:#4caf50;
			font-size: 1.3em;
		}
	
	.modal-dialog{
		font-size:0.9em;
	}
	.modal-dialog.modal-dialog-70p{
		min-width: 70% !important;
	}
	.modal-dialog.modal-dialog-60p{
		min-width: 60% !important;
	}
	.modal-dialog.modal-dialog-50p{
		min-width: 50% !important;
	}
	.modal-dialog.modal-dialog-40p{
		min-width: 40% !important;
	}
		.modal-dialog .modal-header{
			background-color: #c7cfef;
			text-align:center;
		}
	
	.chart_wrap{
		position: relative;
	}
		.doughnut_disp{
			position: absolute;
			font-size:3em;
		}
	
	
	.chart-tooltip-series{
		color: #666;
		border: 1px solid #ddd;
		border-radius: 5px;
		background-color: #fff;
		opacity: 0.7;
	}
		.chart-tooltip-series td, .chart-tooltip-series th{
			padding:3px;
		}
	.chartjs-tooltips{
		opacity: 0;
		position: absolute;
		top:0;
		left:0;
	}

	.loader{
		width:100%;
		text-align:center;
		padding-top:2.5em;
		padding-bottom:2.5em;
	}

	.btn_rmv{
		opacity: 0.4;
		cursor: pointer;
	}
	.btn_rmv:hover{
		opacity: 0.8;
		
	}

	.err{
		background-color: #ffeaea;
	}
	.errmsg{
		color: #cc3333;
		font-size:0.8em;
		font-weight: normal;
	}

	.page_direct{
		
	}
		#profile{
		}
			#tbl_profile td{
				position:relative;
			}
			.profile_gender_m {
				display: inline-block;
				background-color: #698bbd;
				padding: 0.3em;
				border-radius: 0.3em;
				color: #fff;
				font-size: 0.85em;
				min-width: 54px;
			}
			.profile_gender_f {
				display: inline-block;
				background-color: #86a085;
				padding: 0.3em;
				border-radius: 0.3em;
				color: #fff;
				font-size: 0.85em;
				min-width: 54px;
			}
			.profile_mgnt_corner{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 1.5em 1.5em 0;
				border-color: transparent #e8d451 transparent transparent;
				position:absolute;
				top:1px;
				right:1px;
				color:#888;
				cursor:pointer;
			}
			.profile_mgnt_corner:hover{
				border-color: transparent #f7f0c2 transparent transparent;
				color:#666;
			}
				.profile_mgnt_corner_content{
					right: -2.2em;
					top: -0.2em;
					font-size: 0.6em;
					position: absolute;
					
				}
		#session{
		}
			#tbl_sessionp td{
				position:relative;
			}
			#session_chart{
				border: 1px solid #efefef;
				margin-bottom: 0.75em;
			}
			
			#session_chart [name=nochart]{
				text-align:center;
				padding-top: 1.5em;
				padding-bottom: 1.5em;
			}
			#chart_hori_wrap{
				padding: 2em;
			}
			#session_ctrl{
				text-align:right;
				padding-top:1.0em;
				padding-bottom:0.5em;
			}
			.session_ctrls a{
				font-size:0.7em;
				color:#aaa !important;
				
			}
			.session_ctrls a:hover{
				color:#000 !important;
			}
		
		.td_tslit{
			font-size:0.7em;
		}
		.test_type_std{
			display: inline-block;
			background-color: #86a085;
			padding: 0.3em;
			border-radius: 0.3em;
			color: #fff;
			font-size:0.8em;
			min-width:65px;
		}
		.test_type_fl{
			display: inline-block;
			background-color: #698bbd;
			padding: 0.3em;
			border-radius: 0.3em;
			color: #fff;
			font-size:0.8em;
			min-width:65px;
		}
		.test_type_pp{
			display: inline-block;
			background-color: #f2935d;
			padding: 0.3em;
			border-radius: 0.3em;
			color: #fff;
			font-size:0.8em;
			min-width:65px;
		}
		
		.test_grade{
			display: inline-block;
			border-radius: 1em;
			width: 1.8em;
			line-height: 1.8em;
			color: #333;
		}
			.test_grade.tga{
				background-color: #bcddbb;
			}
			.test_grade.tgb{
				background-color: #dbeede;
			}
			.test_grade.tgc{
				background-color: #f6ebb7;
			}
			.test_grade.tgd{
				background-color: #ecdbec;
			}
			.test_grade.tge{
				background-color: #f9d5c8;
			}
			.test_grade.tgf{
				background-color: #f79c8c;
			}
		
		.tbl_tests{
			font-size:0.85em;
		}
			.tbl_tests th, .tbl_tests td{
				padding: 0.5em;
			}
			.tbl_tests th:nth-child(1){
				text-align:left;
			}
			
		.best_test{
			font-size: 0.5em;
			padding: 0.25em;
			background-color: #f9f963;
			border-radius: 0.3em;
			display: inline-block;
			margin-left: 0.4em;
			color: #666;
			line-height: 0.5em;
			font-weight: normal;
		}
		
		.tdhl{
			font-size: 1.1em;
			font-weight: bold;
		}
		.tdlit{
			font-size: 0.85em;
			font-weight: normal;
			color:#444;
		}
		.tdlit_time{
			font-size:0.7em;
			color:#444;
		}
	.modal .ctrl{
		width: 100%;
		text-align: right;
		position: absolute;
		top: 0.75em;
		right: 1.00em;
	}
	
	#nav_subtitle{
		white-space: nowrap;
		text-align:right;
		font-size:0.8em;
		color: #fff;
	}
		#welecome_msg{
			opacity: 0.5;
		}
		#btn_logout{
			opacity: 0.3;
			cursor: pointer;
		}
		#btn_logout:hover{
			opacity: 0.8;
		}
	.tr_modal_prepost_itm[ischecked=true] td{
		font-weight:bold;
	}
	
	.sidebar-btn{
		display: table;
		height: 100%;
		left: 0px;
		top: 0px;
		
		position: absolute;
		vertical-align: middle;
		background-color: #b1baca;
	}
	.sidebar-btn:hover{
		background-color: #7b91b6;
	}
	.sidebar-icon{
		font-size:7px;
		display: table-cell;
		vertical-align:middle;
		color:#fff;
	}
	.sidebar-content{
		width: 100px;
		left: -100px;
		height: 100%;
		position: absolute;
		top: 0;
		font-size: 0.7em;
		color:#888;
		padding:0.5em;
		background-color: #fafafa;
		border: 0.5px solid #dee2e6;
		line-height:1.6em;
		text-align:left;
	}
	.sidebar-content a:hover{
		color:#333 !important;
	}
/* Print */
	@print {
		size: A4 portrait;
		margin: 0;
	}
	
	body.print_body{
		width:210mm;
		height:297mm;
		font-size:8.0pt;
		/* font-family: 'Calibri', 'Arial', 'Noto Sanc TC' */
	}
	.print_title{
		/* padding-top:1.25em; */
		padding-bottom:0.25em;
		border-bottom: 1px solid #aaa;
		margin-bottom: 0.1em;
		position:relative;
		
	}
	.print_title .main{
		font-size:20pt;
		font-weight:normal;
		/* font-family: '標楷體', 'Noto Sans TC'; */
		display: inline-block;
		line-height:1.1em;
	}
	.print_title .sub{
		font-size:0.9em;
		color:#888;
		font-weight:light;
		display: inline-block;
	}
	
	.print_body .hdr{
		font-size:1.0em;
		page-break-before:auto;
		margin-top:0.35em;
		margin-bottom:0.15em;
	}
	.print_body .tbl_tests th, .print_body .tbl_tests td{
		padding-top:0.99px;
		padding-bottom:0.99px;
		font-size: 0.9em;
		border-width: 0.5px;
	}
	.print_comment{
		height:7em;
		border:0.5px solid #ddd;
		position:relative;
		font-size:0.8em;
		padding: 0.5em;
	}
	.print_signbox{
		height:auto;
		width:auto;
		position:absolute;
		bottom:0.5em;
		left:0.5em;
		page-break-before:auto;
		font-size:0.75em;
	}
		.print_signbox .print_signer{
			border-bottom:0.5px solid #999;
			min-width:180px;
			color:#aaa;
			padding-left: 0.5em;
		}
	
	.print_techbox{
		height:auto;
		width:auto;
		position:absolute;
		bottom:0.5em;
		right:0.5em;
		page-break-before:auto;
		font-size:0.75em;
	}
	
	.print_cert{
		font-size:0.65em;
		margin-top:0.5em;
		color:#666;
		margin-bottom:0.5em;
	}
	.print_footnote{
		border-top:1px solid #ddd;
		margin-top:2em;
		font-size:0.5em;
		padding-left:0.2em;
		padding-right:0.2em;
		padding-top:0.5em;
		padding-bottom:0.5em;
		background-color:#f6f6f6;
		color:#999;
		position:relative;
	}	
	.print_footnote .logo{
		float:right;
		text-align:right;
		padding-right: 0.2em;
	}