﻿HTML, BODY {
	PADDING: 0pt;
	MARGIN: 0pt;
	COLOR: rebeccapurple;
	FONT-WEIGHT: normal;
	/*FONT-SIZE: max(12pt,1.4vw);*/
	font-size:13pt;
	FONT-FAMILY: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	TEXT-DECORATION: none;
	background-color: white;
	height: 100%;
	width: 100%;
}

.groovesell-embed-border-solid {
	max-width: 900px !important;
}

/*=================================================================*/
/* Full Screen Container */
#FullScreenDiv {
	position: relative;
	/*height: 100%;*/
	display: grid;
	justify-content: center;
	background-color: white;
	margin: 0px !important;
	padding: 0px !important;
	z-index: 0;
	min-width: 740px;
	align-items: start;
	align-content: flex-start;
}
/*=================================================================*/


/*=================================================================*/
/* Header  */
/*rebeccapurple;*/
#TopHeader {
	width: -webkit-fill-available;
	width: -moz-available;
	/*background-color: azure;*/
	background-color: white;
	position: fixed;
	margin: 0px !important;
	padding: 5px !important;
	z-index: 2000;
	color: white;
	border-bottom:2px solid green;
}

.HeaderLogo{
	width:auto;
}

.HeaderLogo:hover {
	background-color: lightcyan;
	border-radius:60px;
}


#TitleDiv {
	display: inline-flex;
	align-items: center;
	margin: 0px;
	/*padding: 0px 20px 0px 20px;*/
	padding: 0px;
	background-color: white;
	cursor: pointer;
	border-radius: 15px;
	min-width: 580px;
	/*border: 1px solid red;*/
}

#ProfileDiv {
	border: 1px dotted /*#ACFEAC;*/ gray;
	color: rebeccapurple;
	background-color: honeydew;
	border-radius: 15px;
	min-width: 160px;
	/*	padding: 10px 15px 10px 15px;
	height: fit-content;
	;
	float: right;
	margin-left:auto;*/
}

/* Main Menu */
#MenuDiv {
	margin: 0px !important;
	text-align: center;
	place-content: center;
	z-index: 5000;
	display: inline-flex;
	max-height: fit-content;
	padding: 3px 15px 3px 15px !important;
	padding: 3px !important;
	width: 680px;
	border-radius: 15px;
	border: 1px dotted rebeccapurple;
	align-content: center;
	background-color: honeydew;
/*	max-width: max(fit-content,570px);*/
	height: 106px; /*necessary for collapsing the hovering divs*/
}

/*=================================================================*/
/* Main Page Container of the platform. Wraps ads and contents */
#PageContentDiv {
	border: 0px dashed #ACFEAC;
	position: relative;
	z-index: 1900;
	display: inline-flex;
	/*
	max-width: fit-content;
	align-content: center;
	align-content: center;
	margin-bottom: 60px;
	background-color: white;
*/
	border-radius: 8px;
	align-self: center;
	padding: 0px;
	margin: 10px;
	margin-bottom: 0px;
	padding-bottom: 150px;
	top: 120px;
	align-items: flex-start;
}
/*=================================================================*/

@media only screen and (min-width: 1200px) {
	#PageContentDiv {
		/*top: 130px;*/
	}
}

@media only screen and (max-width: 1415px) {
	#PageContentDiv {
		/*top: 240px;*/
	}
}


h1 {
	z-index: 2001;
	white-space: nowrap;
	color: rebeccapurple;
	font-size: min(1.5em,3.8vw);

	margin: 0;
	line-height: 1.2;
}

h2 {
	text-align: left;
	padding: 0px;
	margin: 5px;
	/*white-space: nowrap;*/
	color: limegreen;
	font-size: min(1.1em,3.0vw);
	line-height: 1.2;
}

	h2.Title {
		font-size: min(max(18pt,1.4em),1.5vw);
		font-family: Verdana, Geneva, Tahoma, sans-serif !important;
	}

h3 {
	text-align: center;
	font-size: 20pt;
	padding: 0px;
	margin: 5px;
}

