﻿
:root {
	--OgUI-ContentBlue: #34495E;
	--OgUI-OddOrange: #F5761E;
	--OgUI-OddBlue: #498Ec9;
	--OgUI-BgBlue: #5d6C77;
	--OgUI-BackBlue: #3d5A80;
	--OgUI-BackBlue2: #7090b0;
}

/*body, html {
	padding: 0;
	margin: 0;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	}*/

html {
	padding: 0;
	margin: 0;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	width: 100%;
/*	align-items: center;*/
}

body {
	padding: 0;
	margin: 0;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: transparent;
}

.uiContainer {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.uiRegisterContainer {
	flex-grow: 1;
	background-color: #f2f2f2;
}

.uiHeader {
	height: 25%;
	width: 100%;
	background-color: transparent; 
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uiContent {
	flex-grow: 1;
	overflow-y: auto; 
	background-color: #ECF0F1; 
	padding: 20px;
	box-sizing: border-box;
}

.uiFooter {
	height: 50px;
	width: 100%;
	background-color: #8E44AD; 
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uiNavOverlay {
	position: absolute;
	z-index: 9999;
	max-width: 100% !important;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 60%);
}

.uiNavBar {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #343a40 !important;
	width: 99.9%;
	will-change: height;
	box-shadow: 0px 0px 6px 4px #000000, inset 0px 0px 3px -1px #000000;
	z-index: 99998;
	color: #fff;
	flex-direction: column;
	align-content: center;
	border-block: 0px solid black;
	border-inline: 0px solid black;
	overflow: hidden;
/*	max-width: 430px;*/
}

	.uiBtnNavMenu {
		width: 45px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center center;
	}

.custom-input, .custom-button {
	width: 100%;
	padding: 6px 8px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
	font-size: 24px;
	transition: transform 750ms ease-in-out;
	transform: scale(0.95);
	float: left;
	z-index: 9998;
	position: relative;
}

	.custom-input.inputSelected {
		transition: transform 750ms ease-in-out;
		transform: scale(1.05);
	}

	.custom-input.emailPresent {
		box-shadow: inset 0px 0px 3px 0px red, 0px 0px 3px 0px red;
		outline: 1px solid red;
		outline-offset: -1px;
		z-index: 99999;
	}

	.custom-button {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.custom-button:hover {
		background-color: #45a049;
	}

/*.full-height {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
	overflow: hidden;
	background: linear-gradient(360deg, #dca370, transparent 65%);
		max-width: 430px;
	width: 100%;	
	border: 2px solid black;
}*/

.full-height {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
	overflow: hidden;
	background: transparent;
}

.expandable-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden; 
	height: 100%;
}

.ogDataContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;	
}

.nested-top {
	height: 40%;
	margin-top: 15px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.nested-bottom {
	flex-grow: 1;
	overflow-y: hidden;
	padding: 0px 10px;
}

.bottom-fixed {
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e0ac7e;
	box-shadow: 0 0px 2px 3px #0000009e;
	flex-direction: column;
	position: relative;
	padding: 12px;
	font-size: 18px;
	height: 52px;
	overflow-y: hidden;
}

.uiErrSelect {
	font-weight: 700;
	text-shadow: 1px 1px 4px red, -1px -1px 4px red, 1px -1px 4px red, -1px 1px 4px red;
}

#uiLoginTextContainer {
	display: flex;
	width: 100%;
	align-items: center;
	flex-direction: column;
}

#uiLoginTextContainer span {
	font-size: 18px;
}

.uiRegInputContainer {
	width: 100%;
	height: 100%;
	padding: 10px;
	display: inline-flex;
	flex-direction: column;
	row-gap: 15px;
}

.uiPopupBG {
	display: none;
	position: absolute;
	z-index: 9999;
	max-width: 100% !important;
	padding: 0px 20px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(0 0 0 / 60%);
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
}

