input[readonly],
textarea[readonly] {
	background-color: #ddd;
}

option {
	background-color: #CCCCCC;
}

textarea {
	width: 90%;
}

.btn[disabled] {
	background-color: #808080;
	border-color: #808080;
}

.btn.disabled {
	pointer-events: none;
}

thead input {
	color: #444444;
	margin: 0.5em 0;
	width: 100%;
}

thead input.search_init {
	color: #999999;
}

html {
	margin: 0;
	padding: 0;
}

body {
	color: #666666;
}

h3 {
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0;
	color: #7D775C;
}

acronym {
	border-bottom: none;
}

label {
	font-weight: bold;
}

.btn {
	line-height: inherit;
}

select {
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	width: 120px;
}

small {
	font-size: 85%;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

cite {
	font-style: normal;
}

.text-warning {
	color: #c09853;
}

a.text-warning {
	color: #a47e3c;
}

.text-error {
	color: #b94a48;
}

a.text-error {
	color: #953b39;
}

.text-info {
	color: #3a87ad;
}

a.text-info {
	color: #2d6987;
}

.text-success {
	color: #468847;
}

a.text-success {
	color: #356635;
}

[class*="span"] {
	margin-left: 15px;
}

a i {
	color: #000000
}

li .disabled {
	background-color: #FFFFFF;
}

.dataTables_wrapper label {
	font-weight: normal;
	font-size: auto;
}

body {
	background-color: #c7d8df;
}

table thead tr,
table.dataTable table thead tr {
	background-color: #125f97;
	color: #FFFFFF;
}

table table.table-sm th,
table table.table-sm td {
	padding: .3rem;
}

table tbody tr {
	color: #000;
}

table tbody thead tr {
	color: #fff;
}

table tr.small-header {
	table-layout: fixed;
	line-height: 1;
	font-size: 9px;
	font-weight: normal;
	width: 100%;
	text-align: center;
}

.table-striped tbody>tr:nth-child(odd)>td,
.table-striped tbody>tr:nth-child(odd)>th {
	background-color: #f9f9f9;
}

.table-striped tbody>tr:nth-child(even)>td,
.table-striped tbody>tr:nth-child(even)>th {
	background-color: rgb(211, 214, 255);
}

.scrollBody {
	height: 100px;
	overflow: auto;
}

img {
	max-width: 100%;
	max-height: 100%;
}

.form-group.plaintext .input-group-text {
	background-color: transparent;
	border: none;
}

.form-group.plaintext .input-group-prepend>.input-group-text {
	padding-right: 0;
}

.form-group.plaintext .input-group-append>.input-group-text {
	padding-left: 0;
}

.bg-light {
	background-color: white !important;
}

.appContent {
	margin-top: 100px;
}

@media screen and (min-width: 768px) {
	.appContent {
		margin-top: 140px;
	}
}

td input.form-control,
td select.form-control,
td textarea.form-control,
td input.form-control-plaintext,
td select.form-control-plaintext,
td textarea.form-control-plaintext {
	width: auto;
}

td textarea.form-control.form-control-sm,
td textarea.form-control-plaintext.form-control-sm {
	height: calc(1.8125rem + 2px);
}

select.form-control-plaintext {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

/* .form-control-plaintext is specified twice to make this selector more specific than Bootstrap's .form-control[readonly] */
.form-control.form-control-plaintext.form-control-plaintext {
	background-color: transparent;
}

select.form-control-plaintext::-ms-expand {
	display: none;
}

td .form-group {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.modal-xl {
		max-width: 942px;
	}
}

@media (min-width: 1200px) {
	.modal-xl {
		max-width: 1150px;
	}
}

.wrapped-pre {
	white-space: pre-wrap;
}

.lh-1 {
	line-height: 1;
}

table .dataTables_wrapper {
	box-sizing: border-box;
}

table.dataTable .minimal-padding {
	padding: 10px 4px;
}

.formatted-hours {
	font-size: 14px;
	text-align: right;
	padding-right: 6px;
}

.dates-row th {
	border: 1px solid black;
	background-color: #888;
	color: #FFFFFF;
}

.totals-row {
	background-color: #444;
	color: #FFFFFF;
}

.totals-row td {
	border: 1px solid white;
}

.el-trash {
	color: #C44;
}

#contract_block td input,
#contract_block td select {
	font-size: 14px;
}

.form-error {
	border: 2px;
	border-color: red;
	border-style: solid;
}

@media all and (min-width:576px) {
	.col-sm-1-over-7 {
		-ms-flex: 0 0 14.285714%;
		flex: 0 0 14.285714%;
		max-width: 14.285714%
	}
}

@media (min-width: 1200px) {
	.col-xl-10-percent {
		flex: 0 0 10%;
		max-width: 10%;
	}

	.col-xl-90-percent {
		flex: 0 0 90%;
		max-width: 90%;
	}
}

table.dataTable .dropdown-menu {
	box-sizing: border-box;
}

.compact-table {
	font-size: 0.6875rem;
}

.compact-table .form-control.form-control-plaintext {
	width: auto;
}

.compact-table .form-control {
	width: 6rem;
	font-size: 0.6875rem;
}

.paycert-divider {
	height: 3px;
	border-top: 2px solid;
	box-shadow: 0 1px 0;
}

.pay-cert-table {
	text-align: right;
	border-collapse: separate;
	border-spacing: .25rem;
}

.text-larger {
	font-size: 1.3333rem;
}

.navbar-light .navbar-nav .nav-link.login-link {
	font-size: 14px;
	color: black;
}

.help-block {
	margin-bottom: 1.5rem;
}

.help-block::after {
	display: block;
	clear: both;
	content: "";
}

.help-image {
	float: right;
	margin-left: 0.5rem;
	box-shadow: 5px 5px 5px #888888;
	max-width: 70%;
}

.dataTable.no-footer {
	border-bottom: 1px solid #111111;
}

table.dataTable tr.dtrg-group td {
	border-right-color: white;
}

.work-level-2 {
	background-color: #555555;
	color: #ffffff;
}

.work-level-3 {
	background-color: #666666;
	color: #ffffff;
}

.indent-work-level-3::before {
	content: "";
	padding-left: 0.4rem;
}

.work-level-4 {
	background-color: #777777;
	color: #ffffff;
}

.indent-work-level-4::before {
	content: "";
	padding-left: 0.8rem;
}

.work-level-5 {
	background-color: #888888;
	color: #ffffff;
}

.indent-work-level-5::before {
	content: "";
	padding-left: 1.2rem;
}

.work-level-6 {
	background-color: #999999;
	color: #ffffff;
}

.indent-work-level-6::before {
	content: "";
	padding-left: 1.6rem;
}

.work-level-7 {
	background-color: #aaaaaa;
	color: #000000;
}

.indent-work-level-7::before {
	content: "";
	padding-left: 2rem;
}

.work-level-8 {
	background-color: #bbbbbb;
	color: #000000;
}

.indent-work-level-8::before {
	content: "";
	padding-left: 2.4rem;
}

.work-level-9 {
	background-color: #cccccc;
	color: #000000;
}

.indent-work-level-9::before {
	content: "";
	padding-left: 2.8rem;
}

.work-level-10 {
	background-color: #dddddd;
	color: #000000;
}

.indent-work-level-10::before {
	content: "";
	padding-left: 3.2rem;
}

.work-level-11 {
	background-color: #eeeeee;
	color: #000000;
}

.indent-work-level-11::before {
	content: "";
	padding-left: 3.6rem;
}

table.dataTable .bottom-line {
	border-bottom: 1px solid #000000;
}

.report-logo {
	max-height: 75px;
}

.form-row.separator {
	border-bottom: 1px solid #dee2e6;
}

.form-row.separator.form-group {
	padding-bottom: 0.25rem;
	margin-bottom: 0.25rem;
}

@media (max-width: 767.98px) {
	.mobile-scroll-header {
		max-height: 100vh;
		overflow-y: auto;
	}
}

select.form-control-sm+.select2-container--bootstrap4 .select2-selection {
	height: calc(1.8125rem + 2px) !important;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .2rem;
}

select.form-control-sm+.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	padding-left: .5rem;
	line-height: 1.8125rem;
}

