.fs-14 {
	font-size: 14px !important;
}

th {
	background: #fcfdfd;
	border: 1px solid var(--grey-300);
	padding: 16px 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--primary);
	line-height: 1.25;
}

.tooltip {
	font-size: 12px;
}

#processperdiem_filter {
	display: none !important;
}

#holiday-table_filter {
	display: none !important;
}

td {
	background: var(--white);
	border: 1px solid #b9b9b9;
	padding: 10px 8px;
	border-top: 0px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	overflow: hidden;
	word-wrap: break-word;
	vertical-align: top;
}

td p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	word-break: break-word;
}

th:nth-child(1) {
	border-top-left-radius: 14px;
}

th:last-child {
	border-top-right-radius: 14px;
}

table {
	width: 100%;
	table-layout: auto;
}

table.display {
	width: 100%;
	table-layout: fixed;
}

table.display-ue {
	width: 100%;
	table-layout: fixed;
}

#processperdiem {
	table-layout: fixed;
	width: 100%;
}

table,
th,
td {
	border-collapse: separate;
	border-spacing: 0;
}

th,
td {
	border-right: 0px;
	border-left: 0;
}

th:last-child {
	border-right: 1px solid var(--grey-300);
	padding-right: 16px;
}

td:last-child {
	border-right: 1px solid rgb(151 151 151 / 60%);
	padding-right: 16px;
}

th:first-child {
	border-left: 1px solid var(--grey-300);
	padding-left: 16px;
}

td:first-child {
	border-left: 1px solid rgb(151 151 151 / 60%);
	padding-left: 16px;
}

tbody tr:last-child td:first-child {
	border-bottom-left-radius: 14px;
}

tbody tr:last-child td:last-child {
	border-bottom-right-radius: 14px;
}

th .form-check-input[type="checkbox"],
td .form-check-input[type="checkbox"] {
	width: 16px;
	height: 16px;
	border-radius: 2px;
	box-shadow: none;
	outline: none;
	margin: 0;
	vertical-align: center;
}

span.dt-column-title {
	display: flex;
}

.dt-layout-row.dt-layout-table {
	margin: 0;
}

.dt-layout-row {
	display: flex;
	margin: 24px 0 0 0;
	justify-content: space-between;
	gap: 8px;
}

.dt-info {
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: var(--primary);
	mix-blend-mode: normal;
	opacity: 0.6;
}

.dataTables_scrollHeadInner {
	min-width: 100%;
	width: 100% !important;
	box-sizing: border-box !important;
}

table.dataTable {
	min-width: 100%;
	width: 100% !important;
}

/* Modern DataTables Pagination UI */
.dt-paging {
	margin-top: 15px;
	display: flex;
	justify-content: flex-end;
}

.dt-paging nav {
	display: flex;
	align-items: center;
	gap: 5px;
}

button.dt-paging-button {
	border: 1px solid var(--grey-300);
	background: var(--white);
	color: var(--primary);
	padding: 5px 12px;
	min-width: 36px;
	height: 36px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

button.dt-paging-button:hover:not(.disabled) {
	background: var(--grey);
	border-color: var(--primary-blue);
	color: var(--primary-blue);
}

button.dt-paging-button.current {
	background: var(--primary-blue) !important;
	color: var(--white) !important;
	border-color: var(--primary-blue) !important;
}

button.dt-paging-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #fcfdfd;
}

button.dt-paging-button.previous,
button.dt-paging-button.next {
	font-weight: 700;
	padding: 5px 15px;
}

button.dt-paging-button.previous:before {
	content: "\ab";
	/* Double left chevron */
	margin-right: 5px;
}

button.dt-paging-button.next:after {
	content: "\bb";
	/* Double right chevron */
	margin-left: 5px;
}

button.dt-paging-button.first,
button.dt-paging-button.last {
	display: inline-flex;
}

table.dataTable th p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.dataTable th {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 80px;
}

