@font-face {
	font-family: 'KGYouAreLoved';
	src: url('../fonts/KGYouAreLoved.woff2') format('woff2'),
		url('../fonts/KGYouAreLoved.woff') format('woff'),
		url('../fonts/KGYouAreLoved.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/*START: base styles*/
body { 
	background: #fff; 
	color: #000; 
	font-family: 'Pragati Narrow', 'Arial Narrow', Arial, sans-serif;
	font-size: 20px;
	line-height: 1.2; 
	margin: 0; 
	padding: 0; 
}
input,
textarea,
select,
button,
optgroup,
option,
legend {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit; 
}
h1, h2, h3, h4, h5, h6 { 
	font-family: 'KGYouAreLoved', Arial, sans-serif; 
	font-weight: normal; /* KGYouAreLoved looks weird bold. */ 
}
h2 {
	margin-bottom: 12px;
	margin-top: 6px;
} 
h3, h4, h5, h6 { 
	margin-bottom: 6px;
	margin-top: 6px;
}
h1 { 
	font-size: 2em; 
}
h2 { 
	color: #555; 
	font-size: 1.7em; 
}
h3 { 
	font-size: 1.3em; 
}
h4 { 
	color: #555; 
	font-size: 1em; 
}
h5 { 
	font-size: .9em; 
}
h6 { 
	color: #555; 
	font-size: .8em; 
}
p { 
	margin: 0; 
	padding-bottom: 15px; 
	padding-top: 0; 
}
ul, ol { 
	margin: 0; 
	padding: 0 0 15px 20px; 
}
ul ul, ul ol, ol ol, ol ul { 
	padding-bottom: 0; 
}
table,
form { 
	margin-bottom: 15px;
}
table {
	border-collapse: collapse;
}
a:link,
a:visited { 
	color: #09f; 
}
a:hover,
a:focus { 
	color: #666; 
}
a:active { 
	color: #09f; 
	text-decoration: none; 
}
form { 
	box-sizing: border-box; 
	background: #eee; 
	width: 410px; 
	padding: 20px; 
	border-radius: 20px; 
	box-shadow: 5px 5px 5px #000; 
}
form label { 
	display: inline-block; 
	font-weight: 800; 
	width: 120px; 
}
form input[type=text], 
form input[type=password], 
form textarea { 
	font-weight: 400; 
	margin: 5px 0; 
	padding: 10px; 
	vertical-align: middle; 
	width: 220px; 
}
form input[type=text].hideFormField, 
form input[type=password].hideFormField { 
	border: none; 
	display: block; 
	height: 0; 
	margin-top: -10px; 
	padding: 0; 
}
form input[type=submit] { 
	background: #fff; 
	border-radius: 10px; 
	border: none; 
	box-shadow: 2px 2px 2px #000; 
	color: #000; 
	display: block; 
	font-weight: 800; 
	margin-top: 10px; 
	padding: 10px; 
	width: 370px; 
}
form input[type=submit]:hover { 
	background: #000; 
	box-shadow: 2px 2px 2px #666; 
	color: #fff; 
	cursor: pointer; 
}
.label-unmask { 
	display: none; 
	float: left; 
	margin-top: 4px; 
	text-align: right; 
	width: 340px; 
}
.checkbox-for-form, 
.checkbox-for-password-unmask { 
	height: 20px; 
	margin: 3px 2px 5px 0; 
	width: 20px; 
}
.checkbox-for-password-unmask { 
	display: none; 
	float: right; 
}
.submit-message { 
	clear: both;
	padding-bottom: 0;
}
@media (max-width: 450px) {
	form, 
	form input[type=text], 
	form input[type=password], 
	form textarea, 
	form label, 
	form input[type=submit] { 
		box-sizing: border-box; 
		display: block; 
		width: 100%; 
	}
	form input[type=text], 
	form input[type=password], 
	form textarea { 
		margin-bottom: 10px; 
		margin-top: 0; 
	}
	form input[type=text].hideFormField, 
	form input[type=password].hideFormField { 
		margin-bottom: 10px; 
	}
	.label-unmask { 
		float: left; width: auto; 
		margin-left: 2px; 
		text-align: left; 
	}
	.checkbox-for-password-unmask { 
		float: left; 
		width: 20px; 
	}
}
.clear {
	clear: both;
}
/*  END: base styles*/

/*START: design specific*/
.container-header .header,
.container-user-specific .user-specific,
.container-deadline-countdown .deadline-countdown,
.container-navigation .navigation,
.container-content .content {
	margin: 0 auto;
	max-width: 1831px;
	padding: 10px
}
.container-header .header,
.container-user-specific .user-specific,
.container-content .content {
	padding-bottom: 0;
}
.container-navigation .navigation {
	padding: 5px 0;
}
@media (max-width: 1850px) {
	.container-header .header,
	.container-user-specific .user-specific,
	.container-deadline-countdown .deadline-countdown,
	.container-navigation .navigation,
	.container-content .content {
		max-width: 97vw;
	}
}
@media (max-width: 1200px) {
	.container-header .header,
	.container-user-specific .user-specific,
	.container-deadline-countdown .deadline-countdown,
	.container-navigation .navigation,
	.container-content .content {
		max-width: 95vw;
	}
}
@media (max-width: 1000px) {
	.container-header .header,
	.container-user-specific .user-specific,
	.container-deadline-countdown .deadline-countdown,
	.container-navigation .navigation {
		margin-left: auto;
		margin-right: auto;
		max-width: 96%;
		padding-left: 2%;
		padding-right: 2%;
	}
}
@media (max-width: 700px) {
	.container-content .content {
		margin-left: auto;
		margin-right: auto;
		max-width: 96%;
		padding-left: 2%;
		padding-right: 2%;
	}
}

.header-title {
	float: left;
	width: 71%;
}
.header h1 {
	margin: 0;
}
.entriesAndPot {
	float: right;
	margin-bottom: 10px;
	width: 29%;
}
.entriesAndPot .entriesAndPotItem {
	display: block;
	float: left;
	font-weight: bold;
	padding: 0 5px 0 0;
	text-align: right;
	width: 78%;
}
.entriesAndPot .entriesAndPotItemResult {
	display: block;
	float: left;
	width: 20%;
}
@media (max-width: 1000px) {
	.header-title,
	.entriesAndPot {
		width: 100%;
	}
	.entriesAndPot .entriesAndPotItem, 
	.entriesAndPot .entriesAndPotItemResult {
		float: left;
		width: auto;
	}
	.prize-pot,
	.number-left {
		float: left;
		width: 100%;
	}
}

.container-user-specific { 
	background: #000; 
	clear: both;
	color: #fff; 
}
.container-user-specific .user-specific p { 
	padding: 0; 
}

.container-deadline-countdown { 
	background: #000; 
	color: #fff; 
	position: -webkit-sticky; /* For Safari */
	position: sticky;
	top: 0;
	z-index: 1000;
}
.container-deadline-countdown .deadline-countdown p { 
	padding: 0; 
}
span#countdown .countdown-timer-number {
	color: #fff;
	display: inline-block;
	text-align: right;
	width: 26px;
}
@media (max-width: 700px) {
	.container-deadline-countdown .deadline-countdown p { 
		padding: 0;
		font-size: .9em;
	}
	.pickDeadlineCountdown {
		text-align: center;
	}
	span#countdown {
		display: block;
	}
	span#countdown .countdown-timer-number {
		width: 22px;
	}
}
.container-navigation { 
	background: #eee; 
	clear: both; 
	color: #000; 
	font-weight: bold;
}
.navigation ul { 
	display: flex; /* Firefox extra spacing with linebreaks issue fix */
	gap: 0; /* Firefox extra spacing with linebreaks issue fix */
	list-style: none;
	margin: 0 -5px; 
	padding: 0;
}
.navigation li { 
	padding: 0;
}
.navigation li a {
	padding: 5px;
}
.navigation li.navigationRight {
	margin-left: auto; /* Firefox extra spacing with linebreaks issue fix */
}
@media (max-width: 1000px) {
	.navigation ul { 
		flex-wrap: wrap; /* Firefox extra spacing with linebreaks issue fix */
		margin: 0 -10px; 
	}
	.navigation li {
		line-height: 1.8;
		white-space: nowrap; /* Firefox extra spacing with linebreaks issue fix */
	}
	.navigation li a {
		padding: 10px;
	}
	.navigation li.navigationRight {
		margin-left: initial; /* Firefox extra spacing with linebreaks issue fix */
	}
	.navigation li .mobile-only-navigation {
		display: inline-block;
	}
}

