@charset "utf-8";

/* Bootstrap Override */
.navbar-brand{
	border-bottom: 0.5px solid #aaa;
	margin-bottom:0.5em;
}
.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;
	}
#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;
	}
.navbar-toggler{
	background-color: rgba(255,255,255,0.25);
}


.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:#f5f7f6;
}
.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;
	}
	.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;
	}
	.tr_gridlock td{
		padding:0px !important;
		border-top: none;
		border-bottom: none;
	}

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

/* Common Styling */
.jumbotron-title{
	font-size:3em;
	font-weight: bold;
	color:#ffffff;
}
.jumbotron-subtitle{
	font-size:1.0em;
	color:#f3f3f3;
}
.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 {
	object-fit: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
	/*opacity: 0.95;*/
}

.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-alvocado {
    background-color: #d1d8bd;
}
.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;
	}

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

.heightened{
	line-height: 1.75em;
}
.hl{
	font-weight:bold;
	text-decoration:underline;
}
.err{
	background-color: #ffeaea;
}
.errmsg{
	color: #cc3333;
	font-size:0.8em;
	font-weight: normal;
}

/* Customized Styling */
.title-0{ /* h2 */
	font-size:1.8em;
	font-weight:bold;
}
.title-1{ /* h4 */
	font-size:1.4em;
	font-weight:bold;
}
.title-2{ /* h6 */
	font-size:1.2em;
	font-weight:bold;
}
.title-3{ 
	font-size:1.0em;
	font-weight:bold;
}

.title-1.xhdr{
	position: relative;
	margin-left: 0.5em;
	
	margin-bottom: 0.6em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid #dee2e6;
	padding-left: 0.25em;
}
.title-1.xhdr::before{
	content: '';
	border-left: 0.5em solid #e9a37f;
	position: absolute;
	height: 90%;
	width: 0em;
	top: 5%;
	left: -0.5em;
}

.title-1.xhdr-lightgreen{
	position: relative;
	margin-left: 0.5em;
	
	margin-bottom: 0.6em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid #dee2e6;
	padding-left: 0.25em;
}
.title-1.xhdr-lightgreen::before{
	content: '';
	border-left: 0.25em solid #e5fa70;
	position: absolute;
	height: 90%;
	width: 0em;
	top: 5%;
	left: -0.5em;
}

.jumbotron-overlay{
	background-color: rgba(255, 255, 255, 0.08);
	padding: 1.5em 2.75em 1.5em 2.75em;
}


.title-2.xhdr{
	position: relative;
	margin-left: 0.5em;
	margin-bottom: 0.6em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid #dee2e6;
	padding-left: 0.25em;
}
.title-2.xhdr::before{
	content: '';
	border-left: 0.25em solid #a9c99e;
	position: absolute;
	height: 90%;
	width: 0em;
	top: 5%;
	left: -0.5em;
}
.title-3.xhdr{
	position: relative;
	margin-left: 0.5em;
	margin-bottom: 0.6em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid #dee2e6;
	padding-left: 0.25em;
}
.title-3.xhdr::before{
	content: '';
	border-left: 0.25em solid #a9c99e;
	position: absolute;
	height: 90%;
	width: 0em;
	top: 5%;
	left: -0.5em;
}

.title-3.hdr-yellow{
	margin-bottom: 0.3em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	border-left: 4px solid #f5e293;
	padding-left: 0.5em;
}

.btn_dl{
	font-size:0.8em;
	color: #888;
}
.btn_dl a:hover{
	color: #333;
}

.phl{
	background-color:#f7efa4;
	padding-left: 0.15em;
	padding-right: 0.15em;
}

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

	border-left: 4px solid #afc4a8;
	padding-left: 0.5em;
}

.carder{
	
	padding-bottom:0.5em;
	text-align:left;
	margin-top:1.0em;
	margin-bottom:0.2em;
	
	border: 1px solid #dedede;
	min-height:300px;
	/* 
	background-color:#efefef;
	border-radius: 1em;
	 */
}
.carder-img img{
	width:100%;
	height: 160px;
}
.carder-title{
	font-size:1.1em;
	font-weight:bold;
	padding:0.5em;
}
.carder-content{
	padding:0.5em;
}