.overflow-wrap-anywhere {
	overflow-wrap: anywhere;
}

/* Based on responsive table code from CSS-tricks https://css-tricks.com/responsive-data-tables/ */
@media (max-width: 767.98px) {

	table.mobile-table,
	.mobile-table thead,
	.mobile-table tbody,
	.mobile-table th,
	.mobile-table tr {
		display: block;
	}

	.mobile-table td {
		display: flex;
		flex-direction: column;
	}

	/* Hide headers using bootstrap sr-only method */
	.mobile-table thead tr {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0
	}

	.mobile-table tr {
		margin-bottom: 1rem;
	}

	.mobile-table td:before {
		width: 100%;
		content: attr(data-label);
		font-weight: bold;
		font-size: .875rem;
		line-height: 1.5;
		padding-bottom: calc(.25rem + 1px);
		color: #666666;
	}

	.mobile-table label.sr-only {
		display: none;
	}

	.mobile-table .form-check-input {
		position: static;
	}
}

@media (max-width: 991.98px) {

	table.mobile-table-md,
	.mobile-table-md thead,
	.mobile-table-md tbody,
	.mobile-table-md th,
	.mobile-table-md tr {
		display: block;
	}

	.mobile-table-md td {
		display: flex;
		flex-direction: column;
	}

	/* Hide headers using bootstrap sr-only method */
	.mobile-table-md thead tr {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0
	}

	.mobile-table-md tr {
		margin-bottom: 1rem;
	}

	.mobile-table-md td:before {
		width: 100%;
		content: attr(data-label);
		font-weight: bold;
		font-size: .875rem;
		line-height: 1.5;
		padding-bottom: calc(.25rem + 1px);
		color: #666666;
	}

	.mobile-table-md label.sr-only {
		display: none;
	}

	.mobile-table-md .form-check-input {
		position: static;
	}
}