#crazyPic {
	border: 4px solid #000;
	float: right;
	height: auto !important;
	margin: 0 0 20px 20px;
	width: 59%;
}
#howDoIFoosballPic {
	width: 100%;
}
@media (max-width: 1000px) {
	img#crazyPic {
		float: none;
		margin: 0 0 10px 0;
		max-width: 99%;
		width: 100%;
	}
}
.alert-from-commish {
	background: #09f;
	border: 3px solid #000;
	margin: 10px 0;
	padding: 20px;
	width: 35%;
}
.alert-from-commish a {
	color: #fff;
}
@media (max-width: 1000px) {
	.alert-from-commish {
		width: auto;
	}
}
/*  END: design specific*/

/*START: page formatting specific*/
#mpcw,
#RulesDeadline, 
#RulesPayment {
	scroll-margin-top: 50px; /* adjust this value to match your header's height */
}

@media (max-width: 700px) {
	#RulesDeadline, 
	#RulesPayment {
		scroll-margin-top: 70px; /* adjust this value to match your header's height */
	}
}

div.myEntries {
	display: flex;
	flex-wrap: wrap;
}
div.myEntriesCondensed {
	display: flex;
}
div.myEntries p {
	display: table;
}
div.entryInAccount {
	border: 1px solid #000;
	margin: 0 10px 10px 0;
	max-width: 300px;
	padding: 10px;
}
div.entryInAccount p, 
div.myEntriesChooseLineup p {
/*	min-height: 80px;*/
	padding-bottom: 5px;
}
div.entryInAccount.noPaid {
	background: #fb8;
}
div.entryInAccount.noPaid p.error {
	min-height: unset;
	padding-bottom: 10px;
}
@media (max-width: 1000px) {
	div.entryInAccount {
		width: 45%;
	}
}
@media (max-width: 700px) {
	div.entryInAccount {
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}
	div.entryInAccount p {
		min-height: initial;
		padding-bottom: 10px;
		width: 100%;
	}
	div.entryInAccount p.error {
		width: auto;
	}
}
a.linkButton {
	background: #fff;
	border-radius: 15px;
	border: 5px solid #df0;
	display: table-cell;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}
