﻿
.pick-box-main:not(.compact) {
	display: inline-block;
	background-color: #343853;
	border-radius: 25px;
	overflow: hidden;
	height: 185px;
	width: 250px;
	margin: 5px;
	color: #ddd;
	font-weight: bold;
	text-align: center;
}

	/* Grid stuff */
	.pick-box-main:not(.compact) .pick-main {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 30px 1fr 30px;
	}

	.pick-box-main:not(.compact) .pick-game-time {
		grid-row: 1;
		grid-column: 1;
	}

	.pick-box-main:not(.compact) .pick-game-status {
		grid-row: 1;
		grid-column: 1;
	}

	.pick-box-main:not(.compact) .pick-away-team {
		grid-row: 2;
		grid-column: 1;
	}

	.pick-box-main:not(.compact) .pick-home-team {
		grid-row: 2;
		grid-column: 2;
	}

	.pick-box-main:not(.compact) .pick-away-stats {
		grid-row: 3;
		grid-column: 1;
	}

	.pick-box-main:not(.compact) .pick-home-stats {
		grid-row: 3;
		grid-column: 2;
	}
	/* end Grid stuff */

	.pick-status {
		display:none;
	}

	.pick-box-main:not(.compact).picked {
		background-color: #4a968c;
	}

	.pick-box-main:not(.compact).completed {
	}

	.pick-box-main:not(.compact) .pick-main {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.pick-box-main:not(.compact) .pick-game-time {
		display:none;
		text-align: left;
		padding: 3px 18px;
		font-size: 12px;
	}

	.pick-box-main:not(.compact) .pick-game-status {
		padding: 3px 18px;
		font-size: 12px;
		text-align: left;
		color: #caffc9;
	}

	.pick-box-main:not(.compact) .pick-stats {
		background-color: #397170;
	}

	.pick-box-main:not(.compact) .pick-teams {
		padding-top: 0px;
		position: relative;
	}

		.pick-box-main:not(.compact) .pick-teams.pick-away-team {
			padding-right: 20px;
		}

		.pick-box-main:not(.compact) .pick-teams.pick-home-team {
			padding-left: 20px;
		}


		.pick-box-main:not(.compact) .pick-teams .pick-logo {
			position: relative;
			display: inline-block;
			width: 70px;
			height: 70px;
			border-radius: 35px;
			background-color: #425c6b;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
		}

/*			.pick-box-main:not(.compact) .pick-teams .pick-logo .far.fa-thumbs-up {
				display: none;
				font-size: 48px;
				position: absolute;
				left: 50%;
				margin-left: -24px;
				top: 13px
			}
*/
		.pick-box-main:not(.compact) .pick-teams.picked .pick-logo {
			border: solid 5px #deff26;
			background-color: #deff2699;
			box-shadow: 0px 0px 13px black;
		}

	/*	.pick-box-main:not(.compact) .pick-teams .pick-logo .far.fa-thumbs-up {
			color: greenyellow;
		}
*/
		.pick-box-main:not(.compact) .pick-teams.pick-correct .pick-logo {
			border: solid 5px #26ff9b;
			background-color: #004b28;
		}

			.pick-box-main:not(.compact) .pick-teams.pick-correct .pick-logo::before {
				content: '\2713';
				display: inline-block;
				color: #26ff9bdd;
				padding: 0 6px 0 0;
				position: absolute;
				font-size: 63px;
				top: -17px;
			}

		.pick-box-main:not(.compact) .pick-teams.pick-wrong .pick-logo {
			border: solid 5px #ff5888;
			background-color: #690623;
		}

			.pick-box-main:not(.compact) .pick-teams.pick-wrong .pick-logo::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 113%;
				height: 5px;
				background-color: #ff5888;
				transform: translate(-50%, -50%) rotate(45deg);
			}

		.pick-box-main:not(.compact) .pick-teams img {
			width: 45px;
			height: 45px;
			margin-top: 10px;
		}

	.pick-box-main:not(.compact) .pick-team-abbr {
		font-size: 13px;
		line-height: normal;
	}

		.pick-box-main:not(.compact) .pick-team-abbr .pick-team-rank {
			padding-right: 4px;
			color: #dfff66;
		}

	.pick-box-main:not(.compact) .pick-team-record {
		font-size: 10px;
		margin-top: -3px;
	}

	.pick-box-main:not(.compact) .pick-teams .pick-score {
		position: absolute;
		top: 16px;
		font-size: 25px;
		font-weight: 100;
		width: 30px;
	}

	.pick-box-main:not(.compact) .pick-teams.winner .pick-score {
		font-weight: bold;
	}


	.pick-box-main:not(.compact) .pick-teams.pick-away-team .pick-score {
		left: 91px;
		text-align: right;
	}

	.pick-box-main:not(.compact) .pick-teams.pick-home-team .pick-score {
		margin-left: -12px;
		text-align: left;
	}

	.pick-box-main:not(.compact) .pick-message {
		display: none;
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 30px;
		background-color: red;
		text-align: center;
	}

	.pick-box-main:not(.compact) .pick-hbar {
		width: 2px;
		height: 71px;
		border-left: solid 2px #e2e527;
		position: absolute;
		left: 50%;
		top: 30px;
	}

	.pick-box-main:not(.compact) .pick-help {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		position: absolute;
		left: 50%;
		bottom: 38px;
		font-size: 24px;
		color: #e6e3ff;
		margin-left: -20px;
		background-color: #194d4c;
	}