h4 {
	font-size: 15pt;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 2px;
	margin: 2px;
	vertical-align: middle;
	font-weight: bold;
	white-space:nowrap;
}

h5 {
	font-size: 12.5pt;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	font-weight: bold;
}

.HeaderLink {
	text-decoration: none;
	padding-left: 10px;
	width: 500px;
}

/*=================================================================*/


/*=================================================================*/
/* Page Ads */
#Hirdeto {
	border-radius: 10px;
	border: 2px dashed darkred;
	margin: 10px;
	/*margin-bottom: 10px;*/
	text-align: center;
	background-color: honeydew;
	position: relative;
	/*top: 270px;*/
	z-index: 1000;
	display: grid;
	height: auto;
}

.LeftHirdeto {
	background-color: honeydew;
	display: none;
	border-radius: 10px;
	margin: 10px;
}

.RightHirdeto {
	background-color: honeydew;
	border-radius: 10px;
	margin: 10px;
}

@media only screen and (min-width: 1500px) {
	div.LeftHirdeto {
		display: block;
	}

	div.RightHirdeto {
		display: block;
	}
}

.HirdetoImg {
	z-index: 15000;
	display: block;
}

@media only screen and (max-width: 1200px) {
	div.RightHirdeto {
		display: none;
	}
}

@media only screen and (max-width: 1000px) {
	div.LeftHirdeto {
		display: none;
	}
}

/*=================================================================*/


/*=================================================================*/

#PoolMenuDiv {
	width: max-content;
	margin: 15px;
	padding: 30px;
	background-color: honeydew;
	border-radius: 10px;
}

	#PoolMenuDiv h2 {
		font-size: 2vw;
		font-weight: bold;
	}

#TopMenu {
	display: inline-flex;
	margin: 0px;
	padding: 0px;
	height: 105px !important;
	max-height:fit-content;
}

	#TopMenu li {
		list-style-type: none;
		line-height: 0px;
		padding-inline-start: 0px;
		padding: 0px;
		margin: 0px;
	}

.TopMenuItem {
	text-decoration: none;
	cursor: pointer;
	padding: 2px;
	margin: 0px;
	display: grid;
	max-height: fit-content;
	background-color: white;
}


.SubMenu {
	margin: 0px;
	padding: 0px;
}



.PoolMenuItem { /* This is for the active pool menu-items */
	margin: 5px;
	padding: 7px;
	display: block;
	border: 1px solid green;
	border-radius: 4px;
	color: rebeccapurple;
	cursor: pointer;
	background-color: azure;
	font-weight: bold;
}

	.PoolMenuItem:hover {
		background-color: palegreen;
		text-decoration: none;
		align-content: center;
		text-align: center;
	}

	.PoolMenuItem a {
		align-content: center;
		align-items: center;
		text-align: center;
		text-decoration: none;
		display: block;
	}


/* -------------------------- */
/* Images Contained in the Main Menu with hover attribute */
/* -------------------------- */
.imgmenu {
	border-radius: 20px;
	border: 2px solid /*#ACFEAC;*/ white;
	height: auto;
	min-height: auto;
	max-height: auto;
	padding: 3px;
	cursor: pointer;
	margin: 0px;
}

	.imgmenu:hover {
		border-radius: 20px;
		border: 4px solid rebeccapurple;
		padding: 1px;
		margin: 0px;
	}

	.imgmenu span {
		max-height: 100px;
	}
/* -------------------------- */

/*=================================================================*/


#MainContentDiv {
	padding: 0px;
	margin: 10px;
	min-width: 700px;
	max-width: 1200px;
	display: inline-grid;
	border: 0px dotted red;
}



/*=================================================================*/
/* Footer */
#FooterDiv {
	margin: 0px;
	margin-top: 10px;
	position: fixed;
	bottom: 0px;
	height: auto;
	width: 100%;
	background-color: #ACFEAC;
	z-index: 3000;
	border: 0px solid red;
	max-height: fit-content !important;
	text-align: center;
	padding: 0px;
}

