/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

tr {
	position: relative;
}

td {
	transition:
		background-color 250ms ease,
		border-color 250ms ease,
		color 250ms ease;
}

td:hover {
	background-color: whitesmoke;
	border-color: darkslateblue;
	color: darkslateblue;
}

table.main > tbody {
	clip-path: inset(0 0 0 -2px);
}

#table-box {
	display: flex;
	width: 298px;
	margin: 64px auto 0 auto;
	position: relative;
}

table.borrow {
	border: none;
	padding: 0;
	top: 8px;
	position: absolute;
	left: 288px;
	width: 282px;
	background-color: transparent;
}

table.key {
	position: absolute;
	left: 330px;
	width: 298px;
}

table.borrow > tbody {
	clip-path: inset(0 278px 0px -282px);
}

.sbox-mini {
	font-size: 10pt;
}

.labels {
	position: relative;
	margin: auto;
	width: 298px;
}

.step-label {
	width: 298px;
	display: flex;
	justify-content: space-between;
}

.step-label > p,
.key-label > p,
.results > p {
	display: inline;
	margin-top: 8px;
}

p#step-name {
	text-align: left;
}

.key-label {
	position: absolute;
	width: 298px;
	left: 330px;
	top: 8px;
	display: flex;
}

#key-name {
	overflow-wrap: anywhere;
	text-align: right;
}

.pseudoform {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 768px;
	margin-top: 160px;
}

#process,
#calculate {
	width: 192px;
	margin: 16px;
	padding: 8px;
	font-size: 16pt;
}

button.random-iv {
	position: absolute;
	left: 306px;
	height: 100%;
	margin: 0;
	width: 96px;
}

.results {
	margin: auto;
	width: 768px;
	display: flex;
	flex-direction: row;
	position: relative;
	margin-top: 32px;
	margin-bottom: 32px;

	padding: 16px;
}

#output {
	margin: auto;
	font-size: 24pt;
	word-break: break-all;
	width: 447px;
	text-align: center;
}

.results > p:not(#output) {
	position: absolute;
	left: 16px;
	top: 0;
	margin: 0;
	height: 100%;
	align-content: center;
}

section.unappeared {
	opacity: 0%;
}