.uiSecuritySelPopup {
	background-color: #2c3e50;
	border-radius: 8px;
	padding: 10px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

.uiSecuritySelContainer {
	background-color: #3d5a80;
	padding: 6px 0px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
	row-gap: 2px;
	flex-wrap: wrap;
}

.uiSecurityItem {
	display: block;
	padding: 4px;
	clear: both;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	border: 0;
	font-size: 20px;
}

.uiSecurityItemSep {
	background: radial-gradient(circle at 100% 100%, #00000000 0, #00000000 6px, transparent 6px) 0% 0%/8px 8px no-repeat, radial-gradient(circle at 0 100%, rgb(44 63 84) 0, #00000000 6px, transparent 6px) 100% 0%/8px 8px no-repeat, radial-gradient(circle at 100% 0, #00000000 0, #00000000 6px, transparent 6px) 0% 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #00000000 0, #00000000 6px, transparent 6px) 100% 100%/8px 8px no-repeat, linear-gradient(#00000000, #00000000) 50% 50%/calc(100% - 4px) calc(100% - 16px) no-repeat, linear-gradient(#00000000, #00000000) 50% 50%/calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(90deg, rgba(72,171,224,0) 2%, #f5761ea1 32%, #f5761ea1 68%, transparent 98%);
	border-radius: 8px;
	padding: 1px;
	box-sizing: border-box;
}

.uiSecurityModalBackG {
	position: absolute;
	height: 100%;
	width: 100%;
	display: none;
	background-color: #00000099;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px 20px;
	z-index: 99999;
	top: 0;
	left: 0;
}

.uiSecuritySelBox {
	width: 100%;
	position: relative;
	transform: scale(0.95);
	background-color: white;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 6px 8px;
	font-size: 24px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: transform 1s ease-in-out;
}

.uiSecuritySelBox:hover {
	transition: transform 1s ease-in-out;
	transform: scale(1.05);
}

.uiContentLoader {
	height: 100%;
	width: 100%;
}

/*.uiLoginPopup {
	background-color: #2c3e50;
	border-radius: 12px;
	padding: 14px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}*/

.uiLoginPopup {
	background-color: #2c3e50;
	border-radius: 12px;
	padding: 14px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	box-shadow: 0px 0px 4px 2px #ffffff57;
	outline: 2px solid #c7c7c757;
	outline-offset: -1px;
}

.uiLoginContainer {
	background-color: #3d5a80;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 10px;
	align-items: stretch;
	border-radius: 8px;
}

.uiLoginModalBackG {
	position: absolute;
	height: 100%;
	width: 100%;
	display: none;
	background-color: #00000099;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px 10px;
	z-index: 99998;
	top: 0;
	left: 0;
}

/*.uiBtnLogin {
	font-size: 18px;
	border: none;
	border-radius: 8px;
	padding: 8px;
	background: #F5761Ea1;
	color: #fff;
	font-weight: 600;
	width: 100%;
	box-shadow: 0 0 2px 2px #353535;
}*/

.uiBtnLogin {
	font-size: 18px;
	border: none;
	border-radius: 8px;
	padding: 8px;
	background: #f5802f;
	color: #fff;
	font-weight: 600;
	width: 100%;
	box-shadow: 0 0 2px 2px #353535;
}

.uiBtnLogin.isPressed {
	background: #944813;
	box-shadow: 0 0 2px 2px #a8a8a8;
}

.uiTxtLogin {
	width: 100%;
	padding: 6px 8px;
	box-sizing: border-box;
	border-radius: 8px;
	outline: none;
	font-size: 24px;
	float: left;
	box-shadow: 0px 0px 4px 0px #000000;
}

/*.lnkInitLogin {
	font-size: 30px;
	stroke: #488dca;
	stroke-width: 1.7px;
	stroke-linejoin: bevel;
	animation: 2s pulsatePos infinite;
	font-weight: 900;
	fill: #f5791e !important;
}*/

.uiImgLogo {
	-webkit-animation: mover 2s infinite alternate;
	animation: mover 1s infinite alternate;
}

/*.uiBtnPortalAccess {
	background-color: #f5761e;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}*/

.uiBtnPortalAccess {
	background-color: #8b98a0;
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	height: 100%;
	font-size: 30px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-shadow: 2px 2px 2px #0f0c0a7d, -2px -2px 2px #0f0c0a7d, 2px -2px 2px #0f0c0a7d, -2px 2px 3px #0f0c0a7d;
	/*box-shadow: 0 0 7px 0px black;*/
	font-weight: 700;
	-webkit-animation: btnPortalGlow 1s infinite alternate;
	animation: btnPortalGlow 1s infinite alternate;
}

/*
.uiPortalAccessContainer {
	backdrop-filter: blur(4px) saturate(153%);
	-webkit-backdrop-filter: blur(4px) saturate(153%);
	background-color: rgba(93, 108, 119, 0.62);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.125);
	backdrop-filter: blur(4px) saturate(153%);
	-webkit-backdrop-filter: blur(4px) saturate(153%);
	background-color: rgba(93, 108, 119, 0.62);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.125);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	height: 80%;
	}*/

/*.uiPortalAccessContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	padding: 40px 20px;
	justify-content: space-around;
}*/

.uiPortalAccessContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	padding: 40px 20px;
	justify-content: space-around;
}

.uiEnrollmentAccessContainer {
	width: 100%;
	height: 100%;
}

.lnkInitLogin {
	font-size: 30px;
/*	animation: 2s pulsatePos2 infinite;
	-webkit-animation: 2s pulsatePos2 infinite;*/
	font-weight: 900;
	fill: #ffffff !important;
	/*filter: drop-shadow(-1px -1px 2px #f5761ea1) drop-shadow(1px 1px 2px #f5761ea1) drop-shadow(1px -1px 2px #f5761ea1) drop-shadow(-1px 1px 2px #f5761ea1);
	-webkit-filter: drop-shadow(-1px -1px 2px #f5761ea1) drop-shadow(1px 1px 2px #f5761ea1) drop-shadow(1px -1px 2px #f5761ea1) drop-shadow(-1px 1px 2px #f5761ea1);*/
	letter-spacing: 4px;
}

.svg-wrapper {
	-webkit-filter: drop-shadow(-1px -1px 2px #f5761ea1) drop-shadow(1px 1px 2px #f5761ea1) drop-shadow(1px -1px 2px #f5761ea1) drop-shadow(-1px 1px 2px #f5761ea1);
	filter: drop-shadow(-1px -1px 2px #f5761ea1) drop-shadow(1px 1px 2px #f5761ea1) drop-shadow(1px -1px 2px #f5761ea1) drop-shadow(-1px 1px 2px #f5761ea1);
	animation: 2s pulsatePos2 infinite;
	-webkit-animation: 2s pulsatePos2 infinite;
}

.uiNavigate {
	text-align: center;
	width: 100%;
	color: #000000;
	display: inline-flex;
	position: relative;
	padding: 12px 0px 12px 4px;
	caret-color: transparent;
}

	.uiNavigate svg {
		fill: #f5791e !important;
		height: 56px;
		overflow: visible;		
	}

.uiNavTitle {
	font-family: 'Adumu';
	animation: 2s pulsateTitle infinite;
	width: 100% !important;
	display: inline-flex;
	justify-content: space-between;
	/*    text-shadow: #488dca -2px -2px 2px, #488dca 2px -2px 2px, #488dca -2px 2px 2px, #488dca 2px 2px 2px; */
	font-size: 50px;
	/* height: 62px; */
	stroke-width: 4px;
	stroke: #488dca;
	stroke-opacity: 0.75;
}

.uiNavLogo {
	width: 55px;
	height: 50px;
	animation: 2s pulsateImage infinite;
	-webkit-filter: drop-shadow(0px 0px 6px #488dca);
	filter: drop-shadow(0px 0px 6px #488dca);
}

#collapsibleNavbar {
	z-index: 9999;
	padding: 0px 8px;
	position: relative;
	height: 0px;
	overflow: hidden;
	transition: height 0.5s ease-in-out;
	width: 100%;
}

/*.uiNavBar_Container {
	position: relative;
}*/

.openMenu {
	height: 118px !important;
	transition: height 0.5s ease-in-out;
}

.expandMenu {
	height: 264px !important;
	transition: height 0.5s ease-in-out;
}

.expandMenu_User {
	height: 264px !important;
	transition: height 0.5s ease-in-out;
}

/*.expandMenu_User {
	height: 212px !important;
	transition: height 0.5s ease-in-out;
}*/

.uiMenuDropSep {
	border-top: 2px solid #a1a1a1 !important;
	padding: 8px 0px 0px 0px;
	height: 0;
	margin: var(--bs-dropdown-divider-margin-y) 0;
	overflow: hidden;
	border-top: 1px solid var(--bs-dropdown-divider-bg);
	opacity: 1;
}

.uiNavSelectSport {
	display: inline-flex;
	justify-content: flex-end;
	width: 100%;
	flex-direction: row;
}

.uiDropMenuItems {
	font-size: 18px;
	padding: 10px 0px !important;
	font-weight: 500;
	background-color: #ffffff;
}

.uiDropDown {
	position: relative;
	color: rgb(33, 37, 41);
	text-align: left;
	list-style: none;
	background-color: rgb(255, 255, 255);
	background-clip: padding-box;
	border-radius: 6px;
	overflow: hidden;
	height: 0px;
	transition: height 0.5s ease-in-out;
}

.uiDropDownMenu {
	color: rgb(33, 37, 41);
	text-align: left;
	list-style: none;
	/*background-color: rgb(93 108 119 / 57%);*/
	background-clip: padding-box;
/*	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;*/
	overflow: hidden;
	box-shadow: inset 40px 0 40px 20px #ffffff, inset -40px 0 40px 20px #ffffff;
	transition: height 0.5s ease-in-out;
}

	.uiDropDownMenu.isOgPlaybook {
		position: absolute;
		left: 0;
		top: 0;
	}

.expandedDropDown {
	height: 148px !important;
	transition: height 0.5s ease-in-out;
}

.expandedDropDown_User {
	height: 148px !important;
	transition: height 0.5s ease-in-out;
}

/*.expandedDropDown_User {
	height: 96px !important;
	transition: height 0.5s ease-in-out;
}*/

/*.expandedDropDown {
	height: 94px !important;
	transition: height 0.5s ease-in-out;
}*/

.uiDropDir {
	white-space: nowrap;
}

/*	.uiDropDir::after {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 0.255em;
		vertical-align: 0.15em !important;
		content: "";
		border-top: 0.45em solid !important;
		border-right: 0.45em solid transparent !important;
		border-bottom: 0;
		border-left: 0.45em solid transparent !important;
		transform: rotate(0deg);
		transition: transform 0.4s 0ms ease-in-out;
	}

	.uiDropDir.isExpand::after {
		transform: rotateX(180deg);
		transition: transform 0.7s 75ms ease-in-out;
	}*/

	.uiDropDir::after {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 0.255em;
		vertical-align: 0.15em !important;
		content: "";
		border-top: 0.45em solid !important;
		border-right: 0.45em solid transparent !important;
		border-bottom: 0;
		border-left: 0.45em solid transparent !important;
		transform: rotateX(180deg);
		transition: transform 0.5s ease-in-out;
	}

	.uiDropDir.isExpand::after {
		transform: rotateX(0deg);
		transition: transform 0.5s ease-in-out;
	}

.uiDropDirOgPlaybook::before {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.255em;
	vertical-align: 0.15em !important;
	content: "";
	border-top: 0.45em solid !important;
	border-right: 0.45em solid transparent !important;
	border-bottom: 0;
	border-left: 0.45em solid transparent !important;
	transform: rotateX(180deg);
	transition: transform 0.5s ease-in-out;
}

.uiDropDirOgPlaybook.isExpand::before {
	transform: rotateX(0deg);
	transition: transform 0.5s ease-in-out;
}

#imageSlider img {
	display: none;
	width: 100%; /* Adjust the width as needed */
	height: auto;
}

	#imageSlider img.active {
		display: block;
	}

.OgPay_OutcomeContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

@font-face {
	font-family: "Adumu";
	src: url('../Fonts/Adumu.ttf');
}

.OgPay_Text {
	font-family: 'Adumu';
	width: 100%;
	font-size: 60px;
	height: 120px;
}

	.OgPay_TextContent {
		stroke-width: 2;		
		font-size: 42px;
	}

		.OgPay_TextContent.payApproved {
			stroke: #F5761E;
			fill: #498Ec9;
			animation: aniApproved 5s infinite alternate;
			-webkit-animation: aniApproved 5s infinite alternate;
		}

.bgChanger {
	width: 100%;
	filter: opacity(1);
	transition: filter 0.5s ease-in-out;
	z-index: 999999;
}

	#OgPay_StatusImg {
		max-height: 195px;
	}

.uiTermsCheckContainer {
	display: inline-flex;
	justify-content: space-between;
	flex-direction: row;
	width: 100%;
	transform: scale(0.95);
	align-items: center;
	font-size: 18px;
	letter-spacing: -0.8px;
	font-weight: 500;
	line-height: 24px;
	text-wrap: balance;
}

.uiChkTermsContainer {
	height: 30px;
	width: 30px;
}

.uiChkTermsContainer .uiChkTermsConditions {
	--bg: #498ec9;
	--brdr-actv: #0d6efd;
	width: 30px;
	--brdr-hovr: #bbc1e1;
	--dur: calc((var(--size, 2)/2) * 0.6s);
	display: inline-block;
	position: relative;
}

	.uiChkTermsContainer .uiChkTermsConditions:after {
		content: "";
		width: 100%;
		padding-top: 100%;
		display: block;
	}

	.uiChkTermsContainer .uiChkTermsConditions > * {
		position: absolute;
	}

	.uiChkTermsContainer .uiChkTermsConditions input {
		-webkit-appearance: none;
		-moz-appearance: none;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		background-color: var(--bg);
		border-radius: calc(var(--size, 1) * 4px);
		border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
		color: var(--newBrdrClr, var(--brdr));
		outline: none;
		margin: 0;
		padding: 0;
		transition: all calc(var(--dur) / 3) linear;
	}

		.uiChkTermsContainer .uiChkTermsConditions input:hover,
		.uiChkTermsContainer .uiChkTermsConditions input:checked {
			--newBrdr: calc(var(--size, 1) * 2);
		}

		.uiChkTermsContainer .uiChkTermsConditions input:hover {
			--newBrdrClr: var(--brdr-hovr);
		}

		.uiChkTermsContainer .uiChkTermsConditions input:checked {
			--newBrdrClr: var(--brdr-actv);
			transition-delay: calc(var(--dur) /1.3);
		}

			.uiChkTermsContainer .uiChkTermsConditions input:checked + svg {
				--dashArray: 16 93;
				--dashOffset: 109;
			}

	.uiChkTermsContainer .uiChkTermsConditions svg {
		fill: none;
		left: 0;
		pointer-events: none;
		stroke: #ff0000;
		stroke-dasharray: var(--dashArray, 93);
		stroke-dashoffset: var(--dashOffset, 94);
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 4px;
		top: 0;
		transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
	}

	.uiChkTermsContainer .uiChkTermsConditions svg,
	.uiChkTermsContainer .uiChkTermsConditions input {
		display: block;
		height: 30px;
		width: 30px;
	}

#lnkShowToS {
	color: #F5761E;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-style: double;
	text-decoration-thickness: 1.5px;
	text-shadow: #000000 -3px -2px 6px, #000000 3px -2px 6px, #000000 -1px 0px 6px, #000000 1px 0px 6px;
}

