body, html { height:100% }

/*
 * Bootstrap overrides
 * --------------------
 */
.my-5 { margin-bottom:2rem !important; margin-top:2rem !important }
#side-nav { padding-left:15px !important }
a { color:#2f3a8a }
a:hover { color:#a22f2e }
th, th a { color:#666 }
table {     margin-top: 1rem; }
.table-sm td, .table-sm th { padding:.75rem .3rem; vertical-align:top !important }
.bg-primary { background-color:#2f3a8a !important }
.candidate nav.bg-primary,
.employee nav.bg-primary,
.time nav.bg-primary { background-color:#b02027 !important }
.manager nav.bg-primary { background-color:#555762 !important }
.director nav.bg-primary { background-color:#333 !important }
.executive nav.bg-primary { background-color:#000 !important }
.btn-danger, .btn-primary, .btn-success, .btn-dark, .btn-gray, .btn-lg-gray, .btn-red { color: #fff!important; }
/*#sidebar { padding-top:20px }*/
.nav-link { padding:.75rem 1rem }
.nav-link.nav-parent { 
/*
	border:1px solid #ced4da; 
	background:#e9ecef; 
*/
	margin-top:8px; 
	padding:.5rem 1rem; 
}
.nav-link.nav-parent.active,
.nav-link.nav-parent:hover { background:#fff; border-radius:4px }
.nav-link .fa-caret-down { padding-top:.35rem !important; }
.nav-link .fa,
.nav-link .far,
.nav-link .fas { color:#999 }
.nav-item .nav-item .nav-link { padding-left: 30px; }
.nav-item .nav-item:last-child { border-bottom:1px solid #e9e9e9 }
.btn-primary,
.show > .btn-primary.dropdown-toggle { background-color:#2f3a8a }
.btn-primary:hover,
.show > .btn-primary.dropdown-toggle:hover { background-color:#222a64 }
.btn-dark { background-color:#333 }
.btn-dark:hover { background-color:#161616 }
.btn-gray,
.show > .btn-gray.dropdown-toggle { background-color:#666 }
.btn-gray:hover,
.show > .btn-gray.dropdown-toggle:hover { background-color:#454545 }
.btn-lt-gray { background-color:#999 }
.btn-lt-gray:hover { background-color:#696969 }
.btn-red { background-color:#a22f2e }
.btn-red:hover { background-color:#741e1e }
.custom-control-input:checked~.custom-control-label::before { background-color:#2f3a8a; border-color:#2f3a8a }
.custom-control-input.danger:checked~.custom-control-label::before { background-color:#f00; border-color:#f00 }
.custom-control-input.danger:checked~.custom-control-label { color:#f00 }
.custom-control-input:disabled~.custom-control-label { color:#ccc }
.text-info { color:#bbb!important }
.card-header { background-color: rgba(0,0,0,.09); }
sidebar-offcanvas { height:100% }
.input-group-text { background-color:#ced4da }
.form-control-sm { font-size:.75rem !important }
input.allowance-field,
select.allowance-qty-field { text-align:center }
.alert { margin-top:1rem }
#addrow { border: 1px solid #212529; background: #666666; color:#fff; margin:5px auto 0; }
#addrow:hover, #addrow:focus, #addrow:active { border:1px solid #cfcfcf; background:#efefef; color:#212529; }
input[type=button]#addrow.btn-block { width:75%; }

/*
 * Custom classes
 * --------------------
 */
.logo { max-height: 40px }
.logo-text { font-family: 'Arvo', serif; }
h1.logo-text, h2.logo-text { letter-spacing:-0.05rem }
.green, .green a, a.green { color:#199701 }
.red, .red a, a.red { color:#f00 }
.gray, .gray a, a.gray { color:#999 !important }
.gray a.btn-secondary,
.green a.btn-secondary,
.red a.btn-secondary { color:#fff }
.blue, .blue a, a.blue { color:#2f3a8a }
.lt-gray, .lt-gray a, a.lt-gray { color:#b1b1b1 }
.underline, .underline a, a.underline { text-decoration:underline }
.inactive,
.inactive td,
.inactive td a,
.inactive td a.green,
.inactive a.green,
.inactive td a.red,
.inactive a.red,
.inactive label,
p.inactive a,
a.inactive,
.inactive .input-group-text { color:#999 }
.inactive td .custom-control-input:checked~.custom-control-label::before { background-color:#999; border-color:#999 }
.tpadding15 { padding-top:15px }
.left-border { border-left:1px solid #ced4da }
table.full-width { width:100% }
table.center-row th, table.center-row td { text-align:center }
th.col-scale { width:20% }
th.col-day { width:9% }
th.col-total { width:10% }
th.small { font-weight:700 }
tr.td-time-padding { background-color: rgba(255,100,0,.025); }
.table-striped tbody tr.td-time-padding:nth-of-type(odd) { background-color: rgba(0,0,0,.025) }
tr.td-time-padding td { padding:.35rem .75rem !important; }
.float-r { float:right }
.modal-content.approved-modal { background-color:#e9ecef }
.not-bold, label.not-bold { font-width:400 }
tr.exec-seperator { border-top:2px solid #2f3a8a }
.admin-edits .form-control { color:#28a745 }
.admin-edits .inactive .form-control { color:#495057 }
.admin-edits .form-control:disabled { color:#999 }
.btn-100 { width:100% }
.btn-border { border:1px solid #ccc }
.z1001 {  z-index:1001 }
.pointer { cursor:pointer }
.allowance-field,
.allowance-qty-field { width:50px; margin:0 auto }
.allowance-qty-field { padding:0.25rem; margin-bottom:0.2rem; }

/*
 * Fade In
 * --------------------
 */
 .fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
.fade.in, .modal.fade {
    opacity: 1;
}

/*
 * Custom
 * --------------------
 */
#processing { 
	width:100vw; 
	height:100vw; 
	background-color:rgba(250,250,250,0.85); 
	position:absolute; 
	top:0; 
	left:0; 
	text-align:center; 
	padding-top:30%; 
	z-index:10000 
}
#alt-lbs { display:inline; position:absolute; right:0; top:8px }
#alt-lbs span { color:#b4b3b3; font-size:11px; position:absolute; right:1rem; top:0 }
#pay-period span { font-weight:600; color:#2f3a8a }
h5 span { font-size:1rem; color:#666 }
hr.header { border-top:1px solid rgba(0,0,0,.1); padding-bottom:10px; background-color:#e5e5e5; background-image: linear-gradient(#f2f2f2, #fff); }
hr { border-top:1px solid rgba(0,0,0,.05) }
footer { border-top:1px solid #ccd4da; text-align:center }

/*
 * Form styles
 * --------------------
 */
.form-control { border:1px solid #dfdfdf }
label, .label { font-weight:600; color:#545454 }
.sub label, .sub .label { color:#949494 }
.sub .input-group-text { background-color:#e9ecef; color:#949494 }
label.error { color: red; font-size: .8rem; display: block; margin-top: 5px; font-weight:400 }
input.error { border: 1px dashed red; font-weight: 300; color: red }
#active-checkbox,
#trainee-checkbox { margin-top:.5rem; padding-top:24px }
select.scale-select { min-width:80px }
.help-block { color:#f00; }
.manager select#project,
.director select#project,
.manager select#pay_period,
.director select#pay_period { 
	width:100%;
	/*max-width:220px;*/
}
#form-buttons-absolute { position:absolute; top:-65px; right:0; padding-right:15px; width:100%; z-index:1000 }
#form-buttons-absolute .btn,
/*.form-buttons .btn { margin-left:.5rem }*/
.input-group-sm > .input-group-prepend > .input-group-text { padding:0 .5rem }

@media screen and (max-width: 992px) {

	.row-offcanvas {
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}

	.row-offcanvas-left
	.sidebar-offcanvas {
		left: -33%;
	}

	.row-offcanvas-left.active {
		left: 33%;
		margin-left: -6px;
	}

	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 33%;
		height: 100%;
	}
	
	#alt-lbs { display:none }
}

/*
 * Off Canvas wider at sm breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 34em) {
	.row-offcanvas-left
	.sidebar-offcanvas {
		left: -45%;
	}

	.row-offcanvas-left.active {
		left: 45%;
		margin-left: -6px;
	}

	.sidebar-offcanvas {
		width: 45%;
	}
}

.card {
	overflow:hidden;
}

.card-body .rotate {
	z-index: 8;
	float: right;
	height: 100%;
}

.card-body .rotate i {
	color: rgba(20, 20, 20, 0.15);
	position: absolute;
	left: 0;
	left: auto;
	right: -10px;
	bottom: 0;
	display: block;
	-webkit-transform: rotate(-44deg);
	-moz-transform: rotate(-44deg);
	-o-transform: rotate(-44deg);
	-ms-transform: rotate(-44deg);
	transform: rotate(-44deg);
}


@media (max-width:575px) {
	.left-border { border-left:none; }
	#license_yr_label, .medium_blank, #dob_day_label, #dob_yr_label { display:none }
}

@media (min-width:640px) {
	.modal-dialog.modal-lg { max-width:600px }
}

/*
@media (min-width:768px) {
	#form-buttons-absolute .btn,
	.form-buttons .btn { margin-left:0 !important; margin-right:.5rem }
}
*/

@media (min-width:992px) {
	.modal-dialog.modal-lg { max-width:800px }
	#processing { padding-top:20% }
	#timesheet-buttons { padding-top:3rem !important }
}