@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 rgba(255,255,255, 0.50); */
	padding-top:    0.2em;
	padding-bottom: 1.0em;
	position:relative;
}
.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: 0.7em;
		letter-spacing: 0.13em;
		color:#ccc;
	}

.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;
}

.section-wrapper {
	padding: 0;
    padding-top:1em;
	padding-bottom:1em;
}
.section-wrapper-sm {
	padding: 0;
    padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.section-wrapper-lg {
	padding: 0;
    padding-top:2em;
	padding-bottom:3em;
}
.section-btmpad{
	margin-bottom:0.75em;
}
.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;
}
.section-green-lit {
    background-color: #fafbf9;
	color: #333;
}
	.section-green-lit .table thead th{
		border-bottom: 1px solid #cdcfd2;
		background-color:#efefef;
	}

.title{
	font-size: 2.2em;
    border-left: 0.5em solid #4AAAAD;
    padding-left: 0.5em;
}
.title-1{
	font-size: 1.2em;
    border-left: 0.25em solid #c3d4e5;
    padding-left: 0.5em;
}
.title_sub{
	position: absolute;
	right: 1.0em;
	bottom: 0;
	opacity: 0.6;
	font-size: 0.85em;
}

.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;
	padding: 0.75em;
}
.table-tight{
}
	.table-tight thead th, .table-tight thead td{
		padding-top:0.25em;
		padding-bottom:0.25em;
	}
	.table-tight tbody th, .table-tight tbody 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-hdr{
	border-bottom: 0.05em solid rgba(255,255,255, 0.50);
}
.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;
	
	margin-right: 0;
	margin-left: 0;
	
}

/* Block Styling */
header {
	width: 100%;
	padding-top: 2.5em;
	margin-bottom: 2.5em;
	
}
header .container-fluid{
	padding-top: 1.0em;
	background-color: #4AAAAD;
}

#content {
	min-height:600px;
}
footer{
	background-color: #4AAAAD;
    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: bottom;
	}

	.hdr{
		margin-bottom: 0.6em;
		padding-top: 0.25em;
		padding-bottom: 0.25em;
		border-bottom: 1px solid #dee2e6;
		font-weight: bold;
	}

	.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: #adb3df;
			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;
	}

	.td_tslit{
		font-size:0.7em;
	}
	.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;
	}

.img-handler{
	min-height:10em;
}
	.img-handler .img-input{
		width:100%;
		text-align:center;
	}
	.img-handler .img-input-ctrl{
		width:100%;
		padding-top:4em;
		padding-bottom:4em;
		text-align:center;
	}
	
	.img-handler .img-btn{
		text-align:center;
		display: inline-block;
		font-size:1.5em;
		border: 0.5px solid #dedede;
		height: 3.5em;
		width: 3.5em;
		line-height:3.5em;
		border-radius:3.5em;
		background-color:#efefef;
		cursor:pointer;
	}
	.img-handler .img-btn:hover{
		background-color:#a6a0a0;
		color:#fff;
	}
	
	.img-handler .img-input input[type=file]{
		display:none;
	}
	.img-handler .img-canvas{
		display:none;
	}
	.img-handler .img-input-notion{
		width:100%;
		color:#999;
		font-size:0.75em;
	}
	
	.img-handler .img-preview{
		position:relative;
	}
	.img-handler .img-preview img{
		width: 100%;
	}
	.img-handler .img-preview .img-dismiss{
		position:absolute;
		top:0.25em;
		right:0.25em;
		opacity: 0.6;
		text-align:right;
		cursor: pointer;
	}
	.img-handler .img-preview .img-dismiss:hover{
		opacity: 1.0;
	}
		.img-handler .img-preview .img-dismiss-icon{
			font-size:1.5em;
		}
		.img-handler .img-preview .img-dismiss-msg{
			font-size:0.6em;
			color:#999;
		}

/* =======================   Module Components =========================== */
/* 	Inherits #content */