#FooterBuffer {
	border: 0px dashed red;
	margin: 2px;
	width: 90%;
	padding: 0px;
	max-width: contain;
}

#FooterContentDiv {
	padding: 0px;
	margin: 0px;
	display: inline-flex;
	color: brown;
	padding: 5px;
	min-height: fit-content;
	max-height: fit-content !important;
}

.FooterMenu {
	font-size: 8pt;
	font-weight: bold;
	padding: 7px;
	place-self: center;
	margin: 0px;
}
/*=================================================================*/


/*=================================================================*/
/* BracketDiv - Floating centered to viewport*/
/*=================================================================*/
.BracketTable {
	width: 200px;
	position: absolute;
	z-index: auto;
	border:2px double !important;
}

#BracketDiv {
	position: relative;
	width: 1200px;
	height: 800px;
	background-color: whitesmoke;
	border: 4px solid Silver;
}

table.BracketTable td{
	padding: 2px !important;
}

/*=================================================================*/
/* Login Div - Floating centered to viewport*/
/*=================================================================*/
#LoginDiv {
	border: 3px double rebeccapurple;
	max-height: fit-content !important;
	min-width: fit-content !important;
	background-color: seashell;
	padding: 20px;
	border-radius: 20px;

/*
	z-index: 30000;
	height: fit-content;
	position: fixed;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
*/
}

	#LoginDiv input#email input#login_pw {
		font-size: 1em;
		background-image: none !important;
	}


/*=================================================================*/



/*=================================================================*/
/* Main Menu Div - Floating centered to viewport*/
/*=================================================================*/
#MainMenuDiv {
	position: fixed;
	border: 10px double honeydew;
	z-index: 5000;
	top: 50%;
	left: 50%;
	max-height: fit-content !important;
	background-color: rebeccapurple;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 50px;
	padding-top: 20px !important;
	border-radius: 20px;
}

	#MainMenuDiv h2 {
		font-size: 24pt;
		font-weight: bold;
		color: white;
	}
/*=================================================================*/


.RoundSelectDiv {
	padding: 6px;
	margin: 0px;
	border: 1px dotted silver;
	font-size: 12pt;
	font-weight: bold;
	border-radius: 4px;
	min-width:20px;
	text-align:center;
}

	.RoundSelectDiv:hover {
		background-color:honeydew;
		color:rebeccapurple;
		cursor:pointer
	}

.CurrentRound {
	background-color: lightyellow;
	color: rebeccapurple;
}

.SelectedRound {
	background-color: rebeccapurple !important;
	color: white;
}


.FormContainer {
	width: 690px;
	border: 0px dotted pink;
	padding: 0;
	margin: 0;
}

.FormSectionDiv {
	background-color: honeydew;
	border: 1px dotted rebeccapurple;
	margin-bottom: 20px;
	border-radius: 20px;
	width:650px;
}

.FormInputDiv {
	margin: 5px !important;
	padding: 0px;
	padding-left: 10px;
}


/*=================================================================*/
/* Table stuff */
table {
	border: 1px solid rebeccapurple !important;
	border-radius: 8px;
}

	table .Upgrade tr:nth-child(even) {
		background-color: honeydew;
	}


tr th:first-child {
	border-top-left-radius: 6px;
}

tr th:last-child {
	border-top-right-radius: 6px;
}

th {
	font-size: 11pt;
	font-weight: bold;
	background-color: rebeccapurple;
	color: white;
	padding: 5px;
	height: 36px;
}

td {
	font-size: 11pt;
	padding: 3px;
}


.tdl {
	text-align: left;
	white-space: nowrap;
}

.tdc {
  text-align: center;
/*	text-align: -webkit-center;*/
	white-space: nowrap;
}

.tdr {
	text-align: right;
	white-space: nowrap;
}

.wrap {
	white-space: normal !important;
}

.NoWrap {
	white-space: nowrap !important;
}


.me {
	background-color: mistyrose !important;
	font-weight: bold;
}