a.linkButton:link, 
a.linkButton:visited { 
	border: 5px solid #09f; 
}
a.linkButton:hover, 
a.linkButton:focus { 
	border: 5px solid #666; 
}
a.linkButton:active { 
	border: 5px solid #09f; 
}

.my-entries-table {
	width: 100%;
}
.my-entries-table .week-and-tiebreaker-headers {
	text-align: center;
	font-size: 22px;
	line-height: 1;
	border-bottom: 2px solid black;
	padding-top: 10px;
	padding-bottom: 2px;
}
.my-entries-table .my-picks-pick {
	font-weight: bold;
	text-transform: uppercase;
}
.my-entries-table .my-picks-pick-week {
	text-align: right;
}
.my-entries-table .my-picks-pick-current-week,
.my-entries-table .my-picks-pick-current-week-correct 
{
	font-size: 1.4em;
}
.my-entries-table .my-picks-pick.my-picks-pick-current-week:not(.user-done) {
	color: #b126ff;
}
.my-entries-table .my-picks-pick.my-picks-pick-current-week-correct:not(.user-done) {
	color: #090;
}
.my-entries-table .user-done {
	color: #666;
}
.mobile-only, 
div.myEntries .entry-mobile-only, 
.mobile-only-navigation {
	display: none;
}
@media (max-width: 700px) {
	.my-entries-table {
		width: 100%;
	}
	.my-entries-table td {
		width: 50%;
	}
	.my-entries-table .my-picks-pick-week {
		text-align: right;
	}
	.mobile-only, 
	div.myEntries .entry-mobile-only {
		display: block;
	}
}