.EmailExistsContainer {
	position: relative;
	bottom: 0;
	padding: 6px 0px;
	font-size: 16px;
	transform: scale(0.95);
	transition: all 750ms ease-in-out;
}

	.EmailExistsContainer.focusSet {
		transform: scale(1.05);
		transition: all 750ms ease-in-out;
	}

.EmailExistsSel::before {
	width: 100%;
	background: #d67171;
	box-shadow: 0px 2px 4px 1.7px #8c1d1d;
	transition: all 750ms 0s;
	left: 0%;
}

.EmailExistsSel::after {
	content: "This Email has already been used to Register";
	height: 0px;
	overflow: hidden;
	display: block;
	transition: all 750ms ease-in-out;
	width: 100%;
	font-size: 16px;
	transform: scale(0.95);
	text-align: center;
}

.EmailExistsSel.showNotif::after {
	height: 30px;
	transition: all 750ms ease-in-out 750ms;
	/* transform: scale(1.05); */
}

.pullToRefreshIndicator {
	position: absolute;
	top: -35px;
	left: 0;
	right: 0;
	text-align: center;
	height: 30px;
	background-color: #ffffff;
	color: #333;
	transition: top 0.3s;
	z-index: 99999;
	font-size: 18px;
	font-family: Trebuchet MS;
	font-weight: 700;
	letter-spacing: -1px;
}

	.pullToRefreshIndicator.resetTop {
		top: -35px !important;
		transition: top 0.3s;
		transition-delay: 250ms;
	}

