@keyframes popupAppear {
	0% {
		background: rgba(0, 0, 0, 0%);
	}
	100% {
		background: rgba(0, 0, 0, 90%);
	}
}

.popup {
	animation: popupAppear 1s linear;
	background: rgba(0, 0, 0, 90%);

	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	.content {
		border-radius: 2rem;
		background: @bg;
		text-align: center;
		box-shadow: black 0 0 1rem;

		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-sizing: border-box;

		max-width: 50vw;
		max-height: 50vh;

		padding: 2rem;
		display: flex;
		flex-direction: column;

		font-size: 1.4rem;

		& > section {
			margin: 1rem;

			&:first-of-type {
				display: flex;
				flex-direction: column;
				align-items: center;

				& > * {
					margin: .5rem;
				}
			}

			&:last-of-type {
				display: flex;

				& > * {
					flex: 1;
				}
			}
		}

		table {
			display: flex;
			flex-direction: column;
			width: 100%;

			tr {
				display: flex;
			}
			th {
				text-align: right;
				&::after {
					content: ':';
				}
			}
			td {
				text-align: left;
			}
			th, td {
				padding: 0 .5rem;
				flex: 1;
			}
		}

		button {
			display: inline;
			color: @accentfg;
			background: @accentbg;
			font-weight: bold;

			border-radius: 1rem;
			border: 0;
			padding: 2rem;
			margin: 1rem;
		}
	}
}