@media (max-width: 575.98px) {

	.dataTables_paginate .pagination .page-item.previous,
	.dataTables_paginate .pagination .page-item.next {
		display: none;
	}
}

[data-toggle="collapse"].more-less-toggle .more-less-text {
	display: none;
}

[data-toggle="collapse"].collapsed.more-less-toggle:after {
	content: "More...";
}

[data-toggle="collapse"]:not(.collapsed).more-less-toggle:after {
	content: "Less...";
}

/* Timesheet pieces */
.timesheet-row {
	display: flex;
}

.time-section {
	display: flex;
	flex-wrap: wrap;
}

.timesheet-heading {
	border: 1px solid black;
	background-color: #888;
	color: #FFFFFF;
	text-align: center;
	line-height: 1;
	font-size: 9px;
	font-weight: bold;
	padding-top: 1px;
	padding-bottom: 1px;
}

.timesheet-cell {
	display: flex;
	flex-direction: column;
}

.timesheet-foot {
	color: #FFFFFF;
}

.wbs-dropdown select:hover {
	position: relative;
	width: auto;
	min-width: 100%;
}

/* Modifiers to timesheet pieces */

/* Hide deleted rows */
.timesheet-row.deleted-row {
	display: none;
}

/* Footer cells get border */
.timesheet-foot .timesheet-cell {
	border: 1px white solid;
}

/* Footer cells and time-section get dark background */
.timesheet-foot .time-section,
.timesheet-foot .timesheet-cell {
	background-color: #444;
}

/* Body cells and time-section get light background */
.timesheet-body .timesheet-cell,
.timesheet-body .time-section {
	background-color: #FFFFFF;
}

/* Cell contents */

/* Padding for cell content */
.timesheet-cell .timesheet-content {
	padding: 1px;
}

