#main {
	
}
h1 {
	text-align: center;
}
#td_description {
	font-style: italic;
	text-align: center;
	max-width: 28em;
	margin: 1em auto;
}
#td_form {
	text-align: center;
	margin-bottom: 2em;
}
#form_wrapper {
	display: inline-grid;
	grid-template-columns: auto auto auto auto;
	margin: 1em 0;
	align-items: center;
	row-gap: 1em;
}
	#form_wrapper div {
		
	}
	#form_wrapper label {
		position: relative;
		text-align: right;
		padding-right: 0.6em;
	}
		#upgradeDamage_label, #unitCost_label {
			margin-left: 1.7em;
		}
	#form_wrapper input {
		width: 5em;
	}
	.td_input {
		position: relative;
		padding: 0.2em 0 0.2em 0.4em;
		font-family: 'Play', sans-serif;
		border-radius: 0.5em;
		outline-offset: 2px;
		outline: 2px solid rgba(226,197,141,0);
		border: 0;
	}
		.td_input:hover {
			outline: 2px solid rgba(226,197,141,0.2);
		}
		.td_input:focus {
			outline: 2px solid rgba(226,197,141,1);
		}
	#calculate, #help {
		padding: 0.5em 1em;
		font-family: 'Play', sans-serif;
		border: 1px solid rgba(65,65,67,0.58);
		background-color: rgb(var(--bg1-3));
		color: rgb(245, 236, 228);
		border-radius: 0.5em;
		cursor: pointer;
		font-size: 1.2em;
	}
	#calculate:hover, #help:hover {
		background-color: rgb(var(--bg1-4));
	}
	#help:hover {
		cursor: help;
	}
	#calculate {
		margin-right: 0.5em;
	}
#td_wrapper {
	text-align: center;
	position: relative;
}
	.td_popup {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		position: absolute;
		padding: 1em 1em 0.7em 1em;
		width: max-content;
		background: rgb(var(--bg1-1));
		border: 1px solid rgba(245, 236, 228, 0.3);
		border-radius: 0.5em;
		text-align: center;
		border: 1px solid rgba(65,65,67,.58);
		box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
		display: none;
	}
		#armor_label, #add_armor_label {
			cursor: pointer;
			position: relative;
			font-size: 1rem;
		}
		#adjust_armor, #add_armor {
			margin-left: 1em;
		}
		.popup_msg {
			margin-top: 0.5em;
			padding-bottom: 0.8em;
			font-style: italic;
		}
		.armor_button_wrapper {
			display: flex;
			justify-content: center;
		}
		
		#submit_adjust_armor, #delete_armor, #submit_add_armor {
			font-family: 'Play', sans-serif;
			border: 1px solid rgb(65 65 67 / 58%);
			color: rgb(245, 236, 228);
			border-radius: 0.5em;
			cursor: pointer;
			font-size: 1em;
			height: 2.3em;
		}
		#submit_adjust_armor, #submit_add_armor {
			background-color: rgb(var(--bg1-3));
			flex: 1;
		}
		#submit_adjust_armor:hover, #submit_add_armor:hover {
			background-color: rgb(var(--bg1-4));
		}
		#delete_armor {
			background-color: rgb(124,36,26);
			margin-left: 0.4em;
			background-image: url('/img/trash_light.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto 60%;
			width: 2.3em;
		}
		#delete_armor:hover {
			background-color: rgb(141,56,41);
		}
	#td_table {
		display: inline-block;
		text-align: left;
		font-size: 1.1em;
	}
		#td_header {
		}
			th {
				font-weight: bold;
				background-color: transparent;
				position: relative;
				
			}
				#td_header_units {
					padding: 0.5em 0.8em 0.5em 0.3em;
				}
				#td_header_avg {
					padding: 0.5em 0.3em 0.5em 0.8em;
				}
				.td_armor_header {
					padding: 0.5em 0.8em;
					position: relative;
				}
					.add_armor_button {
						position: absolute;
						bottom: 0em;
						height: 1.6em;
						padding-bottom: 0.2em;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						font-size: 1.2em;
						z-index: 2;
						color: rgba(226,197,141,0);
						right: 0em;
						width: 0.1em;
						transition: width 0.5s ease-in, right 0.5s ease-in, color 0.5s ease-in;
						border-left: 1px solid rgba(245, 236, 228, 0.3);
						border-right: 1px solid rgba(245, 236, 228, 0.3);
					}
						.add_armor_button div {
							width: 100%;
							height: 100%;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					.add_armor_button:hover {
						width: 1em;
						right: -0.5em;
						color: rgba(226,197,141,1);
						border-left: 1px solid rgb(226,197,141);
						border-right: 1px solid rgb(226,197,141);
					}
				.armor_header {
					
				}
				.armor_header:hover {
					cursor: pointer;
					color: #e2c58d;
				}
		.td_row {
			background-color: rgba(var(--bg2-1),0.5);
		}
		.td_row:hover {
			background-color: rgba(var(--bg2-2),0.7);
			cursor: pointer;
		}
			.td_row td {
				border-top: 1px solid rgba(65,65,67,.75);
			}
			.td_row_on {
				border: 1px solid #fff;
			}
			.td_row_on td {
				background-color: rgb(20,30,60);
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
			}
			.td_units, .td_average, .td_upgrade {
				padding: 0.3em;
				position: relative;
			}
			.td_upgrade {
				text-align: center;
			}
			.td_average {
				text-align: right;
			}
		#td_addrows td {
			text-align: center;
			padding: 0.5em;
			font-weight: bold;
		}
		#td_addrows td:hover {
			text-align: center;
			padding: 0.5em;
			font-weight: bold;
			cursor: pointer;
			background-color: rgba(var(--bg1-3),0.7);
		}