.employee-report-container {
	padding-bottom: 0.5rem;
	min-height: 540px;
}

.employee-report-container .employee-report-container-left {
	padding-right: 10px;
	max-width: 23%;
	min-width: 23%;
	box-sizing: border-box;
}

.employee-report-container .employee-report-container-right {
	padding-left: 10px;
	border-left: 1px solid gray;
}

.employee-report-container .employee-report-container-right .profile-tab-content {
	padding-left: 0.5rem;
}

#profile-container {
	padding-top: 1rem;
}

:root {
	--dept-text-color: var(--bs-primary);
}

[data-bs-theme="dark"] {
	--dept-text-color: var(--bs-info);
}

@scope(#profile-container) {
	.profile-top-container {
		padding-bottom: 0.8rem;
		display: flex;
		justify-content: space-between;
	}

	#profile-form input:not([type="checkbox"]) {
		min-height: 1.5rem;
		padding-top: 0;
		padding-bottom: 0;
	}

	.profile-top-grid {
		display: grid;
		grid-template-columns: max-content 1fr;
		width: fit-content;
		align-items: center;
	}

	.profile-top-grid>* {
		width: fit-content;
	}

	.profile-top-grid> :nth-child(odd) {
		font-weight: bold;
		margin-right: 0.5rem;
	}

	.profile-top-grid> :nth-child(even) {
		margin-right: 1.5rem;
	}

	.profile-top-grid .profile-input {
		display: flex;
		align-items: center;
		gap: 0.3rem;
	}

	.profile-details-columns {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		width: fit-content;
	}

	.profile-details-columns.edit-mode {
		grid-template-columns: minmax(200px, max-content) minmax(200px, max-content) minmax(200px, max-content);
	}

	.profile-details-columns div:first-child input:not([type="checkbox"]) {
		/* width: 140px; */
	}

	.profile-details-columns div:nth-of-type(2) input[type="text"],
	.profile-details-columns div:nth-of-type(2) input[type="email"],
	.profile-details-columns div:nth-of-type(2) input[type="file"] {
		width: 220px;
	}

	.profile-details-columns div:nth-of-type(3) input[type="password"]
	{
		width: 120px;
	}

	.profile-details-columns div:nth-of-type(3) input[type="text"] {
		width: 145px;
	}

	.profile-details-columns div:nth-of-type(3) select {
		height: 1.5rem;
		padding-top: 0;
		width: 150px;
	}

	.profile-details-grid {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 0;
	}

	.profile-details-grid>* {
		width: fit-content;
	}

	.profile-details-grid> :nth-child(odd) {
		font-weight: bold;
		margin-right: 0.6rem;
	}

	i.icon-dot {
		font-size: 0.8rem;
		margin-right: 0.3rem;
	}

	.profile-dept-list {
		display: grid;
		grid-template-columns: auto auto;
		gap: 0 50px;
		width: fit-content;
	}

	.profile-dept-list li {}

	.profile-dept-list li span {
		font-size: 0.9rem;
		color: var(--dept-text-color);
	}
}

#employee-details-container {
	padding-top: 0.5rem;
}

@scope(#employee-details-container) {
	.employee-image-frame {
		height: 125px;
		max-width: 165px;
		width: fit-content;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}

	.employee-image {
		height: 125px;
		width: auto;
		max-width: none;
		display: block;
		border: none;

	}

	.record-navigator .btn {
		width: 50px;
	}

	.info-grid {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 0.5rem;
		row-gap: 0;
	}
}

#employee-report-list-container {
	margin-top: 0.5rem;
}

#employee-report-list {
	max-width: 100%;
	table-layout: fixed;
}

#employee-report-list th:nth-child(1),
#employee-report-list td:nth-child(1) {
	width: 45px;
	white-space: nowrap;
}

#employee-report-list th:nth-child(2),
#employee-report-list td:nth-child(2) {
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#employee-report-list tr td:nth-child(3) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@scope(#employee-report-list-container) {
	a {
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	table.filters {
		width: 100%;
		border-collapse: collapse;
	}

	table.filters td {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	table.filters td:first-child {
		white-space: nowrap;
		width: 1px;
		padding-right: 8px;
	}

	table.filters td:last-child {
		width: 100%;
	}

	table.filters select {
		width: 100%;
	}
}