/* Reduced padding for text inputs in cell content */
.timesheet-cell .timesheet-content input[type="text"] {
	padding: 1px 2px;
}

/* Trash icon in delete button is red */
.timesheet-cell.delete-button .el-trash {
	color: #FF0000;
}

/* Hidden content button to get proper width sizing for delete-button cell outside of body */
.timesheet-table> :not(.timesheet-body) .timesheet-cell.delete-button .timesheet-content {
	height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	visibility: hidden;
}

/* Footer delete-button hidden content needs negative margins to offset border width */
.timesheet-foot .timesheet-cell.delete-button .timesheet-content {
	margin-left: -1px;
	margin-right: -1px;
}

/* Vertically center delete-button content in body */
.timesheet-body .timesheet-cell.delete-button .timesheet-content {
	margin-top: auto;
	margin-bottom: auto;
}

/* Timesheet history */
.history-container {
	width: 100%;
}

.history-block {
	line-height: 1;
	font-size: 9px;
	font-weight: normal;
	width: 100%;
	color: #a00;
}

.history-entry {
	text-align: center;
	padding: 1px;
}

/* Timesheet responsive media queries */
/* size xl */
@media (min-width: 1200px) {
	.history-block {
		text-align: right;
	}

	.history-entry {
		display: inline-block;
	}
}

/* size lg and xl */
@media (min-width: 992px) {

	/* Limit time-section to width of 9 time-columns (most that will fit) */
	.time-section {
		max-width: 522px;
	}

	/*
	Hide the following headings:
		* The 10th or greater time-column headings in the timesheet-head when the table has rows
		* The 9th or less time-column headings in the first row in the timesheet-body when there are more than 9 time entry boxes
		* The delete-button heading in the first row in the timesheet-body when there are more than 9 time entry boxes
		* All headings outside of the timesheet-head when there are 9 or less time entry boxes
	*/
	.timesheet-table:not(.no-rows) .timesheet-head .timesheet-cell.time-column:nth-of-type(n + 10),
	.timesheet-table.wrap-lg .timesheet-body .timesheet-row:first-child .timesheet-cell.time-column:nth-of-type(-n + 9) .timesheet-heading,
	.timesheet-table.wrap-lg .timesheet-body .timesheet-row:first-child .timesheet-cell.delete-button .timesheet-heading,
	.timesheet-table:not(.wrap-lg)> :not(.timesheet-head) .timesheet-heading {
		display: none;
	}
}

/* size lg and below */
@media (max-width: 1199.98px) {
	.history-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 1rem;
	}

	.history-block {
		width: auto;
		margin: 4px;
	}

	.history-container::before {
		width: 100%;
		content: "Status History";
		margin-left: 4px;
	}
}

/* Non-mobile (size md+) */
@media (min-width: 768px) {

	/* Header cells and time-section get light background to match body (visible when wrapped header with no rows) */
	.timesheet-head .timesheet-cell,
	.timesheet-head .time-section {
		background-color: #FFFFFF;
	}

	/* work-dropdown cell is 120px wide when in table format */
	.timesheet-cell.work-dropdown {
		width: 120px;
	}

	/* pay-type cell is 100px wide when in table format */
	.timesheet-cell.pay-type {
		width: 100px;
	}

	/*
	Hide the following headings:
		* Headings outside of the timesheet-head that are not time-column or delete-button headings
	*/
	.timesheet-table> :not(.timesheet-head) .timesheet-cell:not(.time-column):not(.delete-button) .timesheet-heading {
		display: none;
	}

	/* time-column cells are fixed-width at 58px wide */
	.timesheet-cell.time-column {
		width: 58px;
	}
}