.teamAbbreviation {
	font-weight: bold;
	text-transform: uppercase;
}
.pick-totals-table td {
	padding: 0 5px 0 0;
}
.pick-totals-table td.teamAbbreviation,
.pick-totals-table td.pt-count,
.pick-totals-table td.pt-percent {
	background: #eee;
	border-bottom: 4px solid white;
	border-top: 4px solid white;
	padding: 1px 5px;
}
.pick-totals-table .pt-time,
.pick-totals-table .pt-count,
.pick-totals-table .pt-percent {
	text-align: right;
}
.pick-totals-table .pt-time {
	padding-right: 20px;
	width: 70px;
}
.pick-totals-table .pt-count,
.pick-totals-table .pt-percent {
	font-weight: bold;
	text-align: right;
}
.pick-totals-table td.pt-percent {
	color: #000;
	padding: 1px 5px 1px 30px;
	font-weight: normal;
	text-decoration: none;
}
.pick-totals-table .pick-totals-at-cell {
	width: 50px;
	text-align: center;
}
@media (max-width: 700px) {
	.pick-totals-table .pt-time {
		padding-right: 5px;
	}
	.pick-totals-table .pick-totals-at-cell {
		width: 20px;
	}
}

.schedule-table td {
	vertical-align: top;
	padding: 5px;
}
.schedule-table .pt-time,
.enterWinnersGameTime {
	text-wrap: nowrap;
}
.schedule-table .team-name {
	text-wrap: wrap;
}
.schedule-table .pt-time,
.schedule-table .team-abbrev-away,
.schedule-table .team-name-home {
	text-align: right;
}
.schedule-table .team-abbrev {
	font-weight: bold;
	text-transform: uppercase;
}
.schedule-table .schedule-at-cell {
	text-align: center;	
}
@media (max-width: 700px) {
	.schedule-table .team-name {
		font-size: .8em;
	}
	.pick-totals-table td {
		padding: 0 2px 0 0;
	}
	.pick-totals-table td.teamAbbreviation,
	.pick-totals-table td.pt-count,
	.pick-totals-table td.pt-percent {
		padding: 1px 2px;
	}
}

.all-picks-table {
	border-spacing: 0;
/*	width: 100%;*/
}
.all-picks-table th {
	text-align: left;
}
.all-picks-table .tableHeader {
	font-weight: bold;
}
.all-picks-table .tableHeader, 
.all-picks-table .tablePickCell {
	text-align: center;
}
.all-picks-table .tableParticipantCell,
.all-picks-table .tableHeaderName {
	border-left: 1px solid #000;
	text-align: left;
}
.all-picks-table .tableHeader, 
.all-picks-table .tableParticipantCell, 
.all-picks-table .tablePickCell, 
.all-picks-table .tableUserInformationCell {
	border-right: 1px solid #000;
	padding: 4px;
	vertical-align: top;
}
.all-picks-table .tablePickCell {
	text-transform: uppercase;
}
.all-picks-table .tableRowColored {
	background: #eee;
}
.all-picks-table .tabledHeaderEmptyColumn {
	background: #fff !important;
	border-right: 1px solid #000;
	width: 20px;
}
.early-pick-made-do-not-show-value {
	font-style: italic;
}
@media (max-width: 1200px) {
	.table-container-for-scroll {
		overflow-x: auto;
	}
	.all-picks-table .tableParticipantCell {
		text-wrap: nowrap;
		overflow: hidden;
		max-width: 40vw;
	}
	.tableParticipantCell span { /*this is for the tooltip for mobile*/
		display: inline-block;
		width: 100%;
	}
	/* Freeze first column for all rows */
	.all-picks-table th:first-child,
	.all-picks-table td:first-child,
	.entries-out-table th:first-child,
	.entries-out-table td:first-child,
	.entries-remaining-per-person-table th:first-child,
	.entries-remaining-per-person-table td:first-child {
		background: #fff; /* Ensure the background is opaque */
		left: 0;
		position: sticky;
		z-index: 2; /* Adjust if needed for overlapping content */
	}
	.all-picks-table tr:nth-child(even) td:first-child {
		background-color: #eee;
	}
	.early-pick-made-do-not-show-value span {
		display: inline-block;
		padding: 0 14px;
	}
	#custom-tooltip {
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		opacity: 0;
		padding: 5px;
		pointer-events: none;
		position: absolute;
		text-align: center;
		transition: opacity 0.3s;
		width: 100px;
		z-index: 1000;
	}
}

