#ticket {
	background-color: rgba(20, 20, 20, 0.7);
	
	z-index: 101;

	padding: 10px;
	border: 1px dashed whitesmoke;
	border-radius: 10px;

	width: auto;
	height: auto;

	text-align: center;

	position: fixed;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#ticket #grab {
	padding: 0;
	margin: 0;

	width: 100%;
	height: 1px;
	border: 1px solid white;
}

#infoboard, #tickets, #pass {
	padding: 20px 5px 5px 5px;
	border: 1px solid white;

	text-align: center;

	width: min(500px, 85vw);
	height: auto;
}

#clock, #swatch {
	background-color: rgb(10, 10, 10);
	padding: 10px;
	margin: 0;
}

#jona, #rona, #dialogue {
	display: inline-block;
	vertical-align: middle;
}

#dialogue {
	max-width: 90%;
	overflow-wrap: break-word;
	margin: 20px;
}

#dialogue, #tickets #options, #pass #options, #pass #signin, #pass #signup {
	padding: 10px 5px 10px 5px;
	border: 1px solid white;
}

.option {
	float: left;
	width: auto;
}

.value {
	float: right;
	width: auto;
}

#train-container {
	position: fixed;
	bottom: 0;

	width: 100%;
	overflow-x: scroll;

	z-index: 100;
}

#train-container #train {
	position: relative;
	user-select: none;
}

#train-container * {
	padding: 0;
	margin: 0;
}

#train-container #tracks {
	border: 1px solid whitesmoke;
	height: 1px;

	margin-top: 2px;
	margin-bottom: 5px;

	width: 100%;
}

#train:hover.active {
	cursor: pointer;
	animation: highlight 2s infinite;
}

iframe#station {
	position: absolute;

	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;

	z-index: 99;
	
	border: none;
	padding: 0;
	margin: 0;
}