@import "../../variables";

.backdrop {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.8);
}

.msgcontainer {
	position: fixed;
	z-index: 1200;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -32vh;
	height: 64vh;
	text-align: center;
	padding: 2vh 0;

	//border: 2px solid red;
	background-color: rgba(0, 0, 0, 0.7);

	color: #fff;
	font-family: @font-family-monospace;
	font-variant: petite-caps;
	user-select: none;

	.bigicon {
		font-weight: 900;
		font-size: 30vh;
		height: 32vh;
		margin-top: -12vh;
		color: #b22222;
	}

	.message-what {
		font-weight: 900;
		font-size: 12vh;
		height: 40vh;
		word-spacing: .5em;
		margin: 0;
	}

	.message-service, .message-team {
		font-size: 8vh;
		font-weight: 500;
		height: 10vh;
		margin: 0;

		strong {
			font-weight: 900;
		}

		small {
			color: #b22222;
		}
	}

}


.pyrocontainer {
	position: fixed;
	z-index: 1200;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	padding: 0;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.85);
	overflow: hidden;

	text-align: center;
	color: #fff;
	font-family: @font-family-monospace;
	font-variant: petite-caps;
	user-select: none;

	.message-what {
		font-weight: 900;
		font-size: 12vmin;
		height: 24vmin;
		word-spacing: .5em;
		margin: 0;
		margin-top: 10vmin;
	}


	.teams {
		font-size: 6vmin;
		font-weight: 500;
		margin: 0;

		strong {
			font-weight: 900;
		}

		small {
			font-size: 50%;
			white-space: nowrap;
		}
	}

	table.finaltable {
		margin: 0 auto;

		border-collapse: collapse;
		border-spacing: 0;

		td {
			padding: 10px 15px;
			border-bottom: 1px solid #666;
		}

		tr:first-child td {
			font-size: 110%;
		}

		tr:last-child td {
			border-bottom: none;
			font-size: 90%;
		}

		img {
			width: 64px;
			max-width: 64px;
			max-height: 64px;
		}
	}

	.message-sub {
		margin-top: 7vmin;
		font-size: 4vmin;

		small {
			font-size: 2.7vmin;
		}
	}
}