body {
	display: grid;
	grid-template-rows: auto 1fr;

	& header {
		background-color: var(--primary_700);
		padding: 1rem;

		& h1 {
			display: flex;
			gap: 0.5rem;

			& a {
				text-decoration: none;
				color: var(--bg_200);
				transition: color 0.3s ease;

				&:hover {
					color: var(--secondary_300);
				}
			}
		}
	}
}


.visibility_hidden {
	visibility: hidden;
}

#app {
	min-height: 0;

	padding: 1rem;



	& h2, h3 {
		margin: 0;
		font-weight: bold;
		color: var(--primary_400);
	}

	& .main-layout {
		min-height: 0;

		& .output {
			min-height: 0;
			background-color: var(--bg_100);
			border: 1px solid var(--primary_500);
			padding: 1rem;

			& .main-output {
				min-height: 0;
				overflow: auto;

				& table {
					background-color: var(--bg_50);
					border-collapse: collapse;
					font-size: 14px;
/*					table-layout: fixed;*/
/*					width: 100%;*/

					& tr {
						& td, & th {
							border: 1px solid var(--primary_100);
							padding: 2px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							text-align: right;
						}

						& th {
							background-color: #EFEFEC;
							font-weight: bold;
							text-align: left;
						}

						& td.header {
							background-color: #EFEFEC;
						}

						& td.header.bleak {
							background-color: #F9F9F6;
						}

						& td.bleak {
							color: var(--primary_200);
						}

						& td.p {
							background-color: lightgreen;
						}

						& td.n {
							background-color: lightcoral;
						}

						&:first-child th {
/*							resize: horizontal;*/
						}

						& td, & th {
							&:nth-child(1) { min-width: 5rem; max-width: 5rem }
							&:nth-child(2) { min-width: 2rem; max-width: 2rem }
							&:nth-child(3) { min-width: 10rem; max-width: 10rem }
							&:nth-child(4) { min-width: 4rem; max-width: 4rem }
							&:nth-child(n+5) { min-width: 5rem; max-width: 5rem }

							&:nth-child(1), &:nth-child(3), &:nth-child(4) {
								text-align: left;
							}

							&:nth-child(4) {border-right: 1px solid var(--primary_500);}

	/*						&:nth-child(3) th {border-bottom: 1px solid var(--primary_500);}*/
							&.col_header_3 {border-bottom: 1px solid var(--primary_500);}
							&.new_var_border {border-right: 1px solid var(--primary_500);}
						}

						&:first-child th { border-top: 1px solid var(--primary_500); }
						& th:first-child { border-left: 1px solid var(--primary_500); }
						& td:first-child { border-left: 1px solid var(--primary_500); }
						&:last-child td { border-bottom: 1px solid var(--primary_500); }
						& td:last-child { border-right: 1px solid var(--primary_500); }
						& th:last-child { border-right: 1px solid var(--primary_500); }
					}
				}
			}
		}
	}
}