/* Fix overlapping headers in summary table */
#processperdiem th {
	min-width: 80px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#processperdiem th.emp_code {
	width: 110px !important;
	min-width: 110px !important;
	max-width: 110px !important;
}

#processperdiem th.employee {
	width: 100px !important;
	min-width: 100px !important;
	max-width: 120px !important;
}

#processperdiem th.uni-code {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
}

#processperdiem th.Job {
	width: 90px !important;
	min-width: 90px !important;
	max-width: 120px !important;
}

#processperdiem th.pay-rate {
	width: 70px !important;
	min-width: 70px !important;
	max-width: 70px !important;
}

#processperdiem th.date {
	width: 85px !important;
	min-width: 85px !important;
	max-width: 85px !important;
}

#processperdiem th.total {
	width: 70px !important;
	min-width: 70px !important;
	max-width: 70px !important;
}

.signature-img {
	height: 24px;
	border-radius: 4px;
	object-fit: contain;
}

th.date-time {
	width: 145px !important;
	min-width: 145px !important;
}

th.name {
	width: 70px !important;
	min-width: 70px !important;
}

th.job-name {
	width: 125px !important;
	min-width: 125px !important;
}

th.date,
th.time {
	min-width: 95px !important;
	width: 95px !important;
	max-width: 95px !important;
}

th.job-id {
	width: 70px !important;
	min-width: 70px !important;
}

th.add-manual {
	min-width: 100px !important;
	width: 100px !important;
	max-width: 100px !important;
}

th.job,
th.job-number,
th.submiter,
th.holiday-amt,
th.frequency {
	min-width: 110px;
	width: 110px !important;
	max-width: 110px;
}

/* Limit first column (Job) width in process-time-card table */
table#myTable th:first-child.job,
table#myTable td:first-child {
	/* max-width: 120px !important;
	width: 120px !important;
	min-width: 120px !important; */
}

table#myTable td:first-child p {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
}

/* Error cell background for invalid/duplicate fields in process-time-card */
td.error-cell {
	background: var(--red) !important;
}

td.error-cell p {
	color: var(--white) !important;
	font-weight: 600;
}

th.frequency {
	min-width: 70px !important;
	width: 70px !important;
	max-width: 70px;
}

th.read-notes {
	min-width: 100px;
	width: 100px !important;
	max-width: 100px;
}

th.modify-cost {
	width: 150px !important;
	white-space: nowrap;
}

th.message {
	min-width: 150px !important;
	width: 150px !important;
	max-width: 150px !important;
}

th.hours,
th.per-diem {
	min-width: 58px;
	width: 58px;
	max-width: 58px;
}

th.actions {
	min-width: 30px !important;
	width: 30px !important;
	max-width: 30px !important;
}

th.check {
	min-width: 20px !important;
	max-width: 20px !important;
	width: 20px !important;
}

th.cost {
	min-width: 106px !important;
	width: 106px !important;
	max-width: 106px !important;
}

th.status {
	min-width: 105px !important;
	width: 105px !important;
	max-width: 105px !important;
}

th.cost {
	min-width: 80px !important;
	width: 80px !important;
	max-width: 80px !important;
}

th.employee,
th.pay {
	min-width: 100px !important;
	width: 100px !important;
	max-width: 100px !important;
}

th.injury {
	min-width: 80px;
	width: 80px;
	max-width: 80px;
}

th.signature,
.markup-freq {
	min-width: 130px;
	width: 130px;
	max-width: 130px;
}

th.emp_code {
	width: 110px !important;
	min-width: 110px !important;
	max-width: 110px !important;
}

th.batch-code {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
}

th.pay-rate_desc {
	width: 62px !important;
	min-width: 62px !important;
	max-width: 62px !important;
}

th.uni-code {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
}

th.message-box {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
}

th.pay-rate {
	width: 65px !important;
	min-width: 65px !important;
	max-width: 65px !important;
}

th.hour-emp {
	width: 113px !important;
	min-width: 113px !important;
	max-width: 113px !important;
}