#nav_subtitle{
	padding-top: 0.5em;
	/* white-space:nowrap; */
	font-size:0.8em;
	color: #efefef;
}
	#welecome_msg{
		opacity: 0.7;
	}
	#btn_logout{
		opacity: 0.5;
		cursor: pointer;
	}
	#btn_logout:hover{
		opacity: 1.0;
	}

.tbl_nav{
	width: auto;
}
	.tbl_nav .navi{
		background-color: #aaa;
		color: #fff;
		
		padding-top:0.45em;
		padding-bottom:0.25em;
		padding-right:1.0em;
		padding-left: 0.8em;
		cursor: pointer;
		border-top-left-radius:  0.4em;
		border-top-right-radius: 0.4em;
		min-width: 6em;
		text-align:center;
		
	}
	.tbl_nav .navi.act{
		background-color: #4b4e4b;
		/* text-decoration: underline; */
		color: #fff;
	}
	.tbl_nav .navi.navi-home{
		min-width:auto;
		background-color:#70758d;
		padding-right:0.4em;
		padding-left: 0.4em;
		border-top-right-radius: 0.5em;
		border-top-left-radius: 0.5em;
	}
	.tbl_nav .navi-sepa{
		min-width: 0.25em;
		
	}
	
.page_home{
}
	.tag {
		min-width:4em;
		display: inline-block;
		border-radius: 0.5em;
		padding: 0.25em;
	}
	.qtr_td_tag{
		padding: 0.3em 0.75em 0.3em 0.75em;
		width: fit-content;
		margin: 0.5em;
		font-weight: bold;
		border-radius: 0.5em;
		font-size: 1.2em;
	}

.page_home{
}
	.tbl_home thead td, .tbl_home thead th,.tbl_home tbody td, .tbl_home tbody th{
		padding-left:0.1em;
		padding-right:0.1em;
	}
	.badge_home{
		padding-top:0.5em;
		padding-bottom:0.5em;
		text-align:center;
		margin-top:1.0em;
		margin-bottom:0.2em;
		
		/* border: 1px solid #dedede;
		background-color:#efefef;
		border-radius: 1em; */
	}
	#pid_disp{
		background-color: #999;
		color: #fff;
		text-align:center;
		padding:0.5em;
	}
		#pid_disp [name=pid]{
			font-size: 2em;
		}
	.btn_home{
		font-size:1.5em;
		font-weight: normal;
		min-width:100%;
	}
		.btn_home a{
			color: inherit;
		}
	.btn_home-sm{
		font-size:1.1em;
		font-weight: normal;
		min-width:100%;
	}

	.btn_a{
		background-color: #646e94;
		color: #fff;
	}
	.btn_b{
		background-color: #646e94;
		color: #fff;
	}
	.btn_c{
		background-color: #628785;
		color: #fff;
	}
	.btn_d{
		background-color: #c77186;
		color: #fff;
	}
	.btn_e{
		background-color: #9f7a43;
		color: #fff;
	}
	.btn_f{
		background-color: #5e8649;
		color: #fff;
	}
	.btn_g{
		background-color: #5e8649;
		color: #fff;
	}
	.btn_h{
		background-color: #5e8649;
		color: #fff;
	}
	.btn_i{
		background-color: #c7718f;
		color: #fff;
	}
	.btn_def{
		background-color: #86a487;
		color: #fff;
	}
	.btn_bl{
		color: #fff;
		background-color: #6aa4c1;
	}
	.btn_bl:hover{
		background-color: #43697c;
	}
	
	.btn-dl{
		color: #fff;
		background-color: #0692c7;
		height: 30px;
		line-height: 15px;
		font-weight:bold;
		border-radius: 6px;
	}
	.btn-dl:hover{
		background-color: #075674;
	}
	
	.btn-xsm{
		font-size:0.9em;
		padding: 0.3em;
	}

	.btn_auth[value="1"]{
		color: #fff;
		background-color: #4e905d;
		border-color: #4e905d;
	}
	.btn_auth[value="1"]:hover{
		color: #fff;
		background-color: #467451;
		border-color: #467451;
	}
	
	.btn_auth[value="0"]{
		color: #fff;
		background-color: #c26262;
		border-color: #c26262;
	}
	.btn_auth[value="0"]:hover{
		color: #fff;
		background-color: #9b4242;
		border-color: #9b4242;
	}