.outer {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.middle {
	display: table-cell;
	vertical-align: middle;
}

.inner {
	margin-left: auto;
	margin-right: auto;
}
/*=================================================================*/


.ReadOnly {
	background-color: lavender !important;
	color: black;
	padding: 4px;
}


/*=================================================================*/
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 48px !important;
	height: 28px !important;
	border-radius: 15px;
	margin: 10px;
}

	/* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: lightblue;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 4px;
		bottom: 4px;
		background-color: #2196F3;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2196F3; /* bacground color of the slider when selected */
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
	background-color: whitesmoke;
}

input:checked + .slider.ReadOnly:before {
	background-color: rebeccapurple !important;
}

/* Rounded sliders */
.slider.round {
	/* color of the toggle */
	border-radius: 20px;
	/*background-color: #cec9c9;*/
}

	.slider.round:before {
		border-radius: 50%;
	}

.slider.ReadOnly {
	/*background of the slider when readonly*/
	border-radius: 20px;
	background-color: lavender !important;
	cursor:auto;
}

	.slider.ReadOnly:before {
		/* color of the toggle */
		border-radius: 20px;
		background-color: mediumpurple !important;
	}
/*=================================================================*/













.MenuImage {
	width: 50%;
	max-height: 100%;
	height: auto;
}


#MenuTable {
	object-fit: contain;
	max-width: 100vw;
	border: 1px solid red;
	height: 10vw;
}

#CookieConsentDiv {
	width: auto;
	text-align: center;
	margin: 10px;
	padding: 10px;
	font-size: 12pt;
	background-color: antiquewhite;
	position: absolute;
	bottom: 50px;
	left: 25%;
	display: none;
	max-width: stretch;
	z-index: 7000;
}

#ErrorDiv {
	position: fixed;
	border: 3px solid darkred;
	z-index: 5000;
	top: 50%;
	left: 50%;
	max-height: fit-content !important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 20px;
	background-color: antiquewhite;
	font-size: 12pt;
	-webkit-animation: cssAnimation 5s forwards;
	animation: cssAnimation 5s forwards;
}

	#ErrorDiv span {
		text-align: center;
		color: darkred;
		padding: 20px;
		font-weight: normal;
		font-size: 12pt;
	}

#SuccessDiv {
	position: fixed;
	border: 1px solid rebeccapurple;
	z-index: 5000;
	top: 50%;
	left: 50%;
	max-height: fit-content !important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 5px;
	border-radius: 5px;
	background-color: lightcyan;
	font-size: 12pt;
	-webkit-animation: cssAnimation 1.5s forwards;
	animation: cssAnimation 1.5s forwards;
}

	#SuccessDiv span {
		text-align: center;
		color: green;
		padding: 20px;
		font-weight: normal;
		font-size: 12pt;
	}

#DebugDiv {
	position: fixed;
	border: 3px double rebeccapurple;
	z-index: 5000;
	top: 50%;
	left: 50%;
	max-height: fit-content !important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 20px;
	background-color: silver;
	font-size: 12pt;
	-webkit-animation: cssAnimation 5s forwards;
	animation: cssAnimation 5s forwards;
}

	#DebugDiv span {
		text-align: center;
		color: black;
		padding: 20px;
		font-weight: normal;
		font-size: 10px;
	}

#DebugSQLDiv {
	position: fixed;
	border: 3px double rebeccapurple;
	z-index: 5000;
	top: 50%;
	left: 50%;
	max-height: fit-content !important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 20px;
	background-color: silver;
	width: 400px;
	font-size: 10px;
}

	#DebugSQLDiv span {
		text-align: center;
		color: black;
		padding: 20px;
		font-weight: normal;
		font-size: 10px;
	}


#CompetitionDiv {
	position: fixed;
	right: 150px;
	top: 10px;
	line-height: 1.6em;
	border: 2px double #ACFEAC;
	z-index: 6000;
	max-width: fit-content;
	color: rebeccapurple;
	background-color: white;
	border-radius: 15px;
	padding: 5px 15px 0px 15px;
}