th.dept-code {
	width: 122px !important;
	min-width: 122px !important;
	max-width: 122px !important;
}

th.wage-code {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
}

th.cost-type {
	width: 70px !important;
	min-width: 70px !important;
	max-width: 70px !important;
}

th.job-no {
	width: 90px !important;
	min-width: 90px !important;
	max-width: 90px !important;
}

th.pay-type {
	width: 60px !important;
	min-width: 60px !important;
}

th.project_name {
	width: 170px !important;
	min-width: 170px !important;
}

th.union {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
}

th.hr_rule {
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
}

th.rt_time {
	width: 145px !important;
	min-width: 145px !important;
	max-width: 145px !important;
}

th.shift_time {
	width: 160px !important;
	min-width: 160px !important;
	max-width: 160px !important;
}

th.rules {
	width: 65px !important;
	min-width: 65px !important;
	max-width: 65px !important;
}

.dataTables_wrapper .dataTables_scroll table,
.table-top-custom-header,
.dataTables_scrollBody,
.dataTables_scrollHead {
	/* min-width: 650px; */
}

div.dataTables_wrapper div.dataTables_info {
	font-size: 14px;
	font-weight: 600;
	padding-top: 1px;
	text-align: left;
	line-height: 1;
}

div.dataTables_wrapper div.dataTables_filter label {
	font-size: 14px;
	font-weight: 600;
}

.with-download-btn .table-top-custom-header {
	min-height: 36px;
}

.table-top-custom-header {
	padding-right: 120px;
}

.add-entry-btn.with-download-btn .table-top-custom-header {
	padding-right: 130px;
}

.no-download-btn .table-top-custom-header {
	padding-right: 0;
}

.download-btn {
	display: inline-flex;
	gap: 5px;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	transition: background-color 0.3s ease, box-shadow 0.2s ease;
	cursor: pointer;
	min-height: 36px;
	position: absolute;
	right: 0;
	top: 1px;
	line-height: 1;
	align-items: center;
}

.download-btn svg {
	width: 18px;
	height: 18px;
	fill: white;
}

button.action-btn {
	border: 0;
	background: transparent;
	border-radius: 0%;
	padding: 4px;
	line-height: 1;
	width: 30px;
	height: 30px;
}

button.action-btn img {
	width: 18px;
}

button.action-btn.edit {
	opacity: 0.6;
}

.badge {
	font-size: 12px;
	font-weight: 700;
	padding: 4px;
	min-height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	border-radius: 4px;
}

.badge.badge-md {
	min-width: 90px;
}

.badge.text-bg-danger {
	background: rgb(239 56 38 / 20%) !important;
	color: var(--red) !important;
}

.badge.text-bg-success {
	background: rgb(0 182 155 / 20%) !important;
	color: #00b69b !important;
}

.badge.text-bg-success {
	background: rgb(0 182 155 / 20%) !important;
	color: #00b69b !important;
}

.badge.text-bg-secondary {
	background: rgb(98 38 239 / 20%) !important;
	color: #6226ef !important;
}

.badge.text-bg-info {
	background: rgb(255 167 86 / 20%) !important;
	color: #ffa756 !important;
}

.badge.text-bg-warning {
	background: rgb(186 41 255 / 20%) !important;
	color: #ba29ff !important;
}

.badge.text-bg-primary {
	background: rgb(55 73 166 / 20%) !important;
	color: var(--primary-blue) !important;
}

/* table settings */
.column-settings .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--grey-400);
	margin-bottom: 0;
	position: sticky;
	top: 0;
	background: var(--white);
	z-index: 1;
}

.column-settings .column-title {
	font-weight: 600;
	font-size: 14px;
}

.column-settings .column-action label {
	font-size: 14px;
	margin-right: 10px;
}

.column-settings .reset-link {
	color: #ea0234;
	text-decoration: none;
	border: 0;
	background: transparent;
	font-size: 14px;
	font-weight: 700;
}