/* QTR */

	.qtrtbl{
	}
	.qtrtbl .hdr{
		font-size:1.1em;
		padding: 1.0em;
		background-color: #666;
		color:#fff;
	}
    .qtrtbl .th, .qtrtbl .thh, .qtrtbl .td{
		/*border: 1px solid #dee2e6;*/
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		box-shadow: 
			0.7px 0.0px 0.0px 0.0px #dee2e6, 
			0.0px 0.7px 0.0px 0.0px #dee2e6, 
			0.7px 0.7px 0.0px 0.0px #dee2e6,
			
			0.7px 0.0px 0.0px 0.0px #dee2e6 inset, 
			0.0px 0.7px 0.0px 0.0px #dee2e6 inset;
	
		padding: 0.75em;
		font-size:1.05em;
	}
	.qtrtbl .th{
		background-color: #f9f9f9;
	}
	.qtrtbl .thh{
		background-color: #f9f9f9;
		font-weight: bold;
	}
	.qtrtbl .td{
		
	}
	.qtrtbl .qh{
		/*border-left:4px solid #82FFB7 !important; */
		box-shadow: 
			0.7px 0.0px 0.0px 0.0px #dee2e6, 
			0.0px 0.7px 0.0px 0.0px #dee2e6, 
			0.7px 0.7px 0.0px 0.0px #dee2e6,
			4.0px 0.0px 0.0px 0.0px #5469a5 inset, 
			0.0px 0.7px 0.0px 0.0px #dee2e6 inset;
	}
	.qtrtbl .qbh{
		/*border-left:4px solid #82FFB7 !important; */
		box-shadow: 
			0.7px 0.0px 0.0px 0.0px #dee2e6, 
			0.0px 0.7px 0.0px 0.0px #dee2e6, 
			0.7px 0.7px 0.0px 0.0px #dee2e6,
			4.0px 0.0px 0.0px 0.0px #80a5bf inset, 
			0.0px 0.7px 0.0px 0.0px #dee2e6 inset;
	}
	
	
	.notion{
		font-size:0.85em;
		text-align:left;
	}
	.dot-sm{
		display: inline-block;
		
		border-radius: 0.7em;
		width:0.7em;
		height:0.7em;
		line-height:0.7em;
	}
	.dot-lg{
		display: inline-block;
		
		border-radius: 4em;
		width:4em;
		height:4em;
		line-height:4em;
	}
	
	.dot-r{
		background-color: #d42f2f;
		color: #fff;
	}
	.dot-y{
		background-color: #f5e233;
		color: #555;
	}
	.dot-g{
		background-color: #76b344;
		color: #fff;
	}
	.tbl_head_wrap{
		margin-top:2.25em;
		margin-bottom:1.5em;
		padding:2em;
		background-color:#f6f6f6;
	}
	.tbl_head{
	}
		.tbl_head td{
			vertical-align:middle;
			font-size: 1.4em;
			padding-left: 0.25em;
			padding-right: 0.25em;
			text-align:center;
		}
	.dot-round-1p0{
		border-radius: 1.0em;
	}
	.dot-round-p50{
		border-radius: 0.5em;
	}
	.dot-round-p25{
		border-radius: 0.25em;
	}
/* Login */
.page_login{
}
	#login_wrap{
		background-color:#f6f6f6;
		border-radius: 0.5em;
		padding: 2em;
		padding-bottom: 1em;
	}
	#tbl_login{
		width: 100%;
		table-layout: fixed;
	}
		#tbl_login th{
			border:none;
			background-color: #4AAAAD;
			color: #efefef;
			
			text-align: center;
			letter-spacing: 0.2em;
			padding-top: 0.75em;
			padding-bottom: 0.75em;
		}
		#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: 100px;
			width: 80%;
		}