/* Compact mode */

.pick-day-group {
	background-color: #2a6326;
    margin: 20px;
    border: solid 2px #8cbd8c;
    border-radius: 10px;
}

.pick-box-main.compact {
	display: inline-block;
	background-color: #252d25;
	border-radius: 5px;
	overflow: hidden;
	height: 50px;
	width: 250px;
	margin: -2px 1px;
	color: #ddd;
	font-weight: bold;
	text-align: center;
}

	/* Grid stuff */
	.pick-box-main.compact .pick-main {
		display: grid;
    grid-template-columns: 30px 170px 50px;
    grid-template-rows: 25px 25px;
	}

	.pick-box-main.compact .pick-game-time {
		grid-row: 1 / span 2;
		grid-column: 3;
	}

	.pick-box-main.compact .pick-game-status {
		grid-row: 1 / span 2;
		grid-column: 3;
	}

	.pick-box-main.compact .pick-away-team {
		grid-row: 1;
		grid-column: 2;
	}

	.pick-box-main.compact .pick-home-team {
		grid-row: 2;
		grid-column: 2;
	}

	.pick-box-main.compact .pick-away-stats {
		grid-row: 1;
		grid-column: 2;
	}

	.pick-box-main.compact .pick-home-stats {
		grid-row: 2;
		grid-column: 2;
	}
	/* end Grid stuff */

	.pick-status {
		display:none;
	}

	.pick-box-main.compact.picked {
		/*background-color: #4a968c;*/
	}

	.pick-box-main.compact.completed {
	}

	.pick-box-main.compact .pick-main {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.pick-box-main.compact .pick-game-time {
		display:none;
	}

	.pick-box-main.compact .pick-game-status {
		font-size: 12px;
		color: #caffc9;
		border-left: solid 1px;
	}

	.pick-box-main.compact .pick-stats {
		/*background-color: #397170;*/
	}

	.pick-box-main.compact .pick-teams {
		padding-top: 0px;
		position: relative;
	}

		.pick-box-main.compact .pick-teams.pick-away-team {
/*			padding-right: 20px;
*/		}

		.pick-box-main.compact .pick-teams.pick-home-team {
/*			padding-left: 20px;
*/		}


		.pick-box-main.compact .pick-teams .pick-logo {
			display: none;
		}

/*			.pick-box-main.compact .pick-teams .pick-logo .far.fa-thumbs-up {
				display: none;
				font-size: 48px;
				position: absolute;
				left: 50%;
				margin-left: -24px;
				top: 13px
			}
*/

		.pick-box-main.compact .pick-teams .pick-status {
			display:none;
			width:22px;
			height:22px;
			border-radius: 5px;
			position: absolute;
			left: -28px;
			top: 1px;
		}

		.pick-box-main.compact .pick-teams.picked .pick-status {
			display: inline-block;
			border: solid 2px #deff26;
			background-color: #deff2699;
			box-shadow: 0px 0px 5px black;
		}

		.pick-box-main.compact .pick-teams.pick-correct .pick-status {
			display: inline-block;
			border: solid 3px #26ff9b;
			background-color: #004b28;
		}

			.pick-box-main.compact .pick-teams.pick-correct .pick-status::before {
				content: '\2713';
				display: inline-block;
				color: #26ff9b;
				position: absolute;
				font-size: 19px;
				top: -6px;
				left: 2px;
			}

		.pick-box-main.compact .pick-teams.pick-wrong .pick-status {
			display: inline-block;
			border: solid 3px #ff5888;
			background-color: #690623;
		}

			.pick-box-main.compact .pick-teams.pick-wrong .pick-status::before {
				content: "";
				position: absolute;
				top: 8px;
				left: 8px;
				width: 24px;
				height: 3px;
				background-color: #ff5888;
				transform: translate(-50%, -50%) rotate(45deg);
			}

		.pick-box-main.compact .pick-teams img {
			width: 35px;
			height: 35px;
			margin-top: 10px;
		}

	.pick-box-main.compact .pick-team-abbr {
		font-size: 12px;
		line-height: normal;
		position: absolute;
		top: 4px;
		font-weight:100;
	}

		.pick-box-main.compact .pick-teams.pick-away-team  .pick-team-abbr {
			left: 5px;
		}

		.pick-box-main.compact .pick-teams.pick-home-team  .pick-team-abbr {
			left: 5px;
		}

		.pick-box-main.compact .pick-team-abbr .pick-team-rank {
			padding-right: 4px;
			color: #dfff66;
		}

	.pick-box-main.compact .pick-team-record {
		display:none;
		font-size: 13px;
		margin-top: -10px;
	}

	.pick-box-main.compact .pick-teams .pick-score {
		position: absolute;
		top: -1px;
		font-size: 18px;
		font-weight: 100;
		width: 30px;
		right: 5px;
		text-align: right;
	}

		.pick-box-main.compact .pick-teams.winner .pick-score {
			font-weight: bold;
		}

	.pick-box-main.compact .pick-message {
		display: none;
		
	}

	.pick-box-main.compact .pick-hbar {
		display: none;
	}

	.pick-box-main.compact .pick-help {
				display: none;

	}

