* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Segoe UI', sans-serif;
	background: #f4f6f9;
	color: #333;
	padding: 40px 20px;
	background-color: #59e;
}

h1 {
	font-size: 2rem;
	margin-bottom: 24px;
	color: #1a1a2e;
}

.count-label {
	font-weight: 800;
}

button {
	background-color: #1f6;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}

.table-buttons {
	width: 100vw;
	max-width: calc(100vw - 40px);
	display: inline-flex;
	justify-content: space-between
}
	.table-buttons button {
		float: right;
		width: 2em;
		font-size: 20px;
	}

#cv-list {
	list-style: none;
	max-width: 500px;
}

	#cv-list li {
		background: white;
		border-left: 4px solid #4f8ef7;
		padding: 14px 20px;
		margin-bottom: 10px;
		border-radius: 4px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.08);
		font-size: 1rem;
		transition: transform 0.15s;
	}

		#cv-list li:hover {
			transform: translateX(4px);
		}

.table-wrapper {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	max-width: calc(100vw - 40px);
	background-color: #eee;
}

/* sticky header */
.thead-scroll {
	overflow: hidden;
}

.tbody-scroll {
	max-height: calc(95vh - 10em);
	overflow-y: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* align body columns with header */
colgroup col:nth-child(1) {
	width: 1em;
}
colgroup col:nth-child(2) {
	width: 3em;
}
colgroup col:nth-child(3) {
	width: 1em;
}
colgroup col:nth-child(4) {
	width: 2.5em;
}
colgroup col:nth-child(5) {
	width: 3em;
}
colgroup col:nth-child(6) {
	width: 2.5em;
}
colgroup col:nth-child(7) {
	width: 4em;
}
colgroup col:nth-child(8) {
	width: 3.5em;
}
colgroup col:nth-child(9) {
	width: 3.5em;
}
colgroup col:nth-child(10) {
	width: 3em;
}

thead tr {
	background: #f0f2f5;
}

thead th {
	padding: 11px 16px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	border-bottom: 1px solid #008;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

	thead th:hover {
		background: #eae9be;
	}

.sort-icon {
	font-size: 11px;
	color: #aaa;
	margin-left: 4px;
}

	.sort-icon.active {
		color: #333;
	}

tbody tr {
	border-bottom: 1px solid #00f;
	transition: background 0.1s;
	cursor: pointer;
}

	tbody tr:last-child {
		border-bottom: none;
	}

	tbody tr:hover {
		background: #f9fafb;
	}

tbody td {
	padding: 6px 8px;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-right: 1px solid #10c;
	overflow: hidden;
}

td.id-col {
	color: #aaa;
	font-size: 13px;
}

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: #111131c0; /* Black w/ opacity */
	cursor: not-allowed;
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 10% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	cursor: auto;
}
	.modal-content p {
		font-weight: 700;
		font-size:32px;
		color: blue;
	}

.modalPopup {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: #111131c0; /* Black w/ opacity */
	cursor: not-allowed;
}

/* Modal Content/Box */
.modalPopup-content {
	background-color: #fefefe;
	margin: 10% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 65%; /* Could be more or less, depending on screen size */
	cursor: auto;
}
	.modalPopup-content p {
		font-weight: 700;
		font-size: 32px;
		color: red;
	}
	.modalPopup-content button:nth-child(3) {
		font-weight: 700;
		font-size: 32px;
		background-color: red;
		padding: 1em 2em;
	}
	.modalPopup-content button:nth-child(4) {
		font-weight: 700;
		font-size: 32px;
		background-color: lightblue;
		padding: 1em 2em;
		float: right;
	}

/* The Close Button */
.close {
	color: #f42;
	float: right;
	font-size: 24px;
	font-weight: bold;
}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

form {
	background-color: white;
	padding: 20px;
	max-width: 80vw;
	margin: 50px auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

label {
	width: 150px;
	font-size: 16px;
	color: #333;
}

input[type="text"],
input[type="email"] {
	flex-grow: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: #ecefff;
}

select {
	flex-grow: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: #ecefff;
}

input[type="date"] {
	flex-grow: .3;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: #ecefff;
}

input[type="submit"] {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

	input[type="submit"]:hover {
		background-color: #0056b3;
	}

	input[type="submit"]:active {
		background-color: #004494;
	}
	hr {
		margin-top: 1em;
		margin-bottom: 1em;
	}

#drop-zone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	height: 200px;
	padding: 1em;
	border: 1px solid #cccccc;
	border-radius: 4px;
	color: slategray;
	cursor: pointer;
}

#file-input {
	display: none;
}

#preview {
	width: 500px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	list-style: none;
	padding: 0;
}

	#preview li {
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin: 0;
		width: 100%;
		height: 100px;
	}

	#preview img {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

.status {
	z-index: 1000;
	position: absolute;
	top: 1em;
	right: 1em;
	width: 25em;
	height: 5em;
	margin-top: 10px;
	color: #e21;
	position: fixed;
	font-style: italic;
	font-weight: bold;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.buttonbar {
	display: flex;
}

	.buttonbar button {
		margin-right: 3em;
		margin-left: 3em;
		padding: 1em;
	}
.invisibleButton {
	background-color:transparent;
	border:0;
}
.PreviewImage {
	width: 8em;
}

.AttachmentBox {
	white-space: normal;
	border: 1px solid blue;
	border-radius: 1em;
	display: grid;
	padding: 1em;
	width: auto;
}

.filter {
	margin-left: 1em;
	height: 2em;
	vertical-align: middle;
	width: 50vw;
	font-size: 22px;
	border-radius: 8px;
	padding-left: .5em;
	padding-right: .5em;
}

#removeAttachmentsButton {
	display: block; /* It is hidden in portrait so we have to define the global visibility */
}


@media (orientation: portrait) {
	.filter {
		margin-left: 0em;
		height: 2em;
		vertical-align: middle;
		width: 90vw;
		font-size: 22px;
		border-radius: 8px;
		padding-left: .5em;
		padding-right: .5em;
	}

	/* hide desktop-only columns */

	#thead-mobile th {
		font-size: .55em;
		overflow: hidden;
	}
	tbody td {
		font-size: .5em;
	}
	tbody td:nth-child(4) {
		font-size: .3em;
	}

	form#cvForm td:nth-child(2) {
		display:none;
	}

	/* keep colgroup cols from interfering */
	colgroup {
		display: none;
	}

	.buttonbar {
		display: flex;
	}
		.buttonbar button {
			margin-right: .5em;
			margin-left: .5em;
			padding: .5em;
		}

	#removeAttachmentsButton {
		display:none;
	}


}