.icarder{
	width:100%;
	position:relative;
	margin-bottom: 1em;
}
.icarder-icon{
	position:absolute;
	left:0;
	right:0;
	border-radius: 3em;
	border: 0.5em solid #fff;
	width:  4.0em;
	height: 4.0em;
	
	background-color:#1f5d5e;
}
	.icarder-seq{
		line-height: 3em;
		text-align:center;
		
	}
	.icarder-seq span{
		font-size: 1.75em;
		font-weight: bold;
		color: #cce1f4;
	}
	.icarder-icon img{
		border-radius: 3em;
		border: 1px solid #efefef;
		width:  3em;
		height: 3em;
	}
.icarder-content{
	margin-left:  2.0em;
	padding-left: 2.5em;
	padding-top:  0.75em;
	padding-bottom: 0.75em;
	padding-right: 1.0em;
	border-left: 1px solid #efefef;
	background-color:#fdfdff;
	border-radius:1em;
}
	.icarder.highred .icarder-icon{
		background-color:#FADEDE;
	}
	.icarder.highred .icarder-content{
		background-color:#b9c6b457;
	}

.iconholder{
	text-align:center;
}
.iconholder-icon{
	
}
	.iconholder-icon img{
		width:4em;
		height:4em;
		border-radius:5em;
	}
.iconholder-content{
	font-size:0.9em;
	color:#666;
}

.border-grey{
	border: 1px solid #dedede;
}
.border-green{
	border: 1px solid #d5e9d5;
}

.medimg{
	width:100%;
	background-color:#f0f5ea;
}
	.medimg img{
		width:100%;
	}

.navholder{
	text-align:center;
	
	border: 5px solid #b1bdb8;
	width: 100%;
	
	border-radius: 4em;
	margin: 0.5em;
	background-color:#455951;
	color:#fff;
	font-size:0.9em;
	padding-top:0.75em;
	padding-bottom:0.75em;
}
	.navholder-content{
		letter-spacing:0.05em;
		
	}
.mb-050{
	margin-bottom:0.5em;
}
.mb-075{
	margin-bottom:0.75em;
}

.btn_videos{
	margin-top:0.5em;
	font-size:0.8em;
}

/* OPD Education */

.opd-slide{
	width:100%;
}

.opd-nav{
	color:#aaa;
	margin-top:0.15em;
	margin-bottom:0.15em;
	display: inline-block;
}
.opd-nav.active{
	color:#fff;
}
.opd-nav:hover{
	color:#fff;
}
.opd-inav{
	text-align:center;
	
	border: 3px solid #b1bdb8;
	width: 100%;
	
	border-radius: 1em;
	margin: 0.1em;
	background-color:#455951;
	color:#fff;
	padding-top:0.25em;
	padding-bottom:0.25em;
}
.opd-inav:hover{
	text-decoration:none;
}
.opd-inav-top{
	font-size:0.75em;
	font-weight:normal;
	color:#ccc;
	float:right;
}
.opd-inav-top a{
	color:#ccc;
}

/* Timeline */
/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	background-color:#d0d0c0;
	/*background: linear-gradient(180deg, rgba(250,250,250,1) 30%, rgba(210,221,210,1) 59%);*/
	/*background-image: linear-gradient(to bottom, #cdba8d, #cfb985, #d2b97e, #d4b876, #d6b76e);*/
	padding-top:1.5em;
	padding-bottom:1.5em;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color:#e8c17e;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

/* Container around content */
.timeline-container {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
}

/* The circles on the timeline */
.timeline-container::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -12px;
	background-color: #d37454;
	border: 4px solid #f4c573;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* Place the container to the left */
.timeline-left {
	left: 0;
}

/* Place the container to the right */
.timeline-right {
	left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline-right::after {
	left: -12px;
}

/* The actual content */
.timeline-content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width containers */
	.timeline-container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.timeline-container::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.timeline-left::after, .timeline-right::after {
		left: 15px;
	}

	/* Make all right containers behave like the left ones */
	.timeline-right {
		left: 0%;
	}
}

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

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


/* Plugin Module Styling */
.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);
}

.modal-dialog{
	font-size:0.95em;
}
	.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: #a9c99e;
			text-align:center;
		}
		.modal-dialog .modal-header .modal-title{
			border-left: 4px solid #eee;
			padding-left: 0.75em;
		}
	.modal-dialog .hdrform{
		font-size: 1.1em;
		padding: 0.75em;
		background-color: #666;
		color: #fff;
		position:relative;
	}
	.modal-dialog .sepa{
		height: 0.5em;
	}
	.modal-dialog .ctrl {
		text-align: center;
		margin-top: 1em;
		border-top: 1px solid #efefef;
		padding-top: 1em;
	}