.pullToRefreshContainer {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #FFFFFF;
}

.pullToRefreshContent {
	position: relative;
	font-size: 25px;
	font-weight: bold;
	color: #498EC9;
	letter-spacing: 1px;
	z-index: 1;
	text-shadow: -1px -1px 1px #000000a1, 1px 1px 1px #000000a1, -1px 1px 1px #000000a1, 1px -1px 1px #000000a1;
}

	.pullToRefreshContent:before,
	.pullToRefreshContent:after {
		display: block;
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.8;
	}

	.pullToRefreshContent:before {
		animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
		color: #498EC9;
		z-index: -1;
	}

	.pullToRefreshContent:after {
		animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
		color: #F5761E;
		z-index: -2;
	}

.DoPickThreeContainer {
	position: relative;
	top: 2px;
	left: 0;
	right: 0;
	text-align: center;
	height: 30px;
	background-color: #ffffff;
	color: #333;
	transition: top 0.3s;
	z-index: 99999;
	font-size: 18px;
	font-family: Trebuchet MS;
	font-weight: 700;
	letter-spacing: -1px;
}

.RespTextContainer {
	width: 100%;
	overflow: visible !important;
}

.OgAutoPick_SaveContent {
	box-shadow: 0 0 4px 0px #000000;
	outline: 3px solid #000000;
	outline-offset: -2px;
	box-sizing: border-box;
	border-collapse: separate;
	width: 100%;
	backdrop-filter: blur(4px) saturate(111%);
	-webkit-backdrop-filter: blur(4px) saturate(111%);
	background-color: #3D5A80e0;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.125);
	height: 378px;
	max-height: 378px;
	z-index: 10002;
	position: relative;
	overflow: hidden;
	overscroll-behavior-y: contain;
	top: -120%;
}