/* size md */
@media (min-width: 768px) and (max-width: 991.98px) {

	/* Limit time-section width to 5 time-columns (most that will fit) */
	.time-section {
		max-width: 290px;
	}

	/*
	Hide the following headings:
		* The 6th or greater time-column headings in the timesheet-head when the table has rows
		* The 5th or less time-column headings in the first row in the timesheet-body when there are more than 5 time entry boxes
		* The delete-button heading in the first row in the timesheet-body when there are more than 5 time entry boxes
		* All headings outside of the timesheet-head when there are 5 or less time entry boxes
	*/
	.timesheet-table:not(.no-rows) .timesheet-head .timesheet-cell.time-column:nth-of-type(n + 6),
	.timesheet-table.wrap-md .timesheet-body .timesheet-row:first-child .timesheet-cell.time-column:nth-of-type(-n + 5) .timesheet-heading,
	.timesheet-table.wrap-md .timesheet-body .timesheet-row:first-child .timesheet-cell.delete-button .timesheet-heading,
	.timesheet-table:not(.wrap-md)> :not(.timesheet-head) .timesheet-heading {
		display: none;
	}

}

/* Mobile (size xs and sm) */
@media (max-width: 767.98px) {

	/* Make time-section full-width */
	.time-section {
		width: 100%;
	}

	/* Hide the header when there are rows */
	.timesheet-table:not(.no-rows) .timesheet-head {
		display: none;
	}

	/* Rows can wrap, so dropdowns can be on one lime, time entry on another, and delete button on another */
	.timesheet-row {
		flex-wrap: wrap;
	}

	/* Add some spacing beneath non-footer rows */
	.timesheet-table> :not(.timesheet-foot) .timesheet-row {
		margin-bottom: 0.5rem;
	}

	/*
	Space the delete-button and the time-section from the items above.
	Use spacing above instead of below because delete-button may not be there, and no
	extra space on the bottom is needed because of body timesheet-row card padding.
	*/
	.timesheet-body .timesheet-cell.delete-button,
	.timesheet-body .time-section {
		margin-top: 0.5rem;
	}

	/* Turn the timesheet-rows in the body into cards */
	.timesheet-body .timesheet-row {
		background-color: #FFFFFF;
		border-radius: 4px;
		padding: 8px;
	}

	/* Turn the footer into a card */
	.timesheet-foot {
		border-radius: 4px;
		padding: 8px;
		background-color: #444;
	}

	/* Add a title to the footer to make clear what it is */
	.timesheet-foot:before {
		content: "Totals";
		width: 100%;
		font-size: 1.5em;
		line-height: 1;
	}

	/*
	Hide the following headings:
		* All .delete-button headings
	*/
	.timesheet-cell.delete-button .timesheet-heading {
		display: none;
	}

	/* Make delete-button cell full-width */
	.timesheet-cell.delete-button {
		width: 100%;
	}

	/* Turn the button inside the delete-button cell into a block button */
	.timesheet-cell.delete-button .btn {
		display: block;
		width: 100%;
	}

	/* Hide all footer cells that are not time-columns */
	.timesheet-foot .timesheet-cell:not(.time-column) {
		display: none;
	}
}

/* size sm */
@media (min-width: 576px) and (max-width: 767.98px) {

	/* Put 8 time-columns in a row */
	.timesheet-cell.time-column {
		width: 12.5%;
	}

	/* Make the work-dropdowns take 40% width... */
	.timesheet-cell.work-dropdown {
		width: 40%;
	}

	/* ...and make the pay-type take 20% width so all 3 make one row */
	.timesheet-cell.pay-type {
		width: 20%;
	}
}

/* size xs */
@media (max-width: 575.98px) {

	/* Put 4 time-columns in a row */
	.timesheet-cell.time-column {
		width: 25%;
	}

	/* Make the work-dropdown and pay-type cells full-width */
	.timesheet-cell.work-dropdown,
	.timesheet-cell.pay-type {
		width: 100%;
	}

	/* Add spacing between the work-dropdowns and the dropdowns below */
	.timesheet-body .timesheet-cell.work-dropdown {
		margin-bottom: 0.5rem;
	}
}

.attention-text {
	color: #dc3545;
	font-weight: bold;
	font-size: 1.75rem;
}


.heading-logo {
	height: 63px;
}

.heading-banner {
	height: calc(63px + (.3125rem * 2));
}