.has-min-width {
	min-width: 100px;
}
.eliminated-by-team-table th, 
.eliminated-by-team-table td,
.entries-out-table th, 
.entries-out-table td,
.change-account-names-table th, 
.change-account-names-table td,
.entries-remaining-per-person-table th, 
.entries-remaining-per-person-table td {
	vertical-align: top;
	border: 1px solid black;
	text-align: right;
}
.entries-out-table th, 
.entries-out-table td {
	padding: 8px 3px;
}
.change-account-names-table th, 
.change-account-names-table td {
	padding: 0 3px;
}
.entries-remaining-per-person-table th, 
.entries-remaining-per-person-table td {
	padding: 3px;
}

.previousChamp {
	background: #eee;
	float: left;
	margin: 5px 5px 50px 5px;
	padding: 10px;
	text-align: center;
}
.previousChamp .highlight {
	display: inline-block;
	padding-top: 10px;
}

form.createEntry { 
	width: 100%; 
}
form.createEntry label {
	margin-bottom: 30px;
	width: 90%;
}

form#paid-entries,
form#change-account-names-edit, 
form#change-account-names-update {
	width: fit-content;
}

table.reportTable {
	border-collapse: collapse;
}
table.reportTable td {
	border: 1px solid black;
	padding: 3px;
}
.reportTableHeader {
	font-weight: bold;
}

table.reportTableNumbers td {
	text-align: right;
}
table.reportTableNumbers td:nth-child(1) {
	text-align: left;
}
/*  END: page formatting specific*/

/*START: Font Awesome icon pics page specific*/
.myEntriesMakePick select {
	display: none;
}