.OgAutoPick_SaveContainer {
	background-clip: padding-box;
	outline: 0;
	z-index: 999999;
	position: relative;
	-ms-flex-direction: column;
	flex-direction: column;
	margin: auto auto;
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: center;
	left: 0px;
	border-radius: 12px;
}

.OgAutoPickSave_DataContainer {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background-color: #7084a1;
	padding: 0px 0px 6px 0px;
	border-radius: 12px;
	text-shadow: -2px -2px 4px #34495E, 1px 2px 4px #34495E, 2px -2px 4px #34495E, -1px 3px 4px #34495E, -2px -1px 4px #34495E, 1px 2px 4px #34495E, 2px -1px 4px #34495E, -1px 3px 4px #34495E;
	row-gap: 0px;
	overflow: hidden;
}

.OgAutoPickSave_TeamContainer {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: 4px 8px 0px 8px;
	row-gap: 6px;
	border-top: 1px solid #3b3b3b;
}

.OgAutoPickSave_TeamContent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.OgAutoPickSave_TeamName {
	flex-grow: 1;
	font-size: 20px;
	padding: 2px 0px;
	display: inline-flex;
	/*height: 32px;*/
	align-items: center;
}

.OgAutoPickSave_ScoreContainer {
	width: 32px;
	display: inline-flex;
	align-items: center;
	/*height: 32px;*/
	justify-content: flex-end;
	font-size: 22px;
}

