@import url("Font_F25_Bank_Printer.css");

:root {
	--FooterPadding: 8px;
}

A {
	Color: #17C3EA;
}
A:Active {
	Color: #0B69BC;
}
A:Hover {
	Background: #101060;
	Color: #E9FFEE;
}

Body {
	background-image: url("https://octospacc.gitlab.io/Web-ThirdParty-Unknown/Assets/Media/Backgrounds/0.gif");
	background-size: cover;
	margin: 0;
	height: 100%;
	width: 100%;
	color: #F0F0FF;
}

.NoSelect, .Footer {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	User-Select: none;
}

.InlineDiv > * {
	display: inline-block;
	margin: 32px;
}

#ConfettiCanvas {
	Position: Relative;
	Top: 0;
	Left: 0;
	Width: 100%;
	Height: 100%;
	Z-Index: 2;
}

.Content {
	background-color: rgba(0,0,0,0.85);
	width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	overflow-x: hidden;
	padding-top: 5%;
	padding-bottom: 5%;
}

#Links > Div,
.BackgroundedBox {
	Max-Width: Fit-Content;
	Margin: Auto;
	Padding: 16px;
	Background-Color: RGBA(16,16,16,0.85);
}

.BackgroundedBox > li {
	margin-left: 8px;
}

.TopBar {
	position: absolute !important;
	left: 0;
	top: 0;
	padding: 8px;
	/* width: 100%; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Footer {
	Position: Fixed;
	Display: Flex;    
	Flex-Direction: Row;
	Justify-Content: Space-Between;
	Bottom: 0px;
	Width: 100vw;
	Padding: var(--FooterPadding);
	Text-Align: Center;
	Overflow-X: Auto;
	Overflow-Y: Hidden;
	White-Space: NoWrap;
	Z-Index: 1;
	/* CSS-only scroll shadow effect | Credits to Bartek, <https://stackoverflow.com/questions/44793453/how-do-i-add-a-top-and-bottom-shadow-while-scrolling-but-only-when-needed#comment115950584_44794221> */
	/*
	background:
		linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)),
		linear-gradient(90deg, rgba(255, 255, 255, 0), white 70%) 0 100%,
		radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), white),
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), white) 0 100%;
	background-repeat: no-repeat;
	background-position: top left, top right, top left, top right;
	background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
	background-attachment: local, local, scroll, scroll;
	*/
	Background-Color: RGBA(36, 36, 36, 0.85);
	Font-Size: Larger;
}
.Footer > .FooterRight { Margin-Right: calc(var(--FooterPadding) * 2); }

#OcttAgeView { Padding: 16px; }