.column-settings .reset-link:hover {
	opacity: 0.8;
}

.column-settings .column-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #eaeaea;
	gap: 8px;
	min-height: 40px;
}

.column-settings .column-row:last-child {
	border-bottom: none;
}

.column-settings .drag-icon {
	font-size: 16px;
	color: #bbb;
	margin-right: 0;
	cursor: grab;
	width: 18px;
	flex: 0 0 18px;
	max-width: 18px;
	flex-shrink: 0;
}

.column-settings span.drag-icon img {
	width: 100%;
	opacity: 0.5;
	height: auto;
}

.column-settings .form-check-input[type="checkbox"] {
	border-radius: 2px;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	margin-top: 0;
	flex-shrink: 0;
	cursor: pointer;
}

.column-settings .column-action {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 24px;
}

.column-settings label {
	flex: 1;
	min-width: 0;
	font-weight: 400;
	font-size: 14px;
	color: inherit;
	display: flex;
	align-items: center;
	cursor: pointer;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.4;
}

.column-settings label:hover {
	color: var(--primary-color, #007bff);
}

.column-settings #column-list {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 24px;
	scrollbar-width: thin;
}

.column-settings #column-list::-webkit-scrollbar {
	width: 6px;
}

.column-settings #column-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.column-settings #column-list::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

.column-settings #column-list::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

.table-wrapper+.table-wrapper {
	margin-top: 30px;
}

.opt-single {
	min-width: 100px !important;
}

.opt-single p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

td button.btn-sm {
	font-weight: 600;
	min-width: 96px;
}

.adjusted-table.dataTable th:last-child,
.adjusted-table.dataTable td:last-child {
	width: 30px;
	min-width: 30px;
}

.adjusted-table.dataTable th,
.adjusted-table.dataTable td {
	min-width: 110px;
	width: 110px;
}

.adjusted-table.dataTable th {
	overflow: unset;
	text-overflow: unset;
}

.dataTables_scrollBody {
	scrollbar-width: thin;
}

@media screen and (min-width: 768px) {
	@media screen and (-webkit-min-device-pixel-ratio: 0) {
		.main-content-inner.is-visible .dataTables_scrollHeadInner {
			padding-right: 10px !important;
		}
	}

	@supports (-webkit-appearance: none) {
		.main-content-inner.is-visible .dataTables_scrollHeadInner {
			padding-right: 10px !important;
		}
	}

	@-moz-document url-prefix() {
		.main-content-inner.is-visible .dataTables_scrollHeadInner {
			padding-right: 0px !important;
		}
	}
}

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

	.adjusted-table.dataTable th,
	.adjusted-table.dataTable td {
		min-width: 90px;
		width: 90px;
	}
}

@media screen and (max-width: 767px) {
	.dataTables_scrollBody {
		max-height: unset !important;
	}

	.table-wrapper .download-btn.btn-success {
		font-size: 0;
		gap: 0;
	}

	.add-entry-btn.with-download-btn .table-top-custom-header {
		padding-right: 0;
	}

	.add-entry-btn.with-download-btn .table-top-custom-header .dataTables_filter {
		padding-right: 130px;
	}

	.table-top-custom-header {
		padding-right: 0;
	}

	.table-top-custom-header {
		flex-direction: column-reverse;
		align-items: flex-start !important;
		gap: 8px;
	}

	div.dataTables_wrapper div.dataTables_info {
		width: 100%;
	}

	.download-btn {
		top: 0;
	}

	div.dataTables_wrapper div.dataTables_filter {
		margin-left: auto;
		width: 100%;
	}

	div.table-wrapper.with-download-btn .dataTables_filter {
		padding-right: 50px;
	}

	div.dataTables_wrapper div.dataTables_filter label {
		width: 100%;
		font-size: 0;
	}

	div.dataTables_wrapper div.dataTables_filter label input.form-control.form-control-sm {
		width: 100%;
		margin: 0;
	}
}