#PlatformProfileEdit {
	align-content: flex-start;
	text-align: left;
	max-width: fit-content;
	/*width: 550px;*/
	border: 0px dotted rebeccapurple;
	border-radius: 15px;
}

#myPoolsLink {
	color: rebeccapurple;
}

/*======================================================*/
/* OTHER HTML TAGS */
/*======================================================*/
a {
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}

	a.Dotted:hover {
		background-color: rebeccapurple;
		color: white;
	}

	a.UrlButton:hover {
		background-color: rebeccapurple !important;
		color: white !important;
	}

p {
	padding: 2px;
	margin: 2px;
	font-weight:normal;
	font-size: max(0.85vw, 13pt);
	white-space:pre-wrap;
}

div {
	/* div */
	padding: 10px;
	margin: 5px;
	border: 0px;
}

	div.Dotted {
		border: 2px dotted red;
	}


.HVR {
	border: 2px solid red;
	background-color:honeydew;
}

	.HVR:hover {
		cursor: pointer;
		background-color: mistyrose !important;
	}

hr {
	height: 0px;
	border: none;
	border-top: 1px solid rebeccapurple;
}

label {
	display: block;
	vertical-align: bottom;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
	padding-bottom: 0px;
	border: 0px solid rebeccapurple;
	align-self: flex-start;
	font-weight:bold;
}

	label.ReadOnly {
		padding:0px;
	}

.Mandatory {
	color: red;
	font-weight: bold;
	font-size: 14pt;
}

.Url {
	cursor: pointer;
}

.UrlButton {
	padding: 5px 5px 5px 5px;
	cursor: pointer;
	background-color: azure;
	color: rebeccapurple;
	border-radius: 5px;
	font-size: 11pt;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	border: 1px solid rebeccapurple;
	font-weight: 500;
	white-space: nowrap;
	max-width: fit-content;
}

	.UrlButton:hover {
		background-color: #ACFEAC;
		color: rebeccapurple !important;
		text-decoration: none;
	}


.Button {
	margin: 5px;
	padding: 8px 15px 8px 15px;
	cursor: pointer;
	background: rebeccapurple;
	color: white;
	border-radius: 5px;
	font-size: 11pt;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	border: 1px solid rebeccapurple;
	font-weight: 500;
	white-space: nowrap;
	max-width:fit-content;
}

	.button:hover {
		background-color: #ACFEAC;
		color: rebeccapurple !important;
		text-decoration: none;
	}

button {
	margin: 5px;
	padding: 8px 15px 8px 15px;
	cursor: pointer;
	background: rebeccapurple;
	color: white;
	border-radius: 5px;
	font-size: 11pt;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	border: 1px solid rebeccapurple;
	font-weight: 500;
	white-space: nowrap;
	max-width: fit-content;
}

	button:hover {
		background-color: #ACFEAC;
		color: rebeccapurple !important;
		text-decoration: none;
	}

	button.PicButton {
		border: 1px dotted rebeccapurple;
		background-color: ghostwhite;
		color: rebeccapurple;
		font-size: 11pt;
		padding: 7px;
		margin: 3px;
	}

		button.PicButton:hover {
			background-color: #ACFEAC;
			color: rebeccapurple !important;
			padding: 7px;
			margin: 3px;
		}

input[type=button] {
	margin: 5px;
	padding: 8px 15px 8px 15px;
	cursor: pointer;
	background: rebeccapurple;
	color: white;
	border-radius: 5px;
	font-size: 11pt;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	border: 1px solid rebeccapurple;
	font-weight: 500;
	white-space: nowrap;
	max-width: fit-content;
}

	input.Button:hover {
		background-color: #ACFEAC;
		color: rebeccapurple !important;
		text-decoration: none;
	}

	input[type=button]:hover {
		background-color: #ACFEAC;
		color: rebeccapurple !important;
		text-decoration: none;
	}

	input[type=button].PicButton {
		border: 1px dotted rebeccapurple;
		background-color: ghostwhite;
		color: rebeccapurple;
		font-size: 11pt;
		padding: 7px;
		margin: 3px;
	}

		input[type=button].PicButton:hover {
			background-color: #ACFEAC;
			color: rebeccapurple !important;
			padding: 7px;
			margin: 3px;
		}