.dropdown-container {
	margin-bottom: 20px;
}
.dropdown {
	margin-bottom: 10px;
}
.pick-item {
	background-color: #e0e0e0;
	border-radius: 4px;
	border: 1px solid #ccc;
	cursor: pointer;
	display: block;
	margin: 2px 0;
	padding: 8px;
	text-align: center;
	width: 100%;
}
.option-item {
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #ccc;
	cursor: pointer;
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	margin: 2px;
	min-width: 45px;
	padding: 8px;
	text-align: center;
	text-transform: uppercase;
}
.option-item.disabled {
	opacity: 0.3; /* Make it look disabled */
	cursor: not-allowed;
}
.option-at {
	display: inline-block;
	margin: 0;
	padding: 8px 0;
}
.dropdown-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.dropdown-content .option-item:hover {
	background-color: #f1f1f1;
}
.dropdown-content .option-item.selected {
	background-color: #444;
	border-color: #888;
	color: #fff;
}
.dropdown-content .game-time {
	text-align: center;
	text-transform: uppercase;
}
/*~~~~~START: Disable all options within week-disabled except for selected*/
.dropdown-container.week-disabled .dropdown-content .option-item {
	cursor: not-allowed; /* Change cursor to indicate disabled */
	opacity: 0.5; /* Make it look disabled */
	pointer-events: none; /* Disable clicking */
}
.dropdown-container.week-disabled .dropdown-content .option-item.selected {
	opacity: 0.6; /* Make it look disabled */
}
/*~~~~~  END: Disable all options within week-disabled except for selected*/
.matchup {
	background: #eee;
	margin: 15px 5px;
	padding: 2px;
}
@media (max-width: 700px) {
	.matchup {
		margin: 3px;
	}
}
.matchup.matchup-disabled {
	cursor: not-allowed;
}
/*~~~~~START: Disable all options within week-disabled except for selected*/
.matchup.matchup-disabled .option-item {
	cursor: not-allowed; /* Change cursor to indicate disabled */
	opacity: 0.5; /* Make it look disabled */
	pointer-events: none; /* Disable clicking */
}
.matchup.matchup-disabled .option-item.selected {
	opacity: 0.6; /* Make it look disabled */
}
/*~~~~~  END: Disable all options within week-disabled except for selected*/
.fa-football-helmet {
	-webkit-text-stroke: 1px #000;
	display: block;
	font-size: 48px;
}
.fa-block-question {
	font-size: 30px;
}
@media (max-width: 700px) {
	.fa-block-question {
		font-size: 15px;
	}
}
.dropdown-container.current-week {
	background: #0099ffb3;
	margin-left: -10px;
	margin-right: -10px;
	padding: 10px 10px 0 10px;
}
.current-week.tie-breaker-row {
	margin-top: -20px;
}
/*  END: Font Awesome icon pics page specific*/

.back-to-my-entries {
	width: 100%;
	text-align: center;
	margin: 10px 20px 25px 20px;
}
.back-to-my-entries a {
	background: #fff;
	padding: 10px;
	border: 1px solid #000;
}
@media (max-width: 700px) {
	.back-to-my-entries {
		margin-top: 25px;
	}
}

/*START: general formatting specific*/
a.poolAdminLink {
	color: #f0f;
}
form#enterWinnersForm label {
	width: auto;
}
form#enterWinnersForm .enterWinnersEntered {
	padding: 1px 10px 1px 5px;
}
form#enterWinnersForm .cannotMarkGameYet,
form#enterWinnersForm .enterWinnersRadio {
	background: #fff;
	margin: 2px 4px;
	padding: 1px 10px 1px 5px;
}

.highlight { 
	color: #b126ff; 
	font-family: 'Exo 2', sans-serif; 
	font-size: 1.1em;
	line-height: 1em;
	font-weight: bold;
}

.error { 
	background: #fbfb55; 
	border: 1px solid #000; 
	color: #000; 
	margin-bottom: 10px; 
	padding: 10px; 
}
li.error { 
	list-style: none; 
	margin-left: -20px; 
}

.weekLink {
	display: inline-block;
	padding: 0 10px 0 0;
}

.gameLost,
.pickTotalsLost,
.pickedWrong,
.did-not-pick {
	color: #f00;
	text-decoration: underline;
}
.gameWon,
.pickTotalsWon,
.pickedRight {
	color: #090;
}
.percentageOut, 
.percentageLeft {
	color: #fff;
	display: inline-block;
	font-weight: bold;
	min-width: 43px;
	padding: 0 4px;
}
.percentageOut {
	background: #f00;
}
.percentageLeft {
	background: #090;
}
.notPaidRow,
.pickTotalsFellOut {
	color: #999;
	text-decoration: line-through;
}
.doNotShowPick,
.pickTotalsFellOut {
	font-style: italic;
}

#PaymentRuleChangeMoreInformation {
	display: none;
}
#PaymentRuleChangeMoreInformation, 
.PaymentRuleChangeMoreInformationRulesPage {
	background: #eee;
	margin: 0 0 20px 0;
	padding: 20px 20px 10px 20px;
}
/*  END: general formatting specific*/