.OgAutoPickSave_DataFormat {
	line-height: 0.95;
}

.OgAutoPickSave_GameContent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 18px;
}

	.OgAutoPickSave_GameContent.showStartTime {
		justify-content: center;
	}

.OgAutoPickSave_OutContainer {
	font-size: 18px;
	/*height: 22px;*/
	display: inline-flex;
	align-items: center;
	color: #fff;
}

.OgAutoPickSave_InnContainer {
	font-size: 18px;
	/*height: 25px;*/
	display: inline-flex;
	align-items: center;
	color: #fff;
}

.OgAutoPickSave_Sep {
	background-color: transparent;
}

	.OgAutoPickSave_Sep::after {
		content: '';
		background: radial-gradient(circle at 100% 100%, #00000000 0, #00000000 6px, transparent 6px) 0% 0% / 8px 8px no-repeat, radial-gradient(circle at 0 100%, rgb(44 63 84) 0, #00000000 6px, transparent 6px) 100% 0% / 8px 8px no-repeat, radial-gradient(circle at 100% 0, #00000000 0, #00000000 6px, transparent 6px) 0% 100% / 8px 8px no-repeat, radial-gradient(circle at 0 0, #00000000 0, #00000000 6px, transparent 6px) 100% 100% / 8px 8px no-repeat, linear-gradient(#00000000, #00000000) 50% 50% / calc(100% - 3px) calc(100% - 16px) no-repeat, linear-gradient(#00000000, #00000000) 50% 50% / calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(90deg, rgba(72, 171, 224, 0) 1%, #34495E 22%, #34495E 78%, transparent 99%);
		border-radius: 8px;
		padding: 2px;
		box-sizing: border-box;
		width: 100%;
		display: block;
		margin: 6px 0px 0px 0px;
	}

.OgAutoPickSave_SelContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: none;
	padding: 6px 0px;
	font-size: 16px;
	flex-grow: 1;
	width: 100%;
	background-color: #f5761eff;
	line-height: 1;
	border-bottom: 2px solid #3b3b3b;
}