input, select {
	font-size:13pt;
	margin: 5px;
	padding: 5px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	border: 1px solid rebeccapurple;
	border-radius: 5px;
}

	input.ReadOnly {
		color: rebeccapurple;
		accent-color: lavender;
		border: 1px dotted black;
		font-weight: bold;
		/*		background-color: lightgrey;*/
	}


/* small devices (phone, 750px and up) */
@media only screen and (max-width: 780px) {
	#TopHeader{
		zoom:.88;
/*		max-width:fit-content;*/
	}
}

@media only screen and (min-width: 750px) {
	input {
		font-size: 20pt;
		min-width:auto;
	}
	li {
		font-size: 20pt;
	}
}

/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width: 960px) {
	input {
		font-size: 13pt;
		min-width: auto;
	}
	li {
		font-size: 13pt;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	input {
		font-size: 13pt;
	}
	li {
		font-size: 13pt;
	}
}

textarea {
	/*font-size: max(12pt, 0.9em);*/
	font-size: 13pt;
	margin: 5px;
	padding: 5px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	border: 1px solid rebeccapurple;
	border-radius: 5px;
}

	textarea.ReadOnly {
		color: rebeccapurple;
		background: transparent;
		border: 1px dotted black;
		/*min-width:fit-content;*/
		max-height: fit-content;
	}

ul {
	margin: 0px;
	/*padding-left: 55px;*/
	font-size: 0.8em;
}

.HelpList {
	display: none;
	margin-bottom: 20px;
}

li {
	list-style-type: '▶';
	line-height: 22px;
	border: 0px solid rebeccapurple;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 5px;
	padding-left: 10px;
	/*word-wrap: normal;*/
	white-space: normal;
	font-size: max(13pt,0.8em);
	/*font-size: 1.2em;*/
}

	li.NoBullet {
		list-style-type: none;
		white-space:normal;
	}

#HomeUL li {
	white-space: normal;
}


@keyframes cssAnimations {
	0% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		height: 0;
		width: 0;
	}
}

@-webkit-keyframes cssAnimations {
	0% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		height: 0;
		width: 0;
		content: 'halo';
	}
}

/*=================================================================*/
/* 
  Tools / Custom Classes
  - ScaleImage - Image scaler to autosize based on screen size
  - CenterMe - used to center some content, especially divs
  - Button - standard button
  - Dotted - put a dotted outline to show something
  - Emoji - Displaye emojis
*/
.ScaleImage {
	max-width: 100%;
	display: block;
	width: auto;
	height: auto;
	min-height: 60% !important;
}

.PageContent {
	height: auto;
	border: 1px dotted #ACFEAC;
}

.CenterMe {
	align-content: center;
	border: 0px dotted red;
	text-align: center;
}

.CenterContent {
	display: grid;
	text-align: center;
	place-content: center !important;
}

.PopupDiv {
	position: fixed;
	border: 3px double rebeccapurple;
	z-index: 5000;
	top: 60%;
	left: 50%;
	max-height: fit-content !important;
	background-color: aliceblue;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 20px;
	border-radius: 20px;
}

.NoBorder {
	border: 0px !important;
}

.Box {
	border: 1px solid rebeccapurple;
}

.RedBox {
	border: 2px dashed red !important;
}

.BlueBox {
	border: 2px dashed blue !important;
}

.GreenBox {
	border: 2px dashed green !important;
}

.Dotted {
	border: 1px dotted rebeccapurple;
}

.Transparent {
	background-color:transparent;
}

.Bold {
	font-weight: bold;
}

.LogoButton {
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border: 1px dotted black;
	cursor: pointer;
	background-color: ghostwhite;
}

	.LogoButton:hover {
		background-color: rebeccapurple;
	}


.emoji {
	font-size: 10pt;
	transform: scale(0.75);
	align-self: center;
	padding: 3px;
}

