html {
	font-family: Arial, Helvetica, sans-serif;
}

header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	background-color: rgb(21, 97, 132);
	color: white;
}

.image-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.3em;
}

.image-container img {
	width: 50px;
	cursor: pointer;
}

header > img {
	width: 50px;
}

button {
	cursor: pointer;
}

.wrapper {
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -130px;
}

dialog {
	padding: 1em;
}

.btns-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 20px;
	margin-top: 0.5em;
}

.btn-container > button {
	padding: 0.5em 0.3em;
}

#table-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 1em;
}

table {
	table-layout: fixed;
	width: 80%;
	min-width: 1000px;
	border-collapse: collapse;
	margin: 0 auto;
}

thead,
tbody,
tr,
th,
td {
	border: 1px solid black;
}

thead {
	font-size: 1.5rem;
}

thead th:nth-child(1),
thead th:nth-child(2),
thead th:nth-child(3),
thead th:nth-child(4),
thead th:nth-child(5){
	background-color: rgb(119, 81, 224);
	color: white;
}

tbody {
	font-size: 1.2rem;
}

th,
td {
	vertical-align: top;
	padding: 0.5em;
}

thead th:nth-child(7n - 1),
tbody td:nth-child(7n - 1) {
	border-top: hidden;
	border-bottom: hidden;
	border-right: hidden;
}

tbody td:nth-child(7n - 1),
tbody td:last-child {
	text-align: center;
}

thead > tr > th:last-child,
tbody > tr > td:last-child {
	border-top: hidden;
	border-bottom: hidden;
	border-right: hidden;
}

tbody > tr > td:nth-child(7n - 5),
tbody > tr > td:nth-child(7n - 6),
tbody > tr > td:nth-child(7n - 2) {
	text-align: left;
}

tbody > tr > td:nth-child(7n - 3) {
	text-align: right;
}


.remove-btn {
	border: none;
}

.remove-icon {
	width: 50px;
}