.OgAutoPickSave_SelContent {
	filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 2px black);
}

.OgAutoPickSave_BetOutcomeContainer {
	width: 100%;
	margin-bottom: 6px;
	justify-content: center;
	align-items: center;
	padding: 2px 0px;
	display: none;
}

	.OgAutoPickSave_BetOutcomeContainer.showOutcome {
		display: inline-flex;
	}

	.OgAutoPickSave_BetOutcomeContainer.resultWon {
		background: linear-gradient(90deg, #41b97300 0%, #41b973 10%, #41b973 90%, #41b97300 100%);
	}

	.OgAutoPickSave_BetOutcomeContainer.resultLost {
		background: linear-gradient(90deg, #e85b5b00 0%, #e85b5b 10%, #e85b5b 90%, #e85b5b00 100%);
	}

	.OgAutoPickSave_BetOutcomeContent {
		font-size: 20px;
		font-weight: 700;
		filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 2px black);
		letter-spacing: 2px;
	}

.OgAutoPickSave_ViewDetails {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-grow: 1;
	padding: 0px 8px;
	align-items: center;
}

.OgAutoPickSave_ViewDetailsBtn {
	filter: drop-shadow(-0.5px -0.5px 1px #ffffff) drop-shadow(0.5px 0.5px 1px #ffffff) drop-shadow(0px 0.5px 1px #ffffff) drop-shadow(0.5px 0.5px 1px #ffffff);
}

.OgApOptsBackDrop {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #00000099;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px 8px;
	z-index: 999999;
	top: 0;
	left: 0
}

.OgApOpt_ArrangeSel {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.OgApOpt_TypeContainer {
	border-radius: 12px;
	padding: 8px 8px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	background-color: #34495E;
}

.OgApOpt_TypeContent {
	background-color: #3d5a80;
	display: inline-flex;
	flex-direction: column;
	align-content: stretch;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
	justify-content: center;
	max-height: 78px;
}


.OgApOpt_Window {
	background-color: #1e1e1e;
	border-radius: 12px;
	padding: 8px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	box-shadow: 0px 0px 2px 2px #d3d3d3;
	outline: 2px solid #c7c7c757;
	outline-offset: -1px;
}

.OgApOpt_Content {
	background-color: #575757;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	border-radius: 8px;
}

#OgApOptHeader {
	text-align: center;
	display: flex;
	flex-direction: column;
}

.OgApOpt_Sep {
	background-color: transparent;
}

	.OgApOpt_Sep::after {
		content: '';
		background: radial-gradient(circle at 100% 100%, #00000000 0, #00000000 6px, transparent 6px) 0% 0%/8px 8px no-repeat, radial-gradient(circle at 0 100%, rgb(44 63 84) 0, #00000000 6px, transparent 6px) 100% 0%/8px 8px no-repeat, radial-gradient(circle at 100% 0, #00000000 0, #00000000 6px, transparent 6px) 0% 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #00000000 0, #00000000 6px, transparent 6px) 100% 100%/8px 8px no-repeat, linear-gradient(#00000000, #00000000) 50% 50%/calc(100% - 4px) calc(100% - 16px) no-repeat, linear-gradient(#00000000, #00000000) 50% 50%/calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(90deg, rgba(72,171,224,0) 2%, #f5761ea1 32%, #f5761ea1 68%, transparent 98%);
		border-radius: 8px;
		padding: 2px;
		box-sizing: border-box;
		width: 100%;
		display: block;
		margin: 6px 0px 6px 0px;
	}

.OgApOpt_Selection {
	display: block;
	padding: 4px;
	clear: both;
	font-weight: 500;
	color: #2f2f2f;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	border: 0;
	font-size: 18px;
	border-bottom: 1px solid #fff;
	background-color: #f5761e8f;
	transition: all 0.25s 0s linear;
	flex-grow: 1;
}

	.OgApOpt_Selection.selBottom {
		border-top: 1px solid #fff;
	}

	.OgApOpt_Selection.OptSelected {
		background-color: #F5761E;
		transition: all 0.25s 0s linear;
		color: #fff;
		padding: 8px 4px;
		font-size: 20px;
		font-weight: 700;
	}

.OgApOpt_BtnSave {
	background: #498EC9;
	font-size: 18px;
	border: none;
	border-radius: 8px;
	padding: 8px;
	color: #fff;
	font-weight: 600;
	width: 100%;
	box-shadow: 0 0 2px 2px #353535;
}