.Description {
	font-size: 10pt;
	font-weight: bold;
	line-height: 22px;
	border: 0px solid rebeccapurple;
	margin: 0px;
	padding: 0 0 0 10px;
}

.RoundedDots {
	border: 1px dotted rebeccapurple;
	border-radius: 15px;
}

.Rounded {
	border: 1px solid rebeccapurple;
	border-radius: 15px;
}

.RoundedTop {
	border: 1px solid rebeccapurple;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.Hidden {
	display:none;
	visibility: hidden;
}

.Plain {
	margin: 0px !important;
	padding: 0px !important;
}

.Padded {
	margin: 0px;
	padding: 10px !important;
}

.ThinPad {
	margin: 0px;
	padding: 5px !important;
}

.AutoMargin {
	margin: auto !important;
}

.Margin {
	margin: 10px;
	padding: 0px !important;
}

.Title {
	font-weight: bold;
	font-size: 1.2vw;
	font-family: Verdana;
	padding: 3px;
}

.Text {
	font-weight: normal;
	font-size: 12pt;
	font-family: Tahoma, Verdana;
	padding: 3px;
}

.Small {
	font-weight: normal;
	font-size: 8pt !important;
	padding: 6px;
}

.Debug {
	font-weight: normal;
	font-size: 8pt !important;
	padding: 2px;
	margin: 2px;
	background-color: lavender !important;
	color: black;
}

.Medium {
	font-weight: normal;
	font-size: 10pt;
	padding: 6px;
}

.RowHighlight {
	background-color: honeydew;
}

.PoolUpgrade {
	background-color: mistyrose !important;
}

.Highlight {
	color: red;
	background-color: yellow;
	padding: 3px;
	font-weight: bold;
	font-size: larger
}


.Qualifies {
	font-size: 8pt;
	color: rebeccapurple;
	background-color: lemonchiffon;
}

.GoesHome {
	FONT-SIZE: 8pt;
	COLOR: gray
}

.parallax {
	/* The image used */
	background-image: url("images/pitch_background.jpg");
	/* Set a specific height */
	min-height: 800px;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/*contain;*/
}


.HScroll {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 775px;
	white-space: nowrap
}
	.HScroll button {
		display: inline-block;
	}

.Picked {
	background-color: mistyrose !important;
	border: 3px solid rebeccapurple !important;
}

.Score {
	font-size: 10pt;
	width: 50px;
	color: rebeccapurple;
	text-align: center;
	border: rebeccapurple 1px solid;
}

.SmallScore {
	font-size: 10pt;
	width: 35px;
	color: rebeccapurple;
	text-align: center;
	border: rebeccapurple 1px solid;
	padding: 4px !important;
	margin: 0px !important;
}

.Stats {
	color: darkred;
	font-family: 'Courier New';
	font-weight: bold;
	font-size: 11pt;
	background-color: lemonchiffon;
	padding: 2px !important;
	margin: 2px !important;
}

/****************************************************************************************
	Chat related settings
*/


@keyframes blink {
	0% {
		opacity: 1;
	}

	49% {
		opacity: 0.75;
	}
	50% {
		opacity: 0.50;
	}

	100% {
		opacity: 0;
	}
}

img.Blink {
	animation: blink 2s;
	animation-iteration-count: infinite;
}


.PopupChat {
	position: fixed;
	border: 2px double rebeccapurple;
	z-index: 5000;
	background-color: lightcyan;
	padding: 50px;
	border-radius: 8px;
	bottom: 100px;
	right: 10px;
	height: 460px;
	width: 450px;
	display:none;
}

.ChatList { /*Container for chat texts*/
	border-radius: 8px;
	padding: 5px;
	margin: 0px;
	height: 340px;
	width: 445px !important;
	background-color: ghostwhite;
	overflow-x: hidden !important;
	overflow-y: auto;
	border: 1px dotted rebeccapurple;
}


.ChatBox {
	margin: 0px;
	position: relative;
	left: 5px;
	padding: 5px;
	border-radius: 15px;
	text-align: left;
	max-height: fit-content;
	max-width: fit-content;
}

.ChatAuthor {
	text-transform: capitalize;
	font-weight: bold;
	border: solid 0px;
	padding-bottom: 0px;
	padding-top:10px !important;
}

.ChatText {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 11pt;
	border: dotted 0px;
	padding: 2px;
	margin: 0;
	padding-left: 18px;
	width: 410px !important;
	overflow: scroll hidden auto;
	white-space: pre-wrap;
}

.ChatEntryDiv {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 10pt;
	border: solid 0px;
	padding: 3px;
	position:fixed;
	bottom:100px;
}
/*****************************************************************************************/

.ContainerFlex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.InlineFlex {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items:center;
}


.ContainerDiv {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: white;
	border: 0px dotted rebeccapurple;
	border-radius: 10px;
	align-items: flex-start;
}

.W50 {
	width: 50px !important;
}
.W75 {
	width: 75px !important;
}
.W100 {
	width: 100px !important;
}
.W200 {
	width: 200px !important;
}
.W250 {
	width: 250px !important;
}
.W300 {
	width: 300px !important;
}
.W350 {
	width: 350px !important;
}
.W400 {
	width: 400px !important;
}
.W450 {
	width: 450px !important;
}
.W500 {
	width: 500px !important;
}
.W550 {
	width: 550px !important;
}
.W600 {
	width: 600px !important;
}
.W650 {
	width: 650px !important;
}
.W700 {
	width: 700px !important;
}
.W750 {
	width: 750px !important;
}
.W800 {
	width: 800px !important;
}
.W900 {
	width: 900px !important;
}
.W1000 {
	width: 1000px !important;
}
.W1100 {
	width: 1100px !important;
}
.W1200 {
	width: 1200px !important;
}

.H700 {
	height: 700px !important;
}



#tblMyPools {
	width: 100%;
}

	#tblMyPools td {
		padding: 7px;
	}

	#tblMyPools tr:nth-child(even) {
		cursor: pointer;
		background-color: azure;
	}

	#tblMyPools tr:hover {
		cursor: pointer;
		background-color: mistyrose;
	}

#tblStandings th {
	padding: 7px;
}

#tblStandings td {
	padding: 5px;
}

#tblStandings tr:nth-child(even) {
	background-color: honeydew;
}

#tblScores th {
	padding: 7px;
}

#tblScores td {
	padding: 7px;
}

#tblScores tr:nth-child(even) {
	cursor: pointer;
	background-color: honeydew;
}

/*~~~ Bonus Team Status ~~~~~~*/
.ActiveBT {
	color: darkred;
	font-weight: bold;
	padding: 3px;
}

.EliminatedBT {
	color: silver;
	padding: 3px;
}

img.ActiveBT {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	width: 50px;
	height: 50px;
}

img.ActiveBT:hover {
	background-color: azure;
	padding: 2px;
	border-radius: 10px;
	border: 1px solid rebeccapurple;
	width:50px;
	height:50px;
}

img.EliminatedBT {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	padding: 3px;
	width: 50px;
	height: 50px;
}

img.EliminatedBT:hover {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	background-color: azure;
	border: 1px solid rebeccapurple;
	padding: 2px;
	border-radius: 10px;
	width: 50px;
	height: 50px;
}

.DisabledImg {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	color: silver;
}

/*span.ActiveBT {
	color: darkred;
	font-weight: bold
}

span.EliminatedBT {
	color: silver
}
*//*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Help Section */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.HelpDiv {
	font-weight: bold;
	font-size: 15pt;
	font-family: Verdana;
	padding: 4px !important;
	border-radius: 15px;
	border: 1px dotted white;
}
	.HelpDiv:hover {
		background-color: azure;
		border: 1px dotted rebeccapurple;
		padding: 4px !important;
		border-radius: 15px;
	}

.HelpTitle {
	font-weight: bold;
	font-size: 15pt;
	font-family: Verdana;
	color: limegreen;
